Question 168434 in React native Question posted in
The official React Native documentation can be found here.

Can I use a different App.js file when running React Native?

Sometimes I need to run my react native app with different App.js file, lets call it App2.js.
I’m modifying index.js manually.

import { AppRegistry } from 'react-native'

//const myApp = require('./src/App2').default
const myApp = require('./src/App').default

AppRegistry.registerComponent('Dummy app, () => myApp)

Is it possible to add script to package.json for this?
Something like react-native start:app2 or in different way.

I looked to react native cli documentation and start command doesn’t have anything similar. Only --projectRoot which is not really what I’m looking for.

Tags:

2

Answers


  1. 0

    Open your package.json file.
    Add a new script entry with a custom name, such as "start:app2", and set its value to the command you want to execute. In this case, it will be the modified index.js file that imports App2.js. Your updated package.json script section should look like this:

    "scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "start:app2": "node node_modules/react-native/local-cli/cli.js start --entry-file ./src/App2.js"
}
    Login or Signup to reply.
  2. 0

    You can use react-native-dotenv.
    npm install --save react-native-dotenv

    Config should be:

    index.js

    import {AppRegistry} from 'react-native';
import App1 from './App1.js';
import App2 from './App2.js';
import {name as appName} from './app.json';

import {APP_NAME} from '@env';

const apps = {
  app1: App1,
  app2: App2,
};

AppRegistry.registerComponent(appName, () => apps[APP_NAME]);

    finally on package.json

      "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "app1": "APP_NAME=app1 npx react-native start --reset-cache", <== this
    "app2": "APP_NAME=app2 npx react-native start --reset-cache" <== this
  },

    Please note that reset cache option is required.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search