CODEWITHSUNDEEP
layoutreact-nativelayout-animation
Vu Dang
Vu Dang

Reputation: 721

React Native: How to selectively enable LayoutAnimation

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?

Upvotes: 8

Views: 3567

Answers (3)

sintylapse
sintylapse

Reputation: 174

You can check react-native-reanimated Transitions https://github.com/kmagiera/react-native-reanimated#transitions-

It works similarly as LayoutAnimations but gives more control on how animations will perform

Upvotes: 0

Gui Herzog
Gui Herzog

Reputation: 5615

If the solution above doesn't work, try changing it from LayoutAnimation to Animated, this one allows you to have more control on the animations.

Upvotes: 0

greg
greg

Reputation: 118

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

Upvotes: 3

Related Questions