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?
I ran into a similar problem, here's how I solved it with layoutanimation:
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.
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} />
componentWillReceiveProps: function(nextProps) {
if (nextProps.reload) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
// Set the menu state variable that causes the update
this.setState({field: value})
}
},
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.
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
