Adding LayoutAnimation
With our basic onboarding experience built, let's explore React Native's LayoutAnimation
API to apply some simple transitions as you navigate from onboarding screen to onboarding screen.
LayoutAnimation
is a highly performant animation
API for animating the entirety of a component and its children whenever the animated component is created or its state is updated. LayoutAnimation
executes the animation upon the next render cycle, animating the component from its current state to its next state. Two common ways of utilizing LayoutAnimation
are right before calling setState
or inside the componentWillReceiveProps
method. Before triggering the next render cycle, you simply need to call LayoutAnimation.configureNext
, passing it the appropriate animation configuration:
LayoutAnimation.configureNext(animationConfiguration, callbackCompletionMethod); this.setState({ stateToChange: newStateValue });
Like many things, animation is one of those topics that is best understood...