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.