Skip to content

Instantly share code, notes, and snippets.

@lnikkila
Last active April 12, 2018 18:14
Show Gist options
  • Save lnikkila/87f3825442a5773f17ead433a810d53f to your computer and use it in GitHub Desktop.
Save lnikkila/87f3825442a5773f17ead433a810d53f to your computer and use it in GitHub Desktop.
import React from 'react';
import {AppRegistry, LayoutAnimation, StyleSheet, Text, UIManager, View} from 'react-native';
if (UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
class LayoutAnimationTest extends React.Component {
constructor(props) {
super(props);
this.state = {
flag: false
};
}
componentDidMount() {
// This will run a bit later to trigger an update animation instead of a
// create animation.
setTimeout(() => {
LayoutAnimation.easeInEaseOut();
this.setState({flag: true});
}, 1000);
}
render() {
const {flag} = this.state;
return (
<View style={styles.root}>
{!flag && <View style={[styles.box, {backgroundColor: 'red'}]} />}
{flag && <View style={[styles.box, {backgroundColor: 'blue'}]} />}
<View style={[styles.box, {backgroundColor: 'black'}]} />
{!flag && <View style={[styles.box, {backgroundColor: 'green'}]} />}
</View>
);
}
}
const styles = StyleSheet.create({
root: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
box: {
width: 100,
height: 100
}
});
AppRegistry.registerComponent('LayoutAnimationTest', () => LayoutAnimationTest);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment