Layout Animations in React Native
How about adding a pinch of salt with Layout Animations & providing much better interaction with your mobile up to end-users. Yes, it's possible with few lines of code you can revamp the Ui Appeal of your mobile application.
Consider a simple example of conditionally rendering a Ui Element. You want the element to get into the screen & leave the screen smoothly/with some effect & it shouldn’t be an abrupt change.
With LayoutAnimations you can automatically animate the views to their new positions when the next layout happens.
Step 1: Import the below classes
import { LayoutAnimation, Platform, UIManager} from “react-native”;
Step 2: Initialize this in the constructor
if (Platform.OS === ‘android’) { UIManager.setLayoutAnimationEnabledExperimental(true); }
Step 3: Call when the UI Layout changes
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
Types of Animations Presets available:
With this I have created an Accordion Component which animates the UI Component on expanding & Collasping.
You can see the code for the Accordion Element
You can also refer my Github repo for the full source code:
