React Native architecture (bridge, new architecture) - Mini App: Build & Ship

Build: Architecture Overview

This screen shows a simple explanation of React Native's old bridge architecture and the new architecture with TurboModules and Fabric.

Target UI

-------------------------
| React Native Arch      |
|-----------------------|
| Old Bridge:           |
| - JS thread          |
| - Native thread      |
| - Bridge for comm.   |
|                       |
| New Arch:             |
| - TurboModules       |
| - Fabric Renderer    |
| - Direct comm.       |
|                       |
| [Learn More] Button   |
-------------------------

Display two sections: Old Bridge and New Architecture with bullet points

Use simple Text components for explanation

Add a button labeled 'Learn More' at the bottom

When 'Learn More' is pressed, show an alert with a short message about React Native's new architecture

Starter Code

React Native

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

export default function ArchitectureOverview() {
  return (
    <View style={styles.container}>
      {/* TODO: Add Old Bridge section */}
      {/* TODO: Add New Architecture section */}
      {/* TODO: Add Learn More button with alert on press */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
  },
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function ArchitectureOverview() {
  const showAlert = () => {
    Alert.alert('React Native New Architecture', 'The new architecture improves performance by using TurboModules and Fabric for direct communication between JS and native code.');
  };

  return (
    <View style={styles.container}>
      <ScrollView>
        <Text style={styles.heading}>Old Bridge:</Text>
        <Text style={styles.bullet}>• JS thread</Text>
        <Text style={styles.bullet}>• Native thread</Text>
        <Text style={styles.bullet}>• Bridge for communication</Text>

        <Text style={styles.heading}>New Architecture:</Text>
        <Text style={styles.bullet}>• TurboModules</Text>
        <Text style={styles.bullet}>• Fabric Renderer</Text>
        <Text style={styles.bullet}>• Direct communication</Text>
      </ScrollView>

      <Button title="Learn More" onPress={showAlert} accessibilityLabel="Learn more about React Native architecture" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
  },
  heading: {
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 10,
    marginBottom: 5,
  },
  bullet: {
    fontSize: 16,
    marginLeft: 10,
    marginBottom: 3,
  },
});

This screen uses simple Text components to show two sections describing the old and new React Native architectures. The old bridge architecture uses a bridge to communicate between the JavaScript thread and native thread. The new architecture improves performance by using TurboModules and Fabric for direct communication.

A Button labeled "Learn More" is placed at the bottom. When pressed, it shows an alert with a short explanation about the new architecture. The layout uses flex and padding for spacing, and a ScrollView to allow scrolling if the content is too tall on small screens.

Accessibility is considered by adding an accessibilityLabel to the button for screen readers.

Final Result

Completed Screen

-------------------------
| React Native Arch      |
|-----------------------|
| Old Bridge:           |
| • JS thread          |
| • Native thread      |
| • Bridge for comm.   |
|                       |
| New Arch:             |
| • TurboModules       |
| • Fabric Renderer    |
| • Direct comm.       |
|                       |
| [Learn More] Button   |
-------------------------

User taps 'Learn More' button

An alert pops up with the message: 'The new architecture improves performance by using TurboModules and Fabric for direct communication between JS and native code.'

Stretch Goal

Add a dark mode toggle that switches the background and text colors between light and dark themes.

💡 Hint

Use React Native's useColorScheme hook to detect system theme or add a switch to toggle a state that changes styles dynamically.