Why native modules extend capabilities in React Native - Build It to Prove It

Build: Native Module Demo

This screen shows how React Native can use native modules to access device features not available in JavaScript alone.

Target UI

-------------------------
| Native Module Demo     |
|-----------------------|
| Device Info:          |
| [Loading...]          |
|                       |
| [Get Device Info]     |
-------------------------

Display a button labeled 'Get Device Info'.

When tapped, call a native module to get device info (e.g., device name or OS version).

Show the returned info below the button.

Handle loading state while fetching info.

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function NativeModuleDemo() {
  const [deviceInfo, setDeviceInfo] = useState(null);
  const [loading, setLoading] = useState(false);

  const getDeviceInfo = () => {
    // TODO: Call native module here and update deviceInfo
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Native Module Demo</Text>
      <Text style={styles.label}>Device Info:</Text>
      <Text style={styles.info}>{loading ? 'Loading...' : deviceInfo || ''}</Text>
      <Button title="Get Device Info" onPress={getDeviceInfo} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center' },
  title: { fontSize: 24, marginBottom: 20, textAlign: 'center' },
  label: { fontSize: 18, marginBottom: 10 },
  info: { fontSize: 16, marginBottom: 20 }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, NativeModules } from 'react-native';

const { DeviceInfoModule } = NativeModules;

export default function NativeModuleDemo() {
  const [deviceInfo, setDeviceInfo] = useState(null);
  const [loading, setLoading] = useState(false);

  const getDeviceInfo = async () => {
    setLoading(true);
    try {
      const info = await DeviceInfoModule.getDeviceName();
      setDeviceInfo(info);
    } catch (e) {
      setDeviceInfo('Error fetching device info');
    }
    setLoading(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Native Module Demo</Text>
      <Text style={styles.label}>Device Info:</Text>
      <Text style={styles.info}>{loading ? 'Loading...' : deviceInfo || ''}</Text>
      <Button title="Get Device Info" onPress={getDeviceInfo} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center' },
  title: { fontSize: 24, marginBottom: 20, textAlign: 'center' },
  label: { fontSize: 18, marginBottom: 10 },
  info: { fontSize: 16, marginBottom: 20 }
});

This example shows how React Native uses native modules to access device features that JavaScript alone cannot reach. We import NativeModules from React Native and get a reference to a native module called DeviceInfoModule. This module is assumed to be implemented natively (in Java or Swift) and exposes a method getDeviceName that returns the device's name.

When the user taps the button, we call this native method asynchronously. We show a loading message while waiting. Once the info is received, we display it on screen. This demonstrates how native modules extend React Native's capabilities by bridging to platform-specific code.

Final Result

Completed Screen

-------------------------
| Native Module Demo     |
|-----------------------|
| Device Info:          |
| Pixel 7 Pro           |
|                       |
| [Get Device Info]     |
-------------------------

User taps 'Get Device Info' button.

Text below button changes to 'Loading...'.

After a short wait, device name (e.g., 'Pixel 7 Pro') appears.

If error occurs, shows 'Error fetching device info'.

Stretch Goal

Add a button to get the device OS version using another native module method.

💡 Hint

Create another native method like getOSVersion and call it similarly to getDeviceName.