New architecture

Write components with the new architecture (JSI, Fabric).

What is the new architecture?

The new architecture is the JSI based structure of React Native. Instead of the old bridge the JS and native sides talk directly. This means less serialization and faster communication. Two core parts: Fabric (new renderer) and TurboModules (new native modules).

Fabric makes components render more efficiently. TurboModules make native modules load only when used (lazy). The new architecture is turned on with "newArchEnabled": true in app.json. This raises performance measurably; but some older libraries may not be compatible. Testing matters.

Writing a Fabric component

Writing a component in the new architecture is mostly the same as before. Basic components like View and Text render through Fabric automatically. For custom native components codegen is used.

Let us write a simple MetricCard component. It shows a label and a value. In the new architecture this component renders with less overhead. The code does not change; but Fabric works behind the scenes. If you wrap it with memo you also block needless re-renders. This builds the performance layer.

Exercise Add the MetricCard component

On top of the previous code add a MetricCard component. It takes a label and a value prop. It returns <Text>{label}: {value}</Text>. Wrap it with memo.

Show example solution

import React, { useState } from 'react';
import { Text, View } from 'react-native';

function App() {
  const [metrics, setMetrics] = useState({});
  return (
    <View>
      <Text>Dashboard</Text>
    </View>
  );
}

const MetricCard = memo(function MetricCard({ label, value }) {
  return <Text>{label}: {value}</Text>;
});

Test yourself

The new architecture setting

"newArchEnabled": ____

Show answer

"newArchEnabled": true

What does the new architecture change?
```
bridge -> JSI
```
- JS and native communication
- Screen colors
- Font size
- Package name
Show answer

JS and native communication — The new architecture speeds up JS-native communication.
Match each piece to its role

JSI

Direct access
Fabric

New renderer
TurboModules

Lazy modules
newArchEnabled

Setting key

Next lesson: Performance

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies