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 View, StyleSheet, Text, TouchableOpacity, LayoutAnimation, Platform and UIManager component in your project.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React, { Component } from ‘react’;
import {
View,
StyleSheet,
Text,
TouchableOpacity,
LayoutAnimation,
Platform,
UIManager
} from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
constructor()
{
super();
this.state = {
flex_Direction_Value: ‘row’
}
if (Platform.OS === ‘android’)
{
UIManager.setLayoutAnimationEnabledExperimental(true)
}
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Toggle_Change_Layout = () =>
{
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
if( this.state.flex_Direction_Value == ‘row’ )
{
this.setState({ flex_Direction_Value: ‘column’ });
}
else
{
this.setState({ flex_Direction_Value: ‘row’ });
}
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render()
{
return(
<View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}>
</View>
);
}
|
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.
|
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
|
render()
{
return(
<View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}>
<View style = { styles.Block1 }>
<Text style = { styles.TextStyle }>Box 1</Text>
</View>
<View style = { styles.Block2 }>
<Text style = { styles.TextStyle }>Box 2</Text>
</View>
<TouchableOpacity
style = {[ styles.TouchableOpacityStyle, { bottom: 0 }]}
onPress = { this.Toggle_Change_Layout }
activeOpacity = { 0.5 } >
<Text style = { styles.TextStyle }>Toggle Between Flex Direction Layout</Text>
</TouchableOpacity>
</View>
);
}
|
6. Create style for all views.
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
marginTop: (Platform.OS === ‘ios’) ? 20 : 0
},
Block1:
{
width: 140,
height: 140,
backgroundColor: ‘#00BCD4’,
alignItems: ‘center’,
justifyContent: ‘center’
},
Block2:
{
width: 140,
height: 140,
backgroundColor: ‘#4CAF50’,
alignItems: ‘center’,
justifyContent: ‘center’
},
TextStyle:
{
color: ‘white’,
fontSize: 18,
textAlign: ‘center’
},
TouchableOpacityStyle:
{
position: ‘absolute’,
left: 0,
right: 0,
backgroundColor: ‘#607D8B’,
padding: 10,
marginBottom:1
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import {
View,
StyleSheet,
Text,
TouchableOpacity,
LayoutAnimation,
Platform,
UIManager
} from ‘react-native’;
export default class App extends Component<{}>
{
constructor()
{
super();
this.state = {
flex_Direction_Value: ‘row’
}
if (Platform.OS === ‘android’)
{
UIManager.setLayoutAnimationEnabledExperimental(true)
}
}
Toggle_Change_Layout = () =>
{
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
if( this.state.flex_Direction_Value == ‘row’ )
{
this.setState({ flex_Direction_Value: ‘column’ });
}
else
{
this.setState({ flex_Direction_Value: ‘row’ });
}
}
render()
{
return(
<View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}>
<View style = { styles.Block1 }>
<Text style = { styles.TextStyle }>Box 1</Text>
</View>
<View style = { styles.Block2 }>
<Text style = { styles.TextStyle }>Box 2</Text>
</View>
<TouchableOpacity
style = {[ styles.TouchableOpacityStyle, { bottom: 0 }]}
onPress = { this.Toggle_Change_Layout }
activeOpacity = { 0.5 } >
<Text style = { styles.TextStyle }>Toggle Between Flex Direction Layout</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
marginTop: (Platform.OS === ‘ios’) ? 20 : 0
},
Block1:
{
width: 140,
height: 140,
backgroundColor: ‘#00BCD4’,
alignItems: ‘center’,
justifyContent: ‘center’
},
Block2:
{
width: 140,
height: 140,
backgroundColor: ‘#4CAF50’,
alignItems: ‘center’,
justifyContent: ‘center’
},
TextStyle:
{
color: ‘white’,
fontSize: 18,
textAlign: ‘center’
},
TouchableOpacityStyle:
{
position: ‘absolute’,
left: 0,
right: 0,
backgroundColor: ‘#607D8B’,
padding: 10,
marginBottom:1
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Integrate Mapbox in Android iOS Example Tutorial
React Native WebView Load Local HTML File From Assets Folder
React Native Screen Navigation using Animated Transition React Navigation
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
React Native Screen Overlay ActivityIndicator Progress Bar Example Tutorial
