Turbo Modules overview in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Turbo Module in React Native.

React Native

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

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

AuseState

BView

CTurboModuleRegistry

DNativeModules

Attempts:

3 left

💡 Hint

Common Mistakes

Using NativeModules instead of TurboModuleRegistry

Importing unrelated hooks like useState

Turbo Modules are accessed via TurboModuleRegistry in React Native.

2fill in blank

medium

Complete the code to get a Turbo Module named 'MyModule'.

React Native

const myModule = [1].get('MyModule');

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

ANativeModules

BReact

CModuleRegistry

DTurboModuleRegistry

Attempts:

3 left

💡 Hint

Common Mistakes

Using NativeModules.get instead of TurboModuleRegistry.get

Trying to call get on React or ModuleRegistry which don't exist

TurboModuleRegistry.get('MyModule') returns the Turbo Module instance.

3fill in blank

hard

Fix the error in the Turbo Module method call to get a string result.

React Native

const result = await myModule.[1]();

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

AfetchData

Bfetch_data

CFetchData

Dfetchdata

Attempts:

3 left

💡 Hint

Common Mistakes

Using snake_case or incorrect capitalization

Calling a method name that does not exist

Method names in Turbo Modules use camelCase like 'fetchData'.

4fill in blank

hard

Fill both blanks to define a Turbo Module interface with a method returning a Promise.

React Native

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

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

AMyTurboModule

BfetchData

CgetData

DMyModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect interface or method names

Not returning a Promise in the method signature

The interface name is 'MyTurboModule' and method 'fetchData' returns a Promise.

5fill in blank

hard

Fill all three blanks to register a Turbo Module in native code (TypeScript style).

React Native

import { TurboModuleRegistry } from 'react-native';

const [1] = TurboModuleRegistry.get<[2]>('[3]');

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

AmyModule

BMyTurboModule

CMyModule

DTurboModule

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up interface and variable names

Using wrong string name for the module

We assign the module to 'myModule', use interface 'MyTurboModule', and get 'MyModule' by name.