Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ReactNative LayoutAnimation Example
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
LayoutAnimation,
} from 'react-native';
var CustomLayoutAnimation = {
duration: 200,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.curveEaseInEaseOut,
},
};
class AnimationExample extends Component {
constructor() {
super();
this.state = {
index: 0,
}
}
onPress(index) {
// Uncomment to animate the next state change.
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
// Or use a Custom Layout Animation
// LayoutAnimation.configureNext(CustomLayoutAnimation);
this.setState({index: index});
}
renderButton(index) {
return (
<TouchableOpacity key={'button' + index} style={styles.button} onPress={() => this.onPress(index)}>
<Text>{index}</Text>
</TouchableOpacity>
);
}
renderCircle(key) {
var size = 50;
return (
<View key={key} style={{width: size, height: size, borderRadius: size / 2.0, backgroundColor: 'sandybrown', margin: 20}}/>
);
}
render() {
var leftStyle = this.state.index === 0 ? {flex: 1} : {width: 20};
var middleStyle = this.state.index === 2 ? {width: 20} : {flex: 1};
var rightStyle = {flex: 1};
var whiteHeight = this.state.index * 80;
var circles = [];
for (var i = 0; i < (5 + this.state.index); i++) {
circles.push(this.renderCircle(i));
}
return (
<View style={styles.container}>
<View style={styles.topButtons}>
{this.renderButton(0)}
{this.renderButton(1)}
{this.renderButton(2)}
</View>
<View style={styles.content}>
<View style={{flexDirection: 'row', height: 100}}>
<View style={[leftStyle, {backgroundColor: 'firebrick'}]}/>
<View style={[middleStyle, {backgroundColor: 'seagreen'}]}/>
<View style={[rightStyle, {backgroundColor: 'steelblue'}]}/>
</View>
<View style={{height: whiteHeight, justifyContent: 'center', alignItems: 'center', overflow: 'hidden'}} removeClippedSubviews={true}>
<View>
<Text>Stuff Goes Here</Text>
</View>
</View>
<View style={styles.circleContainer}>
{circles}
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
topButtons: {
marginTop: 22,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
backgroundColor: 'lightblue',
},
button: {
flex: 1,
height: 60,
alignSelf: 'stretch',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
margin: 8,
},
content: {
flex: 1,
alignSelf: 'stretch',
},
circleContainer: {
flexDirection: 'row',
flex: 1,
flexWrap: 'wrap',
padding: 30,
justifyContent: 'center',
alignItems: 'center'
},
});
AppRegistry.registerComponent('AnimationExample', () => AnimationExample);
@thg303
Copy link

thg303 commented Jan 31, 2019

I made a working snack based on this gist. https://snack.expo.io/@thg303/reactnative-layoutanimation

@TheEhsanSarshar
Copy link

TheEhsanSarshar commented Aug 6, 2019

Amazing

@awumsuri
Copy link

awumsuri commented Feb 25, 2020

Thank you, was using Animated LIbrary which was getting me nowhere. The next option was create the entire component in Java which I might have well created the whole app in Java if RN was so limited. This really helped, thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment