'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); |
This comment has been minimized.
This comment has been minimized.
Use this: // Enable LayoutAnimation under Android
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true)
} |
This comment has been minimized.
This comment has been minimized.
Hi where can I put
Thanks |
This comment has been minimized.
This comment has been minimized.
I do:
It can run. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
use |
This comment has been minimized.
This comment has been minimized.
Hello, Thanks for this gist... Merci ! |
This comment has been minimized.
This comment has been minimized.
How do you create two simultaneous animations with different effects (spring and linear)? |
This comment has been minimized.
This comment has been minimized.
Works great! |
This comment has been minimized.
This comment has been minimized.
Thank you for pointing out the extra line of codes for android. I spend some bad time with it. Would please add it as a comment in code (and also in the blog) ? |
This comment has been minimized.
This comment has been minimized.
Good job!Thx |
This comment has been minimized.
This comment has been minimized.
Great ! |
This comment has been minimized.
This comment has been minimized.
Does LayoutAnimation only work for Views or it works on any component? It will be quite costly if create many views just for the animation. |
This comment has been minimized.
This comment has been minimized.
hahaha ,it's works, thank you very much |
This comment has been minimized.
This comment has been minimized.
on import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
LayoutAnimation,
} from 'react-native'; update: import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
LayoutAnimation,
} from 'react-native'; |
This comment has been minimized.
This comment has been minimized.
Having issues with the linear animation, where I get an error message saying: "Missing interpolation type", did I miss something? or are others having the same issue? Update: the example of a custom linear based animation uses a "curveEaseInEaseOut" as a type of layoutanimation.type. enum in the update param of the custom layout, if you look at the source, the enum options are, change that and you will be fine. |
This comment has been minimized.
This comment has been minimized.
RN 0.56 let CustomLayoutAnimation = { //Add this part for work in android export default class App extends React.Component { ` |
This comment has been minimized.
This comment has been minimized.
I made a working snack based on this gist. https://snack.expo.io/@thg303/reactnative-layoutanimation |
This comment has been minimized.
This comment has been minimized.
Amazing |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
I'm trying to run your code on an Android emulator. There's no animation at all. And actually, although I followed the tutorial on React-native's homepage, I've got the same result. Would you please tell me what wrong is?