1 | # FadeView
|
2 |
|
3 | View that changes content gracefully
|
4 |
|
5 | <img src="https://media.giphy.com/media/1zgdmaNWIiMIJm9klY/giphy.gif" />
|
6 |
|
7 | ## Install
|
8 |
|
9 | ```sh
|
10 | yarn add @pietile-native-kit/fade-view
|
11 | or
|
12 | npm install --save @pietile-native-kit/fade-view
|
13 | ```
|
14 |
|
15 | ## Code example
|
16 |
|
17 | ```jsx
|
18 | import React, { Component } from 'react';
|
19 | import { StyleSheet, Text, TouchableOpacity } from 'react-native';
|
20 | import FadeView from '@pietile-native-kit/fade-view';
|
21 |
|
22 | class FadeViewExample extends Component {
|
23 | state = { isCat: true };
|
24 |
|
25 | onPress = () => this.setState(({ isCat }) => ({ isCat: !isCat }));
|
26 |
|
27 | render() {
|
28 | const { isCat } = this.state;
|
29 |
|
30 | return (
|
31 | <FadeView style={styles.container} data={isCat}>
|
32 | <TouchableOpacity
|
33 | style={[styles.touchable, { backgroundColor: isCat ? '#c4c' : '#bfb' }]}
|
34 | onPress={this.onPress}
|
35 | >
|
36 | <Text style={styles.text}>{isCat ? '🐱' : '🐶'}</Text>
|
37 | </TouchableOpacity>
|
38 | </FadeView>
|
39 | );
|
40 | }
|
41 | }
|
42 |
|
43 | const styles = StyleSheet.create({
|
44 | container: {
|
45 | ...StyleSheet.absoluteFillObject,
|
46 | justifyContent: 'center',
|
47 | alignItems: 'center',
|
48 | },
|
49 | touchable: {
|
50 | borderRadius: 16,
|
51 | padding: 16,
|
52 | },
|
53 | text: {
|
54 | fontSize: 86,
|
55 | },
|
56 | });
|
57 |
|
58 | export default FadeViewExample;
|
59 | ```
|