Native modules concept in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the native module in React Native.

React Native

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

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

ANativeModuleLoader

BNativeModule

CNativeModuleManager

DNativeModules

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular form NativeModule instead of NativeModules.

Trying to import from other packages.

The correct import to access native modules in React Native is NativeModules from 'react-native'.

2fill in blank

medium

Complete the code to call a native method named 'showToast' from the native module 'ToastExample'.

React Native

NativeModules.ToastExample.[1]('Hello from React Native');

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

AshowToast

BdisplayToast

CtoastShow

DmakeToast

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like displayToast or makeToast.

Trying to call methods not exposed by the native module.

The native method to call is showToast as defined in the native module ToastExample.

3fill in blank

hard

Fix the error in the code to correctly export a native module in Android Java.

React Native

public class ToastModule extends ReactContextBaseJavaModule {
  public ToastModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String [1]() {
    return "ToastExample";
  }
}

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

AgetName

BgetModuleName

CmoduleName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using getModuleName or name instead of getName.

Not overriding the method at all.

The method to override to provide the module name is getName().

4fill in blank

hard

Fill both blanks to create a native module method in Java that sends an event to JavaScript.

React Native

private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
  reactContext.getJSModule([1].class).emit([2], params);
}

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

ADeviceEventManagerModule.RCTDeviceEventEmitter

BeventName

CDeviceEventManagerModule

DRCTEventEmitter

Attempts:

3 left

💡 Hint

Common Mistakes

Using incomplete class names or wrong event emitter interfaces.

Confusing event names with class names.

To send events, use getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) and call emit with the event name.

5fill in blank

hard

Fill all three blanks to define a native module method in Swift that can be called from React Native.

React Native

@objc([1])
class [2]: NSObject {
  @objc func [3]() {
    print("Native method called")
  }
}

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

AToastModule

CshowToast

DdisplayToast

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the module and class.

Using method names not matching the native module interface.

The @objc attribute names the module ToastModule, the class is ToastModule, and the method is showToast.