ReactNative LayoutAnimation Example

index.ios.js

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

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?

Use this:

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

Hi where can I put

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

Thanks

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.

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

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

Hello,

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

Merci !

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

Works great!

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

Good job!Thx

Great !

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.

hahaha ,it's works, thank you very much

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

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.

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,
}
}

`

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

Amazing

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.