Multiple screens is base of every dynamic react native application & there is a fix animated transition on screens opening time. When application user navigate from one activity to another react navigation gives us fix pop out and pop in animated transition. But sometimes application developer required to change the animated transition between activities navigation time. In this tutorial we would apply Left to right and Right to left animated transition using custom transition effects on screens navigation time. This tutorial is a major change in React Native Screen Navigation using Animated Transition in React Navigation.
Live Screenshot of application with Left to right transition:
Live screenshot of application with Right to Left transition:
Contents in this project React Native Screen Navigation using Animated Transition in React Navigation :
1. Before getting started the coding as we all know we have to install the React Navigation library in our react naive project to use the customized activity multiple screens. So open your react native project folder in Command prompt or Terminal and execute below command to install react navigation.
|
1
|
npm install react–navigation —save
|
Screenshot of CMD:
2. After done installing the react navigation library, we need to install the React Native Gesture Handler library and React Native Re-Animated library. This library provides us the best on touch screen experience. So execute the below command to install both libraries together.
|
1
|
npm install react–native–gesture–handler react–native–reanimated
|
Screenshot of CMD:
3. Next step is to starting coding. Open your project’s App.js file and import Animated, Button, View, Text, Easing and StyleSheet component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Animated, Button, View, Text, Easing, StyleSheet } from ‘react-native’;
|
4. Import createStackNavigator & createAppContainer component from react navigation library to use multiple screens in your project.
|
1
|
import { createStackNavigator, createAppContainer } from ‘react-navigation’;
|
5. Create a class named as Screen_1. This class would be our main first home screen.
static navigationOptions :
- title : Used to set the screen title which display in Action title bar.
- headerTransparent : Making the action bar header transparent.
- headerTintColor : Action bar title text color.
- backgroundColor : Setting up the action bar background color.
|
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
|
class Screen_1 extends Component {
static navigationOptions =
{
title: ‘First Activity’,
headerTransparent: true,
headerTintColor: ‘#fff’,
headerStyle: {
backgroundColor: ‘rgba(0,0,0,0.3)’
}
};
gotoNextActivity = () => {
this.props.navigation.navigate(‘Second’);
}
render() {
return (
<View style={styles.Container_screen_1}>
<Text style={styles.text}>First Screen Activity.</Text>
<Button onPress={this.gotoNextActivity} title=‘Open Second Activity’ />
</View>
);
}
}
|
6. Create a class named as Screen_2. This class would be our second screen.
|
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
|
class Screen_2 extends Component {
static navigationOptions =
{
title: ‘Second Activity’,
headerTransparent: true,
headerTintColor: ‘#fff’,
headerStyle: {
backgroundColor: ‘rgba(0,0,0,0.3)’
}
};
gotoNextActivity = () => {
this.props.navigation.navigate(‘Third’);
}
render() {
return (
<View style={styles.Container_screen_2}>
<Text style={styles.text}>Second Screen Activity.</Text>
<Button onPress={this.gotoNextActivity} title=‘Open Third Activity’ />
</View>
);
}
}
|
7. Create another class named as Screen_3. This would be our final third screen of application.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
class Screen_3 extends Component {
static navigationOptions =
{
title: ‘Third Activity’,
headerTransparent: true,
headerTintColor: ‘#fff’,
headerStyle: {
backgroundColor: ‘rgba(0,0,0,0.3)’
}
};
render() {
return (
<View style={styles.Container_screen_3}>
<Text style={styles.text}>Third Screen Activity.</Text>
</View>
);
}
}
|
8. Create a constant stand alone function named as transitionConfig() and define all the animation properties.
- duration : Define the animation performing duration.
Note: By default the animation is Left to Right. If you wish to change the animation to Right to Left then simply remove the Minus(-) from outputRange: [-width, 0] line. If you remove the – minus from here then the animation will automatically changes to right to left position.
|
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
|
const transitionConfig = () => {
return {
transitionSpec: {
duration: 500,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
useNativeDriver: true,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const thisSceneIndex = scene.index;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [thisSceneIndex – 1, thisSceneIndex],
outputRange: [–width, 0],
extrapolate: ‘clamp’
});
return {
transform: [{ translateX }]
}
}
}
}
|
9. Create a constant named as root using createStackNavigator() component and define all above 3 Screen classes in it. As you can see in below code we have also called the transitionConfig here.
|
1
2
3
4
5
6
7
8
9
10
|
const root = createStackNavigator(
{
Home: Screen_1,
Second: Screen_2,
Third: Screen_3
},
{
transitionConfig
}
);
|
10. Final step is to call the root component using create App Container component.
|
1
|
export default createAppContainer(root);
|
11. Creating 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
|
const styles = StyleSheet.create({
Container_screen_1: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#FF1744’,
padding: 14
},
Container_screen_2: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#D500F9’,
padding: 14
},
Container_screen_3: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#1B5E20’,
padding: 14
},
text:
{
fontSize: 24,
color: ‘#fff’,
textAlign: ‘center’,
marginBottom: 20
},
});
|
12. Complete source code for App.js file class.
|
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
import React, { Component } from ‘react’;
import { Animated, Button, View, Text, Easing, StyleSheet } from ‘react-native’;
import { createStackNavigator, createAppContainer } from ‘react-navigation’;
class Screen_1 extends Component {
static navigationOptions =
{
title: ‘First Activity’,
headerTransparent: true,
headerTintColor: ‘#fff’,
headerStyle: {
backgroundColor: ‘rgba(0,0,0,0.3)’
}
};
gotoNextActivity = () => {
this.props.navigation.navigate(‘Second’);
}
render() {
return (
<View style={styles.Container_screen_1}>
<Text style={styles.text}>First Screen Activity.</Text>
<Button onPress={this.gotoNextActivity} title=‘Open Second Activity’ />
</View>
);
}
}
class Screen_2 extends Component {
static navigationOptions =
{
title: ‘Second Activity’,
headerTransparent: true,
headerTintColor: ‘#fff’,
headerStyle: {
backgroundColor: ‘rgba(0,0,0,0.3)’
}
};
gotoNextActivity = () => {
this.props.navigation.navigate(‘Third’);
}
render() {
return (
<View style={styles.Container_screen_2}>
<Text style={styles.text}>Second Screen Activity.</Text>
<Button onPress={this.gotoNextActivity} title=‘Open Third Activity’ />
</View>
);
}
}
class Screen_3 extends Component {
static navigationOptions =
{
title: ‘Third Activity’,
headerTransparent: true,
headerTintColor: ‘#fff’,
headerStyle: {
backgroundColor: ‘rgba(0,0,0,0.3)’
}
};
render() {
return (
<View style={styles.Container_screen_3}>
<Text style={styles.text}>Third Screen Activity.</Text>
</View>
);
}
}
const transitionConfig = () => {
return {
transitionSpec: {
duration: 500,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
useNativeDriver: true,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const thisSceneIndex = scene.index;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [thisSceneIndex – 1, thisSceneIndex],
outputRange: [–width, 0],
extrapolate: ‘clamp’
});
return {
transform: [{ translateX }]
}
}
}
}
const root = createStackNavigator(
{
Home: Screen_1,
Second: Screen_2,
Third: Screen_3
},
{
transitionConfig
}
);
export default createAppContainer(root);
const styles = StyleSheet.create({
Container_screen_1: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#FF1744’,
padding: 14
},
Container_screen_2: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#D500F9’,
padding: 14
},
Container_screen_3: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#1B5E20’,
padding: 14
},
text:
{
fontSize: 24,
color: ‘#fff’,
textAlign: ‘center’,
marginBottom: 20
},
});
|
Screenshots:
Also Read :
React Navigation Latest Version 5.x in React Native Example Tutorial
React native Download Image from URL into Gallery folder Android iOS Example
How to Call Another Class Function From Default Class in React Native
React Native Create Custom JSON ListView with Multiple Items Tutorial
React Native Disable Hide ScrollBar ScrollIndicator in ScrollView
