React Native Layout Animation API Android iOS Example Tutorial

Layout Animation is very important part of React Native application. Layout Animation is used to animated View while they are changing their position to new position. It is very smooth animation process and makes your application look cool.

Live Screenshot Using GIF :

What we are doing in this tutorial :

We would make 2 colored boxes on our Root Layout and set their Flex Direction value using State. Now we would make a TouchableOpacity button and change the State value on button click. This would animate the both views while they changes their position on mobile screen using Layout Animation API. So finally we would changing the Flex Direction value dynamically-programmatically using Layout Animation.

Contents in this project Layout Animation API Android iOS Example Tutorial in React Native:

1. Import ViewStyleSheetTextTouchableOpacityLayoutAnimationPlatform and UIManager component in your project.

2. Create constructor() in your project’s class. We would make a State named as flex_Direction_Value to hold the flex direction value row and column. The default state value is row. Now we would execute a line of code using if condition with platform check in constructor() – UIManager.setLayoutAnimationEnabledExperimental(true). This would enable the layout animation on Android devices, because by default Android dose not support Layout Animation.

3. Create a function named as Toggle_Change_Layout(). This function just change the State value to Row and Column. The LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) function is very important, this function would handles-enable the animation on new layout changing time.

4. Create a Root View in render’s return block. Now we would call the both Styles using Array Style Implement method. The flexDirection style attribute value is handled by State.

5. Create 2 colored boxes inside the Root View and Make a TouchableOpacity button in the bottom of screen. We would call the Toggle_Change_Layout() function TouchableOpacity button onPress event.

6. Create style for all views.

7. Complete source code for App.js File :

Screenshot  in Android device :

Layout Animation API Android iOS Example Tutorial Screenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *