This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.
$ npm install react-native-display --save
import Display from 'react-native-display';<Display enable={this.state.enable}>
<Text> My custom components </Text>
</Display>enter/exit props using react-native-animatable for animation name.
| Prop | Description | Default |
|---|---|---|
enable |
true to render. false to not render. |
true |
defaultDuration |
Default duration for enter and exit animations. | 250 |
enterDuration |
Duration for enter animation. | 250 |
exitDuration |
Duration for exit animation. | 250 |
enter |
Animation name to run when render (enable=true). Example: enter='fadeIn' |
None |
exit |
Animation name to run when not render (enable=false). Example: exit='fadeOut' |
None |
style |
Same react-native style for View. |
None |
keepAlive |
When enable=false If true components will hide only (componentWillUnmount() will not fire). If false components will not render at all. Use it on complex components or on modules that required init on everytime that they are mount (for example: react-native-camera). |
false |
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
import Display from 'react-native-display';
export default class testdisplay extends Component {
constructor(props) {
super(props);
this.state = {enable: true};
}
toggleDisplay() {
let toggle = !this.state.enable;
this.setState({enable: toggle});
}
render() {
return (
<View>
<View style={styles.button}>
<Button
onPress={this.toggleDisplay.bind(this)}
title="Toggle display"
color="#34495e"
accessibilityLabel="Toggle display for show/hide circles"
/>
</View>
<View style={styles.center}>
<Display
enable={this.state.enable}
enterDuration={500}
exitDuration={250}
exit="fadeOutLeft"
enter="fadeInLeft"
>
<View style={[styles.circle, {backgroundColor: '#2ecc71'}]} />
</Display>
<Display
enable={this.state.enable}
enterDuration={500}
exitDuration={250}
exit="fadeOutDown"
enter="fadeInUp"
>
<View style={[styles.circle, {backgroundColor: '#9b59b6'}]} />
</Display>
<Display
enable={this.state.enable}
enterDuration={500}
exitDuration={250}
exit="fadeOutRight"
enter="fadeInRight"
>
<View style={[styles.circle, {backgroundColor: '#3498db'}]} />
</Display>
</View>
</View>
);
}
}
const styles = {
button: {
padding: 10,
margin: 15,
},
center: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
circle: {
borderRadius: 50,
height: 100,
width: 100,
margin: 15
},
}
AppRegistry.registerComponent('testdisplay', () => testdisplay);
- On start animation done event
- On exit animation done event