Since we all start development in react native its been very hard for new beginners to kill the current activity and then navigate to another so when application user clicks on the back button it will not allow him to go back on previous activity. But now using the createSwitchNavigator component of React Navigation library we can do it easily with a single line of code and all of our activities defined inside the createSwitchNavigator block will not be loaded on back button press event and can be only load if user want to navigate them using this.props.navigation.navigate function(). So in this tutorial we would going to Finish Current Activity Route Screen Navigate to Next using createSwitchNavigator Example Tutorial in react native android iOS app. So let’s get started .
Note : This kind of functionality is mostly used in login applications where developer needs to finish the Profile activity after clicking on Logout button, so user cannot go back after logout.
Contents in this project Finish Current Activity Route Screen Navigate to Next using createSwitchNavigator Example Tutorial in React Native Android iOS App:
1. The most important step is the install the React Navigation library into our current react native project so we can use its inbuilt createSwitchNavigator component. So to install the react navigation library open your react native project folder in command prompt / terminal and execute below command.
|
1
|
npm install —save react–navigation
|
Screenshots of CMD :
2. Now the installation part is done, now we need to start coding. Import the StyleSheet, Text, View and Button component in your App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
|
3. Import the createSwitchNavigator component from react navigation library.
|
1
|
import { createSwitchNavigator } from ‘react-navigation’;
|
4. Create the first activity class named as MainActivity. This class would be our main home class.
static navigationOptions : title : Used to set the Activity title shows inside the Action bar.
gotoSecondActivity : Inside this function we would navigate to next activity.
|
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 MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
gotoSecondActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<View style={{marginBottom: 20}}>
<Text style = { styles.TextStyle }> This is MainActivity </Text>
</View>
<Button onPress = { this.gotoSecondActivity } title = ‘Click Here To Open Second Activity’/>
</View>
);
}
}
|
Screenshot of MainActivity :
5. Creating another SecondActivity class in your project. This would be our next class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.TextStyle }> This is SecondActivity </Text>
</View>
);
}
}
|
Screenshot of SecondActivity:
6. Creating the createSwitchNavigator method and pass both activity classes inside it , This would automatically add the functionality to finish the current activity on going to next.
|
1
2
3
4
5
6
|
export default Project = createSwitchNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
7. Creating the CSS Style sheet.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 24,
textAlign: ‘center’,
color: ‘#000’,
},
});
|
8. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { createSwitchNavigator } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
gotoSecondActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<View style={{marginBottom: 20}}>
<Text style = { styles.TextStyle }> This is MainActivity </Text>
</View>
<Button onPress = { this.gotoSecondActivity } title = ‘Click Here To Open Second Activity’/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.TextStyle }> This is SecondActivity </Text>
</View>
);
}
}
export default Project = createSwitchNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 24,
textAlign: ‘center’,
color: ‘#000’,
},
});
|
Screenshots:
Also Read :
React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial
React Native Get Object Value From Array and Show on Screen one by one
Add Permissions for Android in AndroidManifest.xml in React Native
React Native Create FlatList using JSON Parsing Data Example Tutorial
React Native Upload Image to Server using PHP MySQL iOS Android Tutorial
