Skip to content

Instantly share code, notes, and snippets.

@lnikkila
Last active April 2, 2018 09:50
Show Gist options
  • Save lnikkila/18096c15b2fb99b232795ef59f8fb0cd to your computer and use it in GitHub Desktop.
Save lnikkila/18096c15b2fb99b232795ef59f8fb0cd 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 = {
width: 100,
height: 300
};
}
componentDidMount() {
// This will run a bit later to trigger an update animation instead of a
// create animation.
setTimeout(() => {
LayoutAnimation.configureNext({
duration: 2000,
update: {
type: LayoutAnimation.Types.linear
}
});
this.setState({width: 200});
}, 1000);
// This will run while the animation is going on. The animated view should
// end up as a square, but will keep the 200x300 dimension on Android as the
// ongoing animation overrides the later layout update.
setTimeout(() => {
this.setState({width: 300});
}, 2000);
}
render() {
const {width, height} = this.state;
return (
<View style={styles.root}>
<View style={[styles.box, {width, height}]}>
<Text style={styles.text}>
{width}x{height}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
box: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red'
},
text: {
fontSize: 24,
color: 'white'
}
});
AppRegistry.registerComponent('LayoutAnimationTest', () => LayoutAnimationTest);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment