Call External Local JS File Activity in Current App.js File in React Native

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.

5. Create another JS file named as SecondActivity.js file inside the Modules folder. This would be our Second Activity.

6. Screenshot of Modules folder after crating both files.

7. Open the App.js file of your project and import the Component inside it.

8. Now we would import the both MainActivity and SecondActivity files from Modules folder.

9. Import StackNavigator in your App.js file.

10. Now finally we would call the both Activity files using StackNavigator in our App.js file.

11. Complete source code for App.js File :

Screenshot in Android device :

Call External Local JS File Activity Screenshot in iOS device :

16 Comments

  1. it is very good Artical for stack navigation , how can menu icon drawable navigation work ?

  2. 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.

  3. 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?

  4. 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

          };

  5. 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]

  6. Hello admin,
    i did the same as u do but still unable to do that please help

  7. Nice sharing information…

Leave a Reply

Your email address will not be published. Required fields are marked *