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.