Cross Platform

Generate Android and iOS folder React Native

Pinterest LinkedIn Tumblr

Hey, If you are a ReactNative developer, and you wish to know how we can generate Android and iOS folders in your project, then you are in right place. Also, I’ll tell you how you rename android and ios packages and regenerate. You can download the source code end of the blog.

Add eject dependency

Let’s move the IDE and navigate root directory of project, and add the below eject dev dependency.

  yarn add --dev react-native-eject 

After successful execution, your code looks like

"devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-native-eject": "^0.2.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"

You can also add manually add this dev dependency in the package.json like this

    "react-native-eject": "^0.2.0",

After that you have to run yarn install or yarn

Add app.json file

Please create a new file in root of the project, and add below code. If app.json file is already there then you can skip this step. Important note name and displayName you can replace with your project name.

  "name": "EjectDemo",
  "displayName": "EjectDemo"

Generate Android and iOS folders

If android and ios folders are already there then you can delete both after that run this script

npx react-native eject 

Once this script is executed you will get a response like this

surya@Suryas-MacBook-Air EjectDemo % npx react-native eject 
info Generating the iOS folder.
info Generating the Android folder.

That’s all, the same way you can generate the Android and iOS folders.

Rename Android and iOS folders

Suppose you wish to rename the app name and display name just go navigate to the app.json file and rename it

  "name": "AndroidWaveDemo",
  "displayName": "AndroidWaveDemo"

After that just delete the existing Android and iOS folders, and run the

npx react-native eject 

Expert Advice

The same script you can move inside the package.json like highlighted line

  "name": "EjectDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "generate":"npx react-native eject",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"

Run the script

yarn generate

This is a smart way that you can follow, Thank you for reading this blog, Please checkout our recent blog on Why TypeScript is better than JavaScript.

Read More

Write A Comment