{"id":3300,"date":"2025-03-06T06:28:55","date_gmt":"2025-03-06T06:28:55","guid":{"rendered":"https:\/\/www.skybridgeinfotech.com\/blog\/?p=3300"},"modified":"2025-06-24T11:35:32","modified_gmt":"2025-06-24T11:35:32","slug":"implementing-react-natives-new-architecture-with-typescript","status":"publish","type":"post","link":"https:\/\/www.skybridgeinfotech.com\/blog\/implementing-react-natives-new-architecture-with-typescript\/","title":{"rendered":"Implementing React Native’s New Architecture with TypeScript"},"content":{"rendered":"\n

Implementing React Native’s New Architecture with TypeScript<\/strong><\/strong><\/strong><\/h2>\n\n\n\n

Overview<\/strong><\/p>\n\n\n\n

React Native 0.77 enables Fabric (UI rendering) and TurboModules (Native Modules)<\/strong> by default. This guide walks through enabling and testing these features in a React Native TypeScript project<\/strong>.<\/p>\n\n\n\n

1. Setting Up a New React Native Project<\/strong><\/p>\n\n\n\n

First, create a new TypeScript-based<\/strong> React Native project:<\/p>\n\n\n\n

npx react-native init MyNewApp –template react-native-template-typescript <\/p>\n\n\n\n

cd MyNewApp <\/p>\n\n\n\n

To confirm you\u2019re using React Native 0.77<\/strong>, check:<\/p>\n\n\n\n

npx react-native –version <\/p>\n\n\n\n

If needed, upgrade:<\/p>\n\n\n\n

npx react-native upgrade <\/p>\n\n\n\n

2. Enabling the New Architecture<\/strong><\/p>\n\n\n\n

By default, Fabric and TurboModules are enabled<\/strong> in new projects. However, for older projects, manually update the settings.<\/p>\n\n\n\n

 Enable Fabric for Android<\/strong><\/p>\n\n\n\n

1\ufe0f Open android\/gradle.properties and ensure:<\/p>\n\n\n\n

newArchEnabled=true <\/p>\n\n\n\n

2\ufe0f Open android\/app\/src\/main\/java\/com\/mynewapp\/MainApplication.kt (Kotlin) and ensure:<\/p>\n\n\n\n

override fun isNewArchEnabled(): Boolean { <\/p>\n\n\n\n

    return true <\/p>\n\n\n\n

} <\/p>\n\n\n\n

3\ufe0f Rebuild the project:<\/p>\n\n\n\n

cd android && .\/gradlew clean && cd .. <\/p>\n\n\n\n

npx react-native run-android <\/p>\n\n\n\n

Enable Fabric for iOS<\/strong><\/p>\n\n\n\n

1\ufe0f Open ios\/Podfile and enable Fabric:<\/p>\n\n\n\n

use_frameworks! :linkage => :static <\/p>\n\n\n\n

fabric_enabled = true <\/p>\n\n\n\n

hermes_enabled = true <\/p>\n\n\n\n

2\ufe0f Install dependencies:<\/p>\n\n\n\n

cd ios <\/p>\n\n\n\n

pod install <\/p>\n\n\n\n

cd .. <\/p>\n\n\n\n

3\ufe0f Run the iOS project: npx react-native run-ios <\/p>\n\n\n\n

3. Creating a Fabric UI Component in TypeScript<\/strong><\/p>\n\n\n\n

Define a Fabric Component in TypeScript<\/strong><\/p>\n\n\n\n

1\ufe0f Create a new folder: src\/components\/native\/<\/p>\n\n\n\n

2\ufe0f Create MyCustomView.tsx:<\/p>\n\n\n\n

import { requireNativeComponent } from ‘react-native’; <\/p>\n\n\n\n

export const MyCustomView = requireNativeComponent(‘MyCustomView’); <\/p>\n\n\n\n

3\ufe0f Use it in App.tsx:<\/p>\n\n\n\n

import React from ‘react’; <\/p>\n\n\n\n

import { View, Text } from ‘react-native’; <\/p>\n\n\n\n

import { MyCustomView } from ‘.\/src\/components\/native\/MyCustomView’; <\/p>\n\n\n\n

export default function App() { <\/p>\n\n\n\n

  return ( <\/p>\n\n\n\n

    <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}> <\/p>\n\n\n\n

      <Text>Fabric Component Below<\/Text> <\/p>\n\n\n\n

      <MyCustomView style={{ width: 200, height: 200, backgroundColor: ‘blue’ }} \/> <\/p>\n\n\n\n

    <\/View> <\/p>\n\n\n\n

  ); <\/p>\n\n\n\n

} <\/p>\n\n\n\n

Run the app, and you should see a blue-colored native view<\/strong> rendered using Fabric.<\/p>\n\n\n\n

 4. Verifying TurboModules in TypeScript<\/strong><\/p>\n\n\n\n

Define a TurboModule in TypeScript<\/strong><\/p>\n\n\n\n

1\ufe0f Create src\/native\/MyTurboModule.ts:<\/p>\n\n\n\n

import { NativeModules } from ‘react-native’; <\/p>\n\n\n\n

const { MyTurboModule } = NativeModules; <\/p>\n\n\n\n

export const getDeviceName = async (): Promise<string> => { <\/p>\n\n\n\n

  return MyTurboModule.getDeviceName(); <\/p>\n\n\n\n

}; <\/p>\n\n\n\n

2\ufe0f Use it in App.tsx:<\/p>\n\n\n\n

import React, { useEffect, useState } from ‘react’; <\/p>\n\n\n\n

import { View, Text } from ‘react-native’; <\/p>\n\n\n\n

import { getDeviceName } from ‘.\/src\/native\/MyTurboModule’; <\/p>\n\n\n\n

export default function App() { <\/p>\n\n\n\n

  const [deviceName, setDeviceName] = useState<string | null>(null); <\/p>\n\n\n\n

  useEffect(() => { <\/p>\n\n\n\n

    getDeviceName().then(setDeviceName); <\/p>\n\n\n\n

  }, []); <\/p>\n\n\n\n

  return ( <\/p>\n\n\n\n

    <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}> <\/p>\n\n\n\n

      <Text>Device Name: {deviceName || ‘Loading…’}<\/Text> <\/p>\n\n\n\n

    <\/View> <\/p>\n\n\n\n

  ); <\/p>\n\n\n\n

} <\/p>\n\n\n\n

Conclusion<\/strong><\/p>\n\n\n\n

With React Native 0.77<\/strong>, the New Architecture (Fabric + TurboModules)<\/strong> is enabled by default<\/strong>, improving performance.<\/p>\n\n\n\n

Key Benefits:<\/strong><\/p>\n\n\n\n