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.

Practice

1. Why do React Native core components create a better user experience on mobile devices?

easy

A. Because they only work on Android devices

B. Because they use web views to display content

C. Because they render real native UI elements on iOS and Android

D. Because they require manual native code for UI

Solution

1. Step 1: Understand core components role

   Core components like View and Text map directly to native UI elements on each platform.

2. Step 2: Compare with other methods

   Unlike web views, core components use native widgets, making apps faster and smoother.

3. Final Answer:

   Because they render real native UI elements on iOS and Android -> Option C

4. Quick Check:

   Native UI = Better user experience [OK]

Hint: Core components map to native widgets, not web views [OK]

Common Mistakes:

• Thinking React Native uses web views for UI
• Believing core components only work on Android
• Assuming manual native code is always needed

2. Which of the following is the correct way to create a text element using React Native core components?

easy

A. Hello World

B. Hello World

C. Hello World

D. Hello World

Solution

1. Step 1: Identify React Native core text component

   React Native uses Text with capital T as a core component for displaying text.

2. Step 2: Check JSX syntax

   Lowercase text or HTML tags like div and p are not valid in React Native JSX.

3. Final Answer:

   <Text>Hello World</Text> -> Option B

4. Quick Check:

   Use capitalized core components [OK]

Hint: React Native core components start with uppercase letters [OK]

Common Mistakes:

• Using lowercase tags like <text>
• Using HTML tags like <div> or <p>
• Confusing React Native with web React syntax

3. What will the following React Native code display on a device screen?

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

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

medium

A. A native screen showing the text 'Welcome!'

B. An error because <View> is not a valid component

C. A blank screen with no text

D. A web page with 'Welcome!' inside a div

Solution

1. Step 1: Analyze component imports

   The code imports View and Text from React Native core components, which render native UI elements.

2. Step 2: Understand JSX output

   The App function returns a View containing a Text element with 'Welcome!'. This displays as native UI text on the device.

3. Final Answer:

   A native screen showing the text 'Welcome!' -> Option A

4. Quick Check:

   Core components render native UI [OK]

Hint: Core components produce native UI, not web elements [OK]

Common Mistakes:

• Thinking <View> is invalid in React Native
• Expecting web HTML output
• Assuming no text will show without styles

4. Identify the error in this React Native code snippet:

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

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

medium

A. JSX cannot return multiple elements

B. Text should be lowercase

C. Missing import for view

D. view should be capitalized as View

Solution

1. Step 1: Check component capitalization

   React Native core components must start with uppercase letters. Here, view is lowercase, causing an error.

2. Step 2: Confirm correct usage

   Changing view to View fixes the error. Text is correctly capitalized.

3. Final Answer:

   <view> should be capitalized as <View> -> Option D

4. Quick Check:

   Core components start uppercase [OK]

Hint: Always capitalize React Native core components [OK]

Common Mistakes:

• Using lowercase component names
• Confusing import errors with JSX errors
• Thinking multiple JSX elements need wrapping

5. You want to create a button that looks native on both iOS and Android using React Native core components. Which approach best achieves this?

hard

A. Use the Button core component which renders native buttons on each platform

B. Use a View with a Text and style it manually

C. Use an HTML button tag inside React Native JSX

D. Write separate native code for iOS and Android buttons

Solution

1. Step 1: Identify React Native core button component

   The Button core component automatically renders native buttons on iOS and Android.

2. Step 2: Compare alternatives

   Styling a View and Text manually won't produce native behavior. HTML button is invalid in React Native. Writing separate native code is complex and unnecessary.

3. Final Answer:

   Use the <Button> core component which renders native buttons on each platform -> Option A

4. Quick Check:

   Core components provide native UI easily [OK]

Hint: Use core <Button> for native look on both platforms [OK]

Common Mistakes:

• Trying to use HTML tags in React Native
• Manually styling views instead of using core Button
• Thinking native code is always required