React Native supports the module calling structure which is used to divide the project code into multiple segments and each class has its unique JS file. We would write the code into different files and import each file into our App.js file according to our requirement. So in this tutorial we would going to create a react native app and import load Call External Local JS File as individual Activity in Current App.js File in React Native.
What we are doing in this project – Must Read :
In this tutorial we would going to add 2 activities in our project and each activity has its own JS file named as MainActivity.js and SecondActivity.js file. Now we would import both files into our App.js file and using the StackNavigator we would call both files into App.js file. So let’s get started .
Contents in this project Call External Local JS File Activity in Current App.js File in React Native Android iOS app :
1. Add
react–navigation library in your project because without the react-navigation library we cannot use the
StackNavigator in our project and without the
StackNavigator we cannot add multiple activities in our project. So open your project folder in CMD( Command Prompt / Terminal ). like i did in below screenshot and type the
npm install —save react–navigation command inside it and press enter to install.
2. The final screenshot of command prompt after done installing the react-navigation library.
3. Create a folder in your application project folder. For example my project name is Myproject. So i am going to create a new folder named as Modules in it. This folder is used to Store the both activity files.
4. Create a New JS file named as MainActivity.js inside the Modules folder. This would be our MainActivity of project. You can learn more about the Stack Navigator about here on my main activity tutorial.
static navigationOptions : Used to set the Activity tile which would show inside the application Action Title bar.
NavigateActivityFunction() : This function is used to open the Second Activity on button click. We would call this function on button onPress event.
export default MainActivity : This line of code is very important because its tell the application that this code would be load default in this current 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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
NavigateActivityFunction = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.ActivityNameTextCss }> This Is MainActivity. </Text>
<Button onPress = { this.NavigateActivityFunction } title = ‘Open Second Activity’/>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer: {
flex:1,
justifyContent: ‘center’,
margin: 5
},
ActivityNameTextCss: {
textAlign: ‘center’,
fontSize: 20,
color: ‘#000’,
},
});
export default MainActivity;
|
5. Create another JS file named as SecondActivity.js file inside the Modules folder. This would be our Second 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.ActivityNameTextCss }> This Is SecondActivity. </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex:1,
justifyContent: ‘center’,
margin: 5
},
ActivityNameTextCss: {
textAlign: ‘center’,
fontSize: 20,
color: ‘#000’,
},
});
export default SecondActivity;
|
6. Screenshot of Modules folder after crating both files.
7. Open the App.js file of your project and import the Component inside it.
|
1
|
import React, { Component } from ‘react’;
|
8. Now we would import the both MainActivity and SecondActivity files from Modules folder.
|
1
2
3
4
5
6
7
|
import React, { Component } from ‘react’;
import MainActivity from ‘./Modules/MainActivity’ ;
import SecondActivity from ‘./Modules/SecondActivity’ ;
|
9. Import StackNavigator in your App.js file.
|
1
2
3
4
5
6
7
8
9
10
|
import React, { Component } from ‘react’;
import MainActivity from ‘./Modules/MainActivity’ ;
import SecondActivity from ‘./Modules/SecondActivity’ ;
import { StackNavigator } from ‘react-navigation’;
|
10. Now finally we would call the both Activity files using StackNavigator in our App.js file.
|
1
2
3
4
5
6
7
8
|
export default MyProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
11. 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
|
import React, { Component } from ‘react’;
import MainActivity from ‘./Modules/MainActivity’ ;
import SecondActivity from ‘./Modules/SecondActivity’ ;
import { StackNavigator } from ‘react-navigation’;
export default MyProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Runtime PermissionsAndroid Request Android Example Tutorial
No Component Found for View with name ARTShape React Native iOS Error
React Navigation 5.x Change Header Title on Button Click in React Native Dynamically
Change ActivityIndicator color in React Native Android iOS Tutorial
React Navigation 5.x Call External JS Screen Files in App.js File React Native
