Create React Native Project (New Architecture) in 2025

Hey everyone! In this post, I’ll walk you through how to Create React Native Project (New Architecture) in 2025 using Fabric and TurboModules. The new architecture is designed to improve performance and unlock future capabilities in React Native, and setting it up properly can save a lot of time later.

If you’re planning to build a scalable, high-performance React Native app, starting with the React Native New Architecture is the way to go.

1. Why New Architecture?

React Native’s new architecture includes:

• Fabric Renderer: Improved UI performance and interop with native code.

• TurboModules: Faster loading of native modules.

• CodeGen: Auto-generates code from TypeScript or Flow types.

• Hermes Engine: Optional but recommended for faster startup and memory usage.

2. Prerequisites

Make sure you have the following setup:

• Node.js (LTS version)

• Watchman (for macOS)

• Xcode for iOS (latest version)

• Android Studio with SDK setup

• CocoaPods installed (brew install cocoapods)

• React Native CLI (not Expo)

3. Steps to Create New Architecture Enabled Project

• Create a new project using the community CLI:

npx react-native-community/cli init MyNewApp

• Enable the new architecture in your project:

cd MyNewApp

• Modify react-native.config.js (if not present, create it)

module.exports = {
  reactNativePath: './node_modules/react-native',
  project: {
    ios: {
      sourceDir: './ios',
    },
    android: {
      sourceDir: './android',
    },
  },
  dependencies: {},
};

• Enable New Architecture in android/gradle.properties

# Enable Fabric and TurboModules
newArchEnabled=true

• Enable New Architecture in iOS

Open ios/Podfile, and update the following:

use_react_native!(
  :path => config[:reactNativePath],
  :fabric_enabled => true,  # Enables Fabric
  :hermes_enabled => true   # Optional but recommended
)

4. Build the App

//For iOS
npx react-native run-ios

//For Android
npx react-native run-android

5. My Working package.json Configuration

To help you get started quickly, I’m sharing the package.json from my working React Native project that uses the New Architecture. You can refer to this to align your dependencies and versions:

{
  "name": "TechUpApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "react": "19.0.0",
    "react-native": "0.79.1",
    "react-native-permissions": "^5.4.0",
    "react-native-safe-area-context": "^5.4.0",
    "react-native-screens": "^4.10.0",
    "react-native-vector-icons": "^10.2.0",
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.1",
    "@react-native/eslint-config": "0.79.1",
    "@react-native/metro-config": "0.79.1",
    "@react-native/typescript-config": "0.79.1",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Facing any issues? Feel free to reach out — I have working examples and can help you get it running!