Skip to content

Instantly share code, notes, and snippets.

@Jpoliachik
Last active August 17, 2021 10:27
Show Gist options
  • Save Jpoliachik/0dd83689646d1051b0bc to your computer and use it in GitHub Desktop.
Save Jpoliachik/0dd83689646d1051b0bc to your computer and use it in GitHub Desktop.
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);
@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

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

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

@klaasmolema
Copy link

klaasmolema 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

@ehxxn
Copy link

ehxxn 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