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);
@zhangwebb
Copy link

zhangwebb commented Apr 1, 2016

I do:

import React, {
... ...
Platform,
UIManager,
... ...
} from 'react-native';
... ...
... ...
constructor() {
super();
this.state = {
index: 0,
};
// Enable LayoutAnimation under Android
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
... ...
... ...

It can run.

@Froelund
Copy link

Froelund commented May 18, 2016

React Native 0.26 supports LayoutAnimation for deleting items. It works with this example 👍

@jiangqqlmj
Copy link

jiangqqlmj commented Jun 10, 2016

use
// Enable LayoutAnimation under Android
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true)
}
it is good

@dotMastaz
Copy link

dotMastaz commented Jul 6, 2016

Hello,

Thanks for this gist...
Question out of topic, how do you capture app simulator motion animation ?

Merci !

@sbefort
Copy link

sbefort commented Jul 15, 2016

How do you create two simultaneous animations with different effects (spring and linear)?

@DarrylD
Copy link

DarrylD commented Jul 26, 2016

Works great!

@proshoumma
Copy link

proshoumma commented Jul 30, 2016

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) ?

@J1aDong
Copy link

J1aDong commented Sep 18, 2016

Good job!Thx

Copy link

ghost commented Mar 27, 2017

Great !

@yic03685
Copy link

yic03685 commented May 9, 2017

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.

@jiarWang
Copy link

jiarWang commented Aug 16, 2017

hahaha ,it's works, thank you very much

@simonkuang
Copy link

simonkuang commented Sep 8, 2017

on ReactNative@0.47.2, import section must be fixed to avoid errors like Super expression must either be null or a function, not undefined.

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';

@victormolema
Copy link

victormolema commented Apr 4, 2018

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,
const TypesEnum = {
spring: true,
linear: true,
easeInEaseOut: true,
easeIn: true,
easeOut: true,
keyboard: true,
};

change that and you will be fine.

@nucklearproject
Copy link

nucklearproject commented Aug 15, 2018

RN 0.56
`
import React, { Component } from 'react'; // Import
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
LayoutAnimation,
UIManager,
} from 'react-native';

let CustomLayoutAnimation = {
duration: 200,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.easeInEaseOut, //Change Type
},
};

//Add this part for work in android
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

export default class App extends React.Component {
constructor() {
super();
this.state = {
index: 0,
}
}

`

@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