Debug School

rakesh kumar
rakesh kumar

Posted on

How to Migrate Dependencies from an Existing React Native Project to a New One

To run the dependencies of an existing React Native project in a new project, follow these detailed step-by-step instructions:

Step 1: Create a New React Native Project
Start by creating a new React Native project using the react-native CLI.

npx react-native init NewProjectName
Enter fullscreen mode Exit fullscreen mode

This will create a fresh React Native project in the NewProjectName directory.

Step 2: Copy Dependencies from Old Project’s package.json
Open the old project's package.json file.

Copy the dependencies and devDependencies sections. These sections list all the libraries used in the old project.

Example dependencies and devDependencies section in package.json:


"dependencies": {
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-navigation": "^5.9.4",
    "redux": "^4.0.5",
    "react-native-gesture-handler": "^1.10.3"
},
"devDependencies": {
    "@babel/preset-env": "^7.15.8",
    "babel-preset-react-native": "^4.0.1"
}
Enter fullscreen mode Exit fullscreen mode

Go to the new project's package.json (in the NewProjectName directory) and replace the dependencies and devDependencies sections with those from the old project.

Step 3: Install Dependencies
After updating the package.json in the new project with all the dependencies:

Run the following command in the terminal to install all the dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Or if you're using Yarn, run:


yarn install
Enter fullscreen mode Exit fullscreen mode

This will automatically install all the dependencies from the package.json.

Step 4: Copy Over the Babel Configuration
If your old project used a custom Babel configuration (babel.config.js or .babelrc), copy that configuration to your new project.

Copy the entire Babel configuration file (babel.config.js or .babelrc) from the old project.

Example of a typical babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // You can add custom Babel plugins here
  ],
};
Enter fullscreen mode Exit fullscreen mode

Paste it into the root of your new project, replacing the existing babel.config.js file (if it exists).

Step 5: Copy Over Other Configuration Files
If your old project used any additional configuration files, such as:

.eslintrc

.prettierrc

tsconfig.json (for TypeScript projects)
Enter fullscreen mode Exit fullscreen mode

Copy these files from your old project into your new project if applicable.

Step 6: Copy Over Platform-Specific Files
If your old project has any custom platform-specific configurations (like Android and iOS), copy the necessary files to the new project:

For Android:

android/build.gradle: Ensure that any modifications to this file (e.g., custom SDK versions, library configurations) are also transferred.

android/app/src/main/AndroidManifest.xml: If there are permissions or app configurations added for Android, copy those as well.

For iOS:

ios/Podfile: Ensure that any changes (e.g., adding dependencies for iOS) are reflected in your new Podfile.

Native iOS code: If you have any modifications in AppDelegate.m, Info.plist, or other native iOS files, copy them as well.

After copying the Podfile (if applicable), run:

cd ios
pod install
cd ..
Enter fullscreen mode Exit fullscreen mode

Step 7: Link Native Modules (if needed)
For React Native versions >= 0.60, auto-linking will automatically link native modules. If you're using older versions of React Native or need to manually link a module, use the following command:

npx react-native link
Enter fullscreen mode Exit fullscreen mode

Step 8: Handle Assets and Resources
If your old project uses custom assets (images, fonts, etc.), make sure to:

Copy the assets (e.g., images, fonts) from the old project to the new project's assets folder (if it exists).

If you're using custom fonts, ensure that your react-native.config.js includes the necessary configuration for them:

Example:

module.exports = {
  assets: ['./assets/fonts'],
};
Enter fullscreen mode Exit fullscreen mode

Step 9: Verify Environment Variables
If your old project used any environment variables (e.g., .env files), make sure to:

Copy over the .env file from the old project.

If you don’t have a library for managing environment variables, install one, such as react-native-dotenv:

npm install react-native-dotenv
Enter fullscreen mode Exit fullscreen mode

Or, if using Yarn:

yarn add react-native-dotenv
Enter fullscreen mode Exit fullscreen mode

Step 10: Clear Cache and Rebuild
To ensure everything works correctly, clear the cache and rebuild the project:

Clear the cache:

npx react-native start --reset-cache
Enter fullscreen mode Exit fullscreen mode

Run the project:

For Android:

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

For iOS:

npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

Step 11: Troubleshoot Issues
After completing the above steps, if the app doesn't run properly, check the following:

Check the terminal logs for any missing dependencies or errors.

Ensure there are no conflicting versions between dependencies in the package.json (use npm outdated or yarn outdated).

Ensure native dependencies are correctly linked and the app can build on both platforms (iOS and Android).

Top comments (0)