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

Build: Simple Text Screen

This screen shows a simple text message centered on the screen.

Target UI

---------------------
|                   |
|                   |
|   Hello, React!    |
|                   |
|                   |
---------------------

Display a Text component with the message 'Hello, React!'

Center the text horizontally and vertically on the screen

Use default styling for the text

Starter Code

React Native

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // TODO: Center content horizontally and vertically
  },
});

Task 1

Task 2

Solution

React Native

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

export default function SimpleTextScreen() {
  return (
    <View style={styles.container}>
      <Text>Hello, React!</Text>
    </View>
  );
}

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

We added a Text component inside the View to show the message 'Hello, React!'. To center the text, we used justifyContent: 'center' to center vertically and alignItems: 'center' to center horizontally in the container. The container uses flex: 1 to fill the screen space.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|   Hello, React!    |
|                   |
|                   |
---------------------

The text 'Hello, React!' is visible in the center of the screen

No user interaction is required for this screen

Stretch Goal

Change the text color to blue and increase the font size to 24.

💡 Hint

Add a style prop to the Text component with color: 'blue' and fontSize: 24.