CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - New architecture

Combine JSI, Fabric and TurboModules to write a new architecture summary.

Summary - New architecture

The new architecture rests on three pillars: JSI (direct C++ binding), Fabric (new render layer) and TurboModules (lazy native modules). Codegen produces the native skeleton for them.

The bridge goes away; serialization disappears; synchronous calls become possible. Fabric works with React 18 concurrent rendering. The new architecture is on by default from React Native 0.74.

Practice Write the TurboModule call

Fetch the Math TurboModule with TurboModuleRegistry.getEnforcing. Pass Spec as the generic. Assign the result to MathModule.

Starter code

App.js
import { TurboModuleRegistry } from 'react-native';
import type { Spec } from './NativeMath';

// Fetch the module here

export default MathModule;

Sample solution

App.js
import { TurboModuleRegistry } from 'react-native';
import type { Spec } from './NativeMath';

const MathModule = TurboModuleRegistry.getEnforcing<Spec>('Math');

export default MathModule;

Practice Export the Fabric native component

Define a Fabric native component named Box with a NativeProps interface. Use codegenNativeComponent; default export it.

Starter code

App.js
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {
  color?: string;
}

// Define and export the Box component here

Sample solution

App.js
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {
  color?: string;
}

const Box = codegenNativeComponent<NativeProps>('Box');
export default Box;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What are the pillars of the new architecture?

  • Bridge, Async, JSON
  • JSI, Fabric, TurboModules Correct answer
  • CSS, HTML, DOM
  • Webpack, Babel, ESLint

Explanation: The three pillars are JSI, Fabric and TurboModules.

2 Match all the pieces

Term Meaning
JSI Direct C++ binding
Fabric Render layer
TurboModules Lazy modules
Codegen Skeleton generator

All lessons in Expert

1 New architecture

  1. What is the new architecture?
  2. JSI
  3. Fabric
  4. TurboModules
  5. Codegen
  6. Summary - New architecture

2 Performance engineering

  1. Profiling
  2. React Profiler
  3. Bottleneck
  4. List optimization
  5. Memory leaks
  6. Summary - Performance engineering

3 App architecture

  1. Feature-based
  2. Layered
  3. Clean architecture
  4. Repository pattern
  5. Dependency injection
  6. Summary - App architecture

4 Monorepo

  1. What is a monorepo?
  2. Yarn workspaces
  3. npm workspaces
  4. Turborepo
  5. Shared packages
  6. Summary - Monorepo

5 Accessibility

  1. accessibilityLabel
  2. accessibilityRole
  3. accessibilityHint
  4. accessibilityState
  5. VoiceOver and TalkBack
  6. Summary - Accessibility

6 Internationalization

  1. What is i18n?
  2. i18next
  3. Translation files
  4. useTranslation
  5. Language switching
  6. Summary - Internationalization

7 Security

  1. Code obfuscation
  2. API key security
  3. Certificate pinning
  4. Anti-tamper
  5. Secure coding
  6. Summary - Security

8 Expert final

  1. Project design
  2. New architecture
  3. Performance
  4. Monorepo
  5. Putting it together