Changes content with FadeOut-FadeIn animation. FadeView
uses data
prop to know when start
the transition. Useful in situations when you want to change content smoothly, implementing tabs
content for example.
Using yarn
yarn add @pietile-native-kit/fade-view
or using npm
npm install -S @pietile-native-kit/fade-view
Wrap the content in FadeView
and set data
to value that controls content. Every time data
changes FadeView
will remember children, play FadeOut animation and then FadeIn with current children
already. So it's important to notice that FadeView
passthrough children all the time except when
playing FadeOut.
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import { FadeView } from '@pietile-native-kit/fade-view';
class FadeViewExample extends Component {
state = { isCat: true };
onPress = () => this.setState(({ isCat }) => ({ isCat: !isCat }));
render() {
const { isCat } = this.state;
return (
<FadeView style={styles.container} data={isCat}>
<TouchableOpacity
style={[styles.touchable, { backgroundColor: isCat ? '#c4c' : '#bfb' }]}
onPress={this.onPress}
>
<Text style={styles.text}>{isCat ? '🐱' : '🐶'}</Text>
</TouchableOpacity>
</FadeView>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 16,
padding: 16,
},
text: {
fontSize: 86,
},
});
export default FadeViewExample;
name | description | type | default |
---|---|---|---|
children | Content | Node | - |
data | Marker property for telling the FadeView to do FadeOut-FadeIn | any | - |
duration | Hide and show animations duration | number | 150 |
style | Style of component | style | - |
Pietile FadeView is MIT License.