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.

Practice

1. Why does React Native allow developers to create apps for both iOS and Android using mostly the same code?

easy

A. Because it runs the entire app inside a web browser on the device

B. Because it compiles JavaScript directly into native machine code for each platform

C. Because it requires writing separate code for iOS and Android but shares design files

D. Because it uses JavaScript to write shared code and renders native UI components on each platform

Solution

1. Step 1: Understand React Native's code sharing

   React Native uses JavaScript to write most of the app logic once, which works on both iOS and Android.

2. Step 2: Recognize native UI rendering

   It renders native UI components on each platform, so the app looks and feels native.

3. Final Answer:

   Because it uses JavaScript to write shared code and renders native UI components on each platform -> Option D

4. Quick Check:

   Shared JavaScript + native UI = cross-platform [OK]

Hint: React Native shares JS code and uses native UI components [OK]

Common Mistakes:

• Thinking React Native runs apps inside a web browser
• Believing it compiles JS directly to machine code
• Assuming separate code is needed for each platform

2. Which of the following is the correct way to import React Native components for cross-platform use?

easy

A. import View from 'react-native-view'; import Text from 'react-native-text';

B. import { View, Text } from 'react-native';

C. import { View, Text } from 'react';

D. import { View, Text } from 'react-native-web';

Solution

1. Step 1: Identify the official React Native import syntax

   The correct way is to import components like View and Text from the 'react-native' package.

2. Step 2: Eliminate incorrect imports

   Imports from wrong package names like 'react-native-view' (separate imports), 'react', or 'react-native-web' are not standard.

3. Final Answer:

   import { View, Text } from 'react-native'; -> Option B

4. Quick Check:

   Standard React Native imports use 'react-native' [OK]

Hint: Always import core components from 'react-native' package [OK]

Common Mistakes:

• Importing from 'react' instead of 'react-native'
• Using non-existent packages like 'react-native-view'
• Confusing React Native with React Native Web imports

3. What will be the output on both iOS and Android when running this React Native code?

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

export default function App() {
  return (
    
      Hello, cross-platform!
    
  );
}

medium

A. A web page showing the text inside a browser

B. An error because View and Text cannot be used together

C. A native app screen showing the text 'Hello, cross-platform!' on both iOS and Android

D. A blank screen because the View component is empty

Solution

1. Step 1: Analyze the JSX structure

   The code returns a View containing a Text component with the string 'Hello, cross-platform!'.

2. Step 2: Understand React Native rendering

   View and Text are native components that render properly on both iOS and Android.

3. Final Answer:

   A native app screen showing the text 'Hello, cross-platform!' on both iOS and Android -> Option C

4. Quick Check:

   View + Text render native UI with text [OK]

Hint: View wraps Text to show content on both platforms [OK]

Common Mistakes:

• Thinking View and Text cause errors when used together
• Assuming the screen will be blank without styles
• Confusing React Native with web rendering

4. Identify the error in this React Native code snippet that aims to display a button:

import React from 'react';
import { Button } from 'react-native';

export default function App() {
  return (
    
  );
}

medium

A. The title prop value is missing quotes, causing a syntax error

B. Button component cannot be used without a View wrapper

C. The import statement for Button is incorrect

D. React Native does not support Button component

Solution

1. Step 1: Check the Button component usage

   The title prop value should be a string, so it must be enclosed in quotes.

2. Step 2: Identify the syntax error

   title=Click Me is invalid; it should be title="Click Me" or title='Click Me'.

3. Final Answer:

   The title prop value is missing quotes, causing a syntax error -> Option A

4. Quick Check:

   Props with string values need quotes [OK]

Hint: Always put quotes around string prop values [OK]

Common Mistakes:

• Omitting quotes around string props
• Thinking Button needs a View wrapper to work
• Believing Button is not a valid React Native component

5. You want to customize a React Native app so that a button looks different on iOS and Android but still share most code. Which approach best uses React Native's cross-platform features?

hard

A. Use Platform module to conditionally render different styles or components for each platform

B. Write two completely separate apps, one for iOS and one for Android

C. Use only web technologies and run the app in a browser on both devices

D. Use native code only and avoid React Native components

Solution

1. Step 1: Understand React Native's Platform module

   The Platform module lets you detect the OS and apply platform-specific code or styles within the same app.

2. Step 2: Apply conditional rendering for customization

   You can write shared code but customize UI parts like buttons differently for iOS and Android using Platform checks.

3. Final Answer:

   Use Platform module to conditionally render different styles or components for each platform -> Option A

4. Quick Check:

   Platform module enables platform-specific customization [OK]

Hint: Use Platform module to customize per OS without separate apps [OK]

Common Mistakes:

• Thinking you must write separate apps for each platform
• Assuming React Native can't customize UI per platform
• Confusing React Native with web-only solutions