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 :
it is very good Artical for stack navigation , how can menu icon drawable navigation work ?
Rahul please explain your question more briefly ?
This article is very helpfull. And I want to know how do we make use of DrawerNavigator in ‘react-navigation’ along with passing props and their own states, just like any menu drawer ex: https://i.stack.imgur.com/eKq7J.jpg
Thank you.
Rohit i will soon publish a new tutorial regarding to Drawer Navigator 🙂 .
I added TabNavigator inside MainActivity:
const MyTabNav = TabNavigator({
tab1: {screen: MainActivity},
tab2: {screen: MainActivity2}
})
export default MyTabNav;
when i pressed button OPEN SECOND ACTIVITY, i got an error: undefined is not an object (evaluating ‘this.props.navigation’).
could you solve this?
Andy read my this tutorial about Tabs : https://reactnativecode.com/react-native-swipeable-tab-navigator/ this would help you.
hello brother this tutorial really helps me alot
but i have 1 question, how do i hide or remove the bar with name of the activity like Main activity at the very top after going to the activity.
Fery you have to use static navigationOptions = { title: ‘MainActivity’, header: { visible:false } }; in order to hide the Action bar.
man i appreciated a lot for the reply, i tried header {visible:false} but i got error invariant violation: object are not valid as a react child …
and then i change to header: null and no error
i have 1 js name MenuItem.js
and i call the file on MainIndex.js
navigate(‘RoomActivity’)}/>
but the navigation doesnt work after i click, what seems to be the problem ?
Frey i you need to put the header: null inside the Static navigation options like i have did in below code :
static navigationOptions ={
title: 'MainActivity',
headerStyle: {
backgroundColor: '#FFC107',
},
headerTintColor: '#fff',
header: null
};
admin, how can i do navigation from menuitem
the function
NavigateActivityFunction = () =>
{
this.props.navigation.navigate(‘RoomActivity’);
}
and
but it doesnt work, how can i make this works ?
thanks before
i want it to work as a button to navigate then next activity
but no action happened
Fery your syntax is correct
NavigateActivityFunction = () =>{
this.props.navigation.navigate('RoomActivity');
}
now in the Stack Navigator code
export default Project = StackNavigator({
RoomActivity: { screen: SecondActivity }
});
should be same, If you still face any error then send your code on [email protected]
Hello admin,
i did the same as u do but still unable to do that please help
Nice sharing information…
tHANKS Anand 🙂 .
I have written a code on App.js file which i want to show + I have a Homecomponent.js screen and i also want that screen to show on App.js .What to do ???