Fabric renderer overview in React Native - Mini App: Build & Ship

Build: Fabric Renderer Overview

This screen explains the Fabric renderer in React Native with a simple UI showing key points.

Target UI

-----------------------------
| Fabric Renderer Overview  |
|---------------------------|
| - New React Native UI     |
|   rendering system        |
| - Improves performance    |
| - Enables concurrent UI   |
|   updates                 |
|                           |
| [Learn More] (button)     |
-----------------------------

Display a title at the top

Show a bullet list of three key Fabric renderer features

Add a button labeled 'Learn More' at the bottom

Button press shows an alert with a short Fabric renderer description

Starter Code

React Native

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

export default function FabricOverview() {
  return (
    <View style={styles.container}>
      {/* TODO: Add title text here */}
      {/* TODO: Add bullet list here */}
      {/* TODO: Add Learn More button here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  bulletPoint: {
    fontSize: 16,
    marginBottom: 10
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function FabricOverview() {
  const showAlert = () => {
    Alert.alert('Fabric Renderer', 'Fabric is the new React Native UI rendering system that improves performance and enables concurrent UI updates.');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Fabric Renderer Overview</Text>
      <View>
        <Text style={styles.bulletPoint}>• New React Native UI rendering system</Text>
        <Text style={styles.bulletPoint}>• Improves performance</Text>
        <Text style={styles.bulletPoint}>• Enables concurrent UI updates</Text>
      </View>
      <Button title="Learn More" onPress={showAlert} accessibilityLabel="Learn more about Fabric renderer" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  bulletPoint: {
    fontSize: 16,
    marginBottom: 10
  }
});

This screen uses a simple vertical layout with space between the title, bullet points, and button.

The title uses a larger bold font for clarity.

The bullet points are simple Text components with a bullet character and spacing.

The button triggers an alert to show more information about Fabric renderer, making the UI interactive.

Accessibility label on the button helps screen readers describe its purpose.

Final Result

Completed Screen

-----------------------------
| Fabric Renderer Overview  |
|---------------------------|
| • New React Native UI     |
|   rendering system        |
| • Improves performance    |
| • Enables concurrent UI   |
|   updates                 |
|                           |
| [Learn More] (button)     |
-----------------------------

User taps 'Learn More' button

An alert pops up with the message: 'Fabric is the new React Native UI rendering system that improves performance and enables concurrent UI updates.'

Stretch Goal

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

💡 Hint

Use React state to toggle a dark mode boolean and conditionally apply styles for background and text colors.