View component in React Native - Mini App: Build & Ship

Build: Simple View Screen

This screen shows how to use the View component to create a colored box with some text inside.

Target UI

---------------------
|                   |
|   [ Blue Box ]    |
|   Hello inside    |
|                   |
---------------------

Use a View component with a blue background color

Inside the View, place a Text component with the text 'Hello inside'

Center the text horizontally and vertically inside the View

Set the View size to 200x100 pixels

Add some margin around the View

Starter Code

React Native

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

export default function SimpleViewScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Add your View and Text components here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function SimpleViewScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.blueBox}>
        <Text style={styles.text}>Hello inside</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  blueBox: {
    backgroundColor: 'blue',
    width: 200,
    height: 100,
    margin: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

We created a blue box using a View component styled with a blue background, fixed width and height, and margin for spacing. Inside this View, we placed a Text component with white color to contrast the blue background. We used justifyContent and alignItems to center the text horizontally and vertically inside the box. The outer container View centers the blue box on the screen.

Final Result

Completed Screen

---------------------
|                   |
|   [ Blue Box ]    |
|   Hello inside    |
|                   |
---------------------

The screen shows a blue rectangle centered on the screen.

Inside the blue rectangle, the white text 'Hello inside' is centered.

No user interaction is required for this screen.

Stretch Goal

Add a red border around the blue box with rounded corners

💡 Hint

Use the borderColor, borderWidth, and borderRadius style properties on the blue box View.

Practice

1. What is the primary purpose of the View component in React Native?

easy

A. To act as a container for layout and styling

B. To display text content

C. To handle user input events

D. To fetch data from the internet

Solution

1. Step 1: Understand the role of View

   The View component is designed to hold other components and arrange them visually.

2. Step 2: Differentiate from other components

   Text displays text, input handles user input, and data fetching is done elsewhere, not by View.

3. Final Answer:

   To act as a container for layout and styling -> Option A

4. Quick Check:

   View = container for layout [OK]

Hint: View is like a box to hold and arrange items [OK]

Common Mistakes:

• Confusing View with Text component
• Thinking View handles user input directly
• Assuming View fetches data

2. Which of the following is the correct way to create a View with a red background in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React Native style syntax

   React Native uses a style prop with an object, e.g., style={{backgroundColor: 'red'}}.

2. Step 2: Identify incorrect syntax

   Props like bgColor or background are not valid; style as string is invalid in React Native.

3. Final Answer:

   <View style={{backgroundColor: 'red'}}></View> -> Option C

4. Quick Check:

   Use style={{backgroundColor: 'color'}} [OK]

Hint: Use style={{backgroundColor: 'color'}} for colors [OK]

Common Mistakes:

• Using HTML style string instead of object
• Using invalid props like bgColor
• Forgetting double curly braces for style

3. What will be the visible result of this code?

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

export default function App() {
  return (
    
      One
      Two
      Three
    
  );
}

medium

A. The texts appear stacked vertically

B. The texts 'One', 'Two', 'Three' appear side by side horizontally

C. Only 'One' is visible

D. The app crashes due to syntax error

Solution

1. Step 1: Understand flexDirection in View

   Setting flexDirection to 'row' arranges children horizontally in a row.

2. Step 2: Check children components

   Three Text components will appear side by side: 'One', 'Two', 'Three'.

3. Final Answer:

   The texts 'One', 'Two', 'Three' appear side by side horizontally -> Option B

4. Quick Check:

   flexDirection: 'row' = horizontal layout [OK]

Hint: flexDirection: 'row' arranges children horizontally [OK]

Common Mistakes:

• Assuming default vertical stacking
• Confusing flexDirection values
• Thinking only one child shows

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

return (
  
    First
    Second
    Third
  
  Outside
);

medium

A. Multiple root elements without a wrapper

B. Invalid style property 'flexDirection'

C. Text components cannot be children of View

D. Missing import for Text component

Solution

1. Step 1: Check JSX root elements

   JSX must return a single root element; here, View and Text are siblings without a wrapper.

2. Step 2: Validate style and imports

   flexDirection: 'column' is valid; Text inside View is allowed; assume imports are correct.

3. Final Answer:

   Multiple root elements without a wrapper -> Option A

4. Quick Check:

   JSX needs one root element [OK]

Hint: Wrap siblings in one parent View or Fragment [OK]

Common Mistakes:

• Trying to return multiple root elements
• Misunderstanding flexDirection usage
• Assuming Text can't be inside View

5. You want to create a View that fills the entire screen and centers its child Text both vertically and horizontally. Which style object achieves this?

hard

A. {flexGrow: 0, justifyContent: 'flex-start', alignItems: 'flex-start'}

B. {width: '100%', height: '100%', textAlign: 'center'}

C. {position: 'absolute', top: 0, left: 0}

D. {flex: 1, justifyContent: 'center', alignItems: 'center'}

Solution

1. Step 1: Make View fill screen

   Using flex: 1 makes the View expand to fill available space.

2. Step 2: Center children vertically and horizontally

   justifyContent: 'center' centers vertically; alignItems: 'center' centers horizontally.

3. Final Answer:

   {flex: 1, justifyContent: 'center', alignItems: 'center'} -> Option D

4. Quick Check:

   flex:1 + justifyContent + alignItems centers content [OK]

Hint: Use flex:1 with justifyContent and alignItems center [OK]

Common Mistakes:

• Using textAlign on View instead of Text
• Not setting flex to fill space
• Using position absolute without centering