Linking native libraries in React Native - Mini App: Build & Ship

Build: Native Library Link Test

This screen tests linking a native library by displaying a native module's value.

Target UI

-------------------------
| Native Library Link Test |
|-------------------------|
| Native Value: [value]   |
|                         |
| [Refresh Button]        |
-------------------------

Display a value fetched from a linked native module

Add a button labeled 'Refresh' to reload the native value

Show loading indicator while fetching native value

Handle errors gracefully with an error message

Starter Code

React Native

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

const { SampleNativeModule } = NativeModules;

export default function NativeLibraryLinkTest() {
  const [nativeValue, setNativeValue] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // TODO: Fetch native value on mount
  }, []);

  const fetchNativeValue = async () => {
    // TODO: Implement fetching native value from SampleNativeModule
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Native Library Link Test</Text>
      {/* TODO: Show loading, error or native value here */}
      <Button title="Refresh" onPress={fetchNativeValue} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 20, marginBottom: 20 },
  valueText: { fontSize: 18, marginVertical: 10 },
  errorText: { color: 'red', marginVertical: 10 }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

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

const { SampleNativeModule } = NativeModules;

export default function NativeLibraryLinkTest() {
  const [nativeValue, setNativeValue] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchNativeValue();
  }, []);

  const fetchNativeValue = async () => {
    setLoading(true);
    setError(null);
    try {
      const value = await SampleNativeModule.getValue();
      setNativeValue(value);
    } catch (e) {
      setError('Failed to load native value');
      setNativeValue(null);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Native Library Link Test</Text>
      {loading && <ActivityIndicator size="large" color="#0000ff" />}
      {!loading && error && <Text style={styles.errorText}>{error}</Text>}
      {!loading && !error && nativeValue !== null && (
        <Text style={styles.valueText}>Native Value: {nativeValue}</Text>
      )}
      <Button title="Refresh" onPress={fetchNativeValue} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 20, marginBottom: 20 },
  valueText: { fontSize: 18, marginVertical: 10 },
  errorText: { color: 'red', marginVertical: 10 }
});

This React Native component demonstrates how to link and use a native library module.

We import NativeModules and extract SampleNativeModule, which is assumed to be linked natively.

On component mount, we call fetchNativeValue to asynchronously get a value from the native module.

While loading, an activity spinner shows. If an error occurs, a red error message appears. Otherwise, the native value is displayed.

The Refresh button lets the user reload the native value anytime.

This pattern helps verify that native libraries are properly linked and callable from JavaScript.

Final Result

Completed Screen

-------------------------
| Native Library Link Test |
|-------------------------|
| Native Value: 42        |
|                         |
| [Refresh Button]        |
-------------------------

When the screen loads, it shows a spinner briefly, then displays the native value.

Tapping the Refresh button reloads the native value and updates the display.

If loading fails, an error message appears in red.

Stretch Goal

Add a toggle switch to switch between light and dark mode for the screen.

💡 Hint

Use React Native's Appearance API or a state variable to toggle styles dynamically.