Implementing React Native’s New Architecture with TypeScript
Overview
React Native 0.77 enables Fabric (UI rendering) and TurboModules (Native Modules) by default. This guide walks through enabling and testing these features in a React Native TypeScript project.
1. Setting Up a New React Native Project
First, create a new TypeScript-based React Native project:
npx react-native init MyNewApp –template react-native-template-typescript
cd MyNewApp
To confirm you’re using React Native 0.77, check:
npx react-native –version
If needed, upgrade:
npx react-native upgrade
2. Enabling the New Architecture
By default, Fabric and TurboModules are enabled in new projects. However, for older projects, manually update the settings.
Enable Fabric for Android
1️ Open android/gradle.properties and ensure:
newArchEnabled=true
2️ Open android/app/src/main/java/com/mynewapp/MainApplication.kt (Kotlin) and ensure:
override fun isNewArchEnabled(): Boolean {
return true
}
3️ Rebuild the project:
cd android && ./gradlew clean && cd ..
npx react-native run-android
Enable Fabric for iOS
1️ Open ios/Podfile and enable Fabric:
use_frameworks! :linkage => :static
fabric_enabled = true
hermes_enabled = true
2️ Install dependencies:
cd ios
pod install
cd ..
3️ Run the iOS project: npx react-native run-ios
3. Creating a Fabric UI Component in TypeScript
Define a Fabric Component in TypeScript
1️ Create a new folder: src/components/native/
2️ Create MyCustomView.tsx:
import { requireNativeComponent } from ‘react-native’;
export const MyCustomView = requireNativeComponent(‘MyCustomView’);
3️ Use it in App.tsx:
import React from ‘react’;
import { View, Text } from ‘react-native’;
import { MyCustomView } from ‘./src/components/native/MyCustomView’;
export default function App() {
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<Text>Fabric Component Below</Text>
<MyCustomView style={{ width: 200, height: 200, backgroundColor: ‘blue’ }} />
</View>
);
}
Run the app, and you should see a blue-colored native view rendered using Fabric.
4. Verifying TurboModules in TypeScript
Define a TurboModule in TypeScript
1️ Create src/native/MyTurboModule.ts:
import { NativeModules } from ‘react-native’;
const { MyTurboModule } = NativeModules;
export const getDeviceName = async (): Promise<string> => {
return MyTurboModule.getDeviceName();
};
2️ Use it in App.tsx:
import React, { useEffect, useState } from ‘react’;
import { View, Text } from ‘react-native’;
import { getDeviceName } from ‘./src/native/MyTurboModule’;
export default function App() {
const [deviceName, setDeviceName] = useState<string | null>(null);
useEffect(() => {
getDeviceName().then(setDeviceName);
}, []);
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<Text>Device Name: {deviceName || ‘Loading…’}</Text>
</View>
);
}
Conclusion
With React Native 0.77, the New Architecture (Fabric + TurboModules) is enabled by default, improving performance.
Key Benefits:
- Faster UI rendering with Fabric
- Efficient native module interaction with TurboModules
- Performance improvements and reduced latency
Now, you can fully leverage React Native’s latest architecture using TypeScript!