React Native: How to selectively enable LayoutAnimation

Question

I'd like to enable layout animation for some components but it once it is activated, all components being rendered are affected by layout animation. For example, I have

<container>
  <waterfall/>
  <menu/>
</container>

I only wish to use layout animation for the component menu but the animation is applied to the waterfall rendering which already has its own animation code.

Is this possible with react native?

Answer 1

I ran into a similar problem, here's how I solved it with layoutanimation:

Explanation

Keep a state variable in the container component that is passed as a prop to menu: <menu reload={this.state.doSomethingInMenu}>

In the container component, use setTimeout to set the menu variable so control is passed back to the DOM and changes will render (without animation). After setTimeout is ran, the variable will update and the menu props will change, causing it to reload.

In the menu component, check to see if that variable has been updated to the value you're expecting. If it has, call LayoutAnimation.configureNext. This will cause the next rendering (just the menu changes) to be animated.

Code Overview

container component

getInitialState: function() {
  return { doSomethingInMenu: false };
},

// Do something that causes the change
// Then call setTimeout to change the state variable
setTimeout(() => {
  this.setState({ doSomethingInMenu: true });
},750)

<menu reload={this.state.doSomethingInMenu} />

menu component

componentWillReceiveProps: function(nextProps) {
    if (nextProps.reload) {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
      // Set the menu state variable that causes the update
      this.setState({field: value})
    }
  },