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 :
Also Read :
React Native Change TextInput PlaceHolder Text Color iOS Android
React Native Create Custom JSON ListView with Multiple Items Tutorial
React Native Convert Text to Upper Case Lower Case on Button Click
Retrieve TextInput entered value on Button Click onPress in React Native
React Native Material Design Button Android iOS Example Tutorial
