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.