React Native Collapsible Animated Text View with Slide up Slide down Animation

The Collapsible Animated Text View is one of the most famous View among react native developers because of its smooth animation effect. The Collapsible View is a View holder used to show Text, Image or any component inside it. When app developer(User) clicks on Expandable button then it will smoothly shows below View with slide down animation and the text should be visible. After that when developer clicks on Collapse button then the view should slide up smoothly and hide the Text View. So in this tutorial we would going to create react native app with Collapsible expandable Animated Text View with Slide up Slide down animation in both Android iOS react native application using LayoutAnimation. See the below screenshot to know how this tutorial works 🙂 .

Collapsible Animated Text View with Slide up Slide down
Contents in this project Collapsible Animated Text View with Slide up Slide down Animation in react native Android iOS application:

1. Import StyleSheet, View, Text, TouchableOpacity, LayoutAnimation, UIManager and Platform component in your project.

2. Create constructor() in your project. Now we would make 4 States named as textLayoutHeight, updatedHeight, expand, buttonText. The textLayoutHeight is the default height of the Collapsible view, updatedHeight is used when the View expands and the height will updated, expand is hold Boolean type of value if the Collapsible view is collapsed then its value is false and if the view expand then its value is true, buttonText holds the button above text. We would also calls the UIManager.setLayoutAnimationEnabledExperimental(true) line of code to enable layout animation on Android devices.

3. Create a function named as expand_collapse_Function(). This function would apply layout animation on Text View. We would also update States value using a If conditional statement.

4. Create a function named as getHeight() with height parameter. This function should call on onLayout={} event of the Text component. Text text component which holds all the Text inside animated collapsible View. This function would return the height of this Text View.

5. Create a Root View in render’s return block.

6. Create a Child View inside the Root View. This view contain the Touchable opacity button with Text component.

6. Create TouchableOpacity button component inside the Child View. We would call the expand_collapse_Function() function on button onPress event. We would set the TouchableOpacity inside title text using State.

7. Make A View component inside the Child View with Text component inside it after TouchableOpacity button. This view contain all the Text. We would set View height using State.

8. Create Style.

9. Complete source code for App.js File :

Screenshot in Android device :

Collapsible Animated Text View Screenshots in iOS device :

One Comment

  1. This actually renders part of the text only…perhaps it is working differently in the new release of react native

Leave a Reply

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