Summary - Native modules

Combine NativeMethods, events and TurboModules to write a native bridge.

Summary - Native modules

In this group you learned native modules, NativeMethods, platform-specific, native events and TurboModules. NativeModules carries all native modules; NativeModules.Battery.getLevel() calls a method. Platform.OS separates platforms.

NativeEventEmitter listens to native events; TurboModules provides fast calls via JSI in the new architecture. Now we will combine them into a simple native bridge skeleton.

Exercise Summary - Battery level

Complete the getBattery function. Import NativeModules from react-native. Also import Platform.OS. If Platform.OS === 'android' call NativeModules.Battery.getLevel() and return it; else return null.

Show example solution

import { NativeModules, Platform } from 'react-native';

export async function getBattery() {
  if (Platform.OS === 'android') {
    return await NativeModules.Battery.getLevel();
  }
  return null;
}

Exercise Summary - Event cleanup

Complete the useBluetooth hook. Create an emitter with NativeEventEmitter. Listen with addListener('stateChanged', handler). Call sub.remove() in the useEffect return.

Show example solution

import { useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';

export function useBluetooth(handler) {
  useEffect(() => {
    const emitter = new NativeEventEmitter(NativeModules.Bluetooth);
    const sub = emitter.addListener('stateChanged', handler);
    return () => sub.remove();
  }, []);
}

Test yourself

Match the flow parts

NativeModules

All modules
Platform.OS

Operating system
NativeEventEmitter

Listens to events
TurboModules

New architecture

The EventEmitter class

const emitter = new ____(NativeModules.Bluetooth);

Show answer

const emitter = new NativeEventEmitter(NativeModules.Bluetooth);

Next lesson: EAS Build

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies