React Native architecture (bridge, new architecture) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native bridge module.

React Native

import [1] from 'react-native';

Drag options to blanks, or click blank then click option'

ANativeModules

BReactBridge

CBridgeModule

DNativeBridge

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent import like ReactBridge or BridgeModule.

Confusing the bridge with UI components.

The NativeModules object is used to access native bridge modules in React Native.

2fill in blank

medium

Complete the code to create a TurboModule in the new React Native architecture.

React Native

const MyModule = require[1]('MyTurboModule');

Drag options to blanks, or click blank then click option'

ANativeModules

BTurboModuleRegistry.getEnforcing

CNativeModules.getModule

DTurboModuleRegistry.get

Attempts:

3 left

💡 Hint

Common Mistakes

Using NativeModules instead of TurboModuleRegistry.

Using get instead of getEnforcing which is stricter.

In the new architecture, TurboModuleRegistry.getEnforcing is used to get a TurboModule with type safety.

3fill in blank

hard

Fix the error in the code to correctly send an event from native to JavaScript using the new architecture.

React Native

this.[1].emit('eventName', { data: 'value' });

Drag options to blanks, or click blank then click option'

AEventEmitter

BTurboEventEmitter

CNativeEventEmitter

DRCTDeviceEventEmitter

Attempts:

3 left

💡 Hint

Common Mistakes

Using RCTDeviceEventEmitter which is deprecated.

Using a non-existent TurboEventEmitter.

The NativeEventEmitter is used to send events from native code to JavaScript in React Native.

4fill in blank

hard

Fill both blanks to complete the code that defines a React Native Fabric component.

React Native

import { [1] } from 'react-native';

const MyComponent = [2](() => {
  return null;
});

Drag options to blanks, or click blank then click option'

ArequireNativeComponent

BcreateFabricComponent

CcreateComponent

DregisterComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using createComponent or registerComponent which are not Fabric-specific.

Mixing up the order of functions.

requireNativeComponent imports the native UI component, and createFabricComponent wraps it for the Fabric renderer.

5fill in blank

hard

Fill all three blanks to complete the code that sets up a TurboModule interface in TypeScript.

React Native

export interface MyModuleSpec {
  [1](): Promise<string>;
}

export default TurboModuleRegistry.[2]<MyModuleSpec>('MyModule');

const myModule = [3];

Drag options to blanks, or click blank then click option'

AgetEnforcing

Bget

CmyModule

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the interface method incorrectly.

Using get instead of getEnforcing.

Not assigning the module instance to a variable.

The interface method is named fetchData. The TurboModule is accessed with getEnforcing. The constant myModule stores the module instance.

Practice

1. What is the main role of the bridge in React Native architecture?

easy

A. It manages the app's navigation stack.

B. It compiles JavaScript into native machine code.

C. It connects JavaScript code with native platform code.

D. It handles styling and layout of components.

Solution

1. Step 1: Understand the bridge concept

   The bridge acts as a communication layer between JavaScript and native code in React Native.

2. Step 2: Identify the bridge's role

   It allows JavaScript to send commands and receive data from native modules, enabling cross-platform functionality.

3. Final Answer:

   It connects JavaScript code with native platform code. -> Option C

4. Quick Check:

   Bridge = Connect JS and native [OK]

Hint: Bridge links JS and native code in React Native [OK]

Common Mistakes:

• Thinking bridge compiles JavaScript
• Confusing bridge with navigation or styling
• Assuming bridge handles UI rendering directly

2. Which of the following is the correct way to describe the new React Native architecture?

easy

A. It removes the need for native code entirely.

B. It replaces JavaScript with a new language.

C. It uses a webview to render all components.

D. It improves performance by reducing bridge overhead.

Solution

1. Step 1: Recall the new architecture goal

   The new React Native architecture aims to make apps faster by optimizing communication.

2. Step 2: Understand how it improves performance

   It reduces the overhead caused by the bridge, making interactions between JS and native code more efficient.

3. Final Answer:

   It improves performance by reducing bridge overhead. -> Option D

4. Quick Check:

   New architecture = less bridge overhead [OK]

Hint: New architecture reduces bridge overhead for speed [OK]

Common Mistakes:

• Believing it removes native code completely
• Thinking it replaces JavaScript language
• Confusing it with webview-based rendering

3. Given the following code snippet, what will happen when the JavaScript calls NativeModules.ExampleModule.getData() in React Native's old architecture?

medium

A. The call is sent over the bridge asynchronously.

B. The call goes directly to native code without delay.

C. The call causes a syntax error in JavaScript.

D. The call is handled by a webview component.

Solution

1. Step 1: Understand NativeModules call behavior

   In old React Native, calls to native modules go through the bridge asynchronously.

2. Step 2: Identify the effect of the bridge

   The bridge queues and sends messages between JS and native code, causing asynchronous behavior.

3. Final Answer:

   The call is sent over the bridge asynchronously. -> Option A

4. Quick Check:

   Old architecture calls = async bridge [OK]

Hint: Old architecture uses async bridge calls [OK]

Common Mistakes:

• Assuming direct synchronous native calls
• Thinking it causes syntax errors
• Confusing with webview handling

4. You notice your React Native app is slow due to many bridge calls. Which change can help fix this performance issue?

medium

A. Rewrite all JavaScript code in TypeScript.

B. Switch to the new architecture with TurboModules and Fabric.

C. Remove all native modules and use only JavaScript.

D. Use a webview to render the entire app.

Solution

1. Step 1: Identify cause of slowness

   Many bridge calls cause overhead and slow down the app.

2. Step 2: Choose the right fix

   The new architecture uses TurboModules and Fabric to reduce bridge overhead and improve speed.

3. Final Answer:

   Switch to the new architecture with TurboModules and Fabric. -> Option B

4. Quick Check:

   New architecture reduces bridge calls [OK]

Hint: Use new architecture to reduce bridge calls [OK]

Common Mistakes:

• Thinking TypeScript improves bridge performance
• Removing native modules breaks functionality
• Using webview slows app further

5. How does the new React Native architecture improve UI rendering performance compared to the old bridge system?

hard

A. By using Fabric to directly manage UI components on the native side.

B. By compiling JavaScript into native code at build time.

C. By removing the need for any native code in the app.

D. By rendering UI inside a webview for faster updates.

Solution

1. Step 1: Understand Fabric's role

   Fabric is the new rendering system that manages UI components natively.

2. Step 2: Compare with old bridge system

   Old system sent UI updates over the bridge causing delays; Fabric reduces this by direct native management.

3. Final Answer:

   By using Fabric to directly manage UI components on the native side. -> Option A

4. Quick Check:

   Fabric improves UI by native management [OK]

Hint: Fabric manages UI natively for speed [OK]

Common Mistakes:

• Thinking JavaScript is compiled to native code
• Believing native code is removed
• Confusing Fabric with webview rendering