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);
@anhldbk

This comment has been minimized.

Copy link

commented Feb 15, 2016

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?

@alvaromb

This comment has been minimized.

Copy link

commented Feb 18, 2016

Use this:

// Enable LayoutAnimation under Android
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental(true)
}
@idajimenez

This comment has been minimized.

Copy link

commented Mar 29, 2016

Hi where can I put

if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental(true) }

Thanks

@zhangwebb

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented May 18, 2016

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

@jiangqqlmj

This comment has been minimized.

Copy link

commented Jun 10, 2016

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

@dotMastaz

This comment has been minimized.

Copy link

commented Jul 6, 2016

Hello,

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

Merci !

@sbefort

This comment has been minimized.

Copy link

commented Jul 15, 2016

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

@DarrylD

This comment has been minimized.

Copy link

commented Jul 26, 2016

Works great!

@proshoumma

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Sep 18, 2016

Good job!Thx

@kevensa

This comment has been minimized.

Copy link

commented Mar 27, 2017

Great !

@yic03685

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 16, 2017

hahaha ,it's works, thank you very much

@simonkuang

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Jan 31, 2019

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

@EhsanSarshar

This comment has been minimized.

Copy link

commented Aug 6, 2019

Amazing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.