Why core components build native UIs in React Native - Build It to Prove It

Build: Native UI Explanation

This screen explains why React Native core components build native UIs instead of web views.

Target UI

-------------------------
| Why Core Components?   |
|-----------------------|
| React Native uses      |
| core components like   |
| View, Text, and Image  |
| to create native UI.   |
|                       |
| This means your app    |
| looks and feels like   |
| a real native app.     |
|                       |
| [OK]                  |
-------------------------

Display a header with the title 'Why Core Components?'

Show a multiline text explaining that React Native core components build native UI elements.

Add a button labeled 'OK' at the bottom that closes the screen (for this exercise, just a placeholder).

Use React Native core components only (View, Text, Button).

Style the screen with padding and center the content vertically.

Starter Code

React Native

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

export default function NativeUIExplanation() {
  return (
    <View style={styles.container}>
      {/* TODO: Add header text here */}
      {/* TODO: Add explanation text here */}
      {/* TODO: Add OK button here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#fff'
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function NativeUIExplanation() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Why Core Components?</Text>
      <Text style={styles.paragraph}>
        React Native uses core components like View, Text, and Image to create native UI.
        This means your app looks and feels like a real native app.
      </Text>
      <Button title="OK" onPress={() => { /* Placeholder for close action */ }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center'
  },
  paragraph: {
    fontSize: 16,
    marginBottom: 40,
    textAlign: 'center'
  }
});

This screen uses React Native core components View, Text, and Button to build a native user interface.

The View acts as a container with padding and centers content vertically.

The header text uses a larger, bold font to stand out.

The paragraph explains that React Native core components map directly to native UI elements, so the app looks and feels like a real native app, not a web page.

The Button is a native button component with a simple placeholder action.

Final Result

Completed Screen

-------------------------
| Why Core Components?   |
|-----------------------|
| React Native uses      |
| core components like   |
| View, Text, and Image  |
| to create native UI.   |
|                       |
| This means your app    |
| looks and feels like   |
| a real native app.     |
|                       |
| [OK]                  |
-------------------------

User sees the explanation text centered on the screen.

User taps the OK button, which currently does nothing (placeholder).

Stretch Goal

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

💡 Hint

Use React useState to track dark mode and conditionally apply styles.