Why React Native enables cross-platform mobile apps - Build It to Prove It

Build: CrossPlatformInfo

This screen explains why React Native allows building apps that work on both iOS and Android using one codebase.

Target UI

-------------------------
| React Native Info     |
|-----------------------|
| Why React Native?     |
|                       |
| - Uses JavaScript     |
| - Shares code on iOS  |
|   and Android         |
| - Native UI elements  |
| - Faster development  |
|                       |
| [Back]                |
-------------------------

Display a header with the screen name

Show a list of 4 bullet points explaining React Native benefits

Add a Back button at the bottom

Use simple React Native components (View, Text, Button)

Make sure the layout looks neat and readable

Starter Code

React Native

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

export default function CrossPlatformInfo({ navigation }) {
  return (
    <View style={styles.container}>
      {/* TODO: Add header text here */}
      {/* TODO: Add bullet points here */}
      {/* TODO: Add Back button here */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Solution

React Native

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

export default function CrossPlatformInfo({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>React Native Info</Text>
      <View>
        <Text style={styles.bulletPoint}>• Uses JavaScript</Text>
        <Text style={styles.bulletPoint}>• Shares code on iOS and Android</Text>
        <Text style={styles.bulletPoint}>• Native UI elements</Text>
        <Text style={styles.bulletPoint}>• Faster development</Text>
      </View>
      <Button title="Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

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

This screen uses React Native components to show why React Native is good for building apps that work on both iOS and Android.

The header uses a large bold Text. The bullet points explain key benefits in simple lines with a bullet symbol.

The Back button uses the navigation prop to go back to the previous screen, making the app easy to navigate.

The layout uses flexbox to space the content nicely with padding and spacing.

Final Result

Completed Screen

-------------------------
| React Native Info     |
|-----------------------|
| • Uses JavaScript     |
| • Shares code on iOS  |
|   and Android         |
| • Native UI elements  |
| • Faster development  |
|                       |
| [Back]                |
-------------------------

Tapping the Back button returns to the previous screen

Stretch Goal

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

💡 Hint

Use React state to track mode and change background and text colors accordingly.