0
0
React Nativemobile~10 mins

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

Choose your learning style9 modes available
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.