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 🙂 .
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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, LayoutAnimation, UIManager, Platform } from 'react-native'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
constructor() { super(); if( Platform.OS === 'android' ) { UIManager.setLayoutAnimationEnabledExperimental(true); } this.state = { textLayoutHeight: 0, updatedHeight: 0, expand: false, buttonText : 'Click Here To Expand' } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
expand_collapse_Function =()=> { LayoutAnimation.configureNext( LayoutAnimation.Presets.easeInEaseOut ); if( this.state.expand == false ) { this.setState({ updatedHeight: this.state.textLayoutHeight, expand: true, buttonText: 'Click Here To Collapse' }); } else { this.setState({ updatedHeight: 0, expand: false, buttonText: 'Click Here To Expand' }); } } |
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.
|
1 2 3 4 |
getHeight(height) { this.setState({ textLayoutHeight: height }); } |
5. Create a Root View in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 |
render() { return( <View style = { styles.MainContainer }> </View> ); } |
6. Create a Child View inside the Root View. This view contain the Touchable opacity button with Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return( <View style = { styles.MainContainer }> <View style = { styles.ChildView }> </View> </View> ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
render() { return( <View style = { styles.MainContainer }> <View style = { styles.ChildView }> <TouchableOpacity activeOpacity = { 0.7 } onPress = { this.expand_collapse_Function } style = { styles.TouchableOpacityStyle }> <Text style = { styles.TouchableOpacityTitleText }>{this.state.buttonText}</Text> </TouchableOpacity> </View> </View> ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
render() { return( <View style = { styles.MainContainer }> <View style = { styles.ChildView }> <TouchableOpacity activeOpacity = { 0.7 } onPress = { this.expand_collapse_Function } style = { styles.TouchableOpacityStyle }> <Text style = { styles.TouchableOpacityTitleText }>{this.state.buttonText}</Text> </TouchableOpacity> <View style = {{ height: this.state.updatedHeight, overflow: 'hidden' }}> <Text style = { styles.ExpandViewInsideText } onLayout = {( value ) => this.getHeight( value.nativeEvent.layout.height )}> Hello Developers, A warm welcome on ReactNativeCode.com, The best website for react native developers. You can find high quality dynamic type of tutorials with examples on my website and to support us please like our Facebook page. </Text> </View> </View> </View> ); } |
8. Create Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', paddingTop: (Platform.OS === 'ios') ? 20 : 0 }, ChildView: { borderWidth: 1, borderColor: '#00BCD4', margin: 5 }, TouchableOpacityStyle: { padding: 10, backgroundColor: '#00BCD4' }, TouchableOpacityTitleText: { textAlign: 'center', color: '#fff', fontSize: 20 }, ExpandViewInsideText: { fontSize: 16, color: '#000', padding: 12 } }); |
9. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, LayoutAnimation, UIManager, Platform } from 'react-native'; export default class Mynewapp extends Component<{}> { constructor() { super(); if( Platform.OS === 'android' ) { UIManager.setLayoutAnimationEnabledExperimental(true); } this.state = { textLayoutHeight: 0, updatedHeight: 0, expand: false, buttonText : 'Click Here To Expand' } } expand_collapse_Function =()=> { LayoutAnimation.configureNext( LayoutAnimation.Presets.easeInEaseOut ); if( this.state.expand == false ) { this.setState({ updatedHeight: this.state.textLayoutHeight, expand: true, buttonText: 'Click Here To Collapse' }); } else { this.setState({ updatedHeight: 0, expand: false, buttonText: 'Click Here To Expand' }); } } getHeight(height) { this.setState({ textLayoutHeight: height }); } render() { return( <View style = { styles.MainContainer }> <View style = { styles.ChildView }> <TouchableOpacity activeOpacity = { 0.7 } onPress = { this.expand_collapse_Function } style = { styles.TouchableOpacityStyle }> <Text style = { styles.TouchableOpacityTitleText }>{this.state.buttonText}</Text> </TouchableOpacity> <View style = {{ height: this.state.updatedHeight, overflow: 'hidden' }}> <Text style = { styles.ExpandViewInsideText } onLayout = {( value ) => this.getHeight( value.nativeEvent.layout.height )}> Hello Developers, A warm welcome on ReactNativeCode.com, The best website for react native developers. You can find high quality dynamic type of tutorials with examples on my website and to support us please like our Facebook page. </Text> </View> </View> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', paddingTop: (Platform.OS === 'ios') ? 20 : 0 }, ChildView: { borderWidth: 1, borderColor: '#00BCD4', margin: 5 }, TouchableOpacityStyle: { padding: 10, backgroundColor: '#00BCD4' }, TouchableOpacityTitleText: { textAlign: 'center', color: '#fff', fontSize: 20 }, ExpandViewInsideText: { fontSize: 16, color: '#000', padding: 12 } }); |
Screenshot in Android device :
Screenshots in iOS device :
This actually renders part of the text only…perhaps it is working differently in the new release of react native
This works if you make the text you want to expand “position: absolute” so that the layout height is not affected by its parent.