First React Native app - Mini App: Build & Ship

Build: WelcomeScreen

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

Target UI

---------------------
|                   |
|                   |
|                   |
|   Welcome to the  |
|     React Native  |
|        App!       |
|                   |
|                   |
|                   |
---------------------

Display a centered text message: 'Welcome to the React Native App!'

Use a View container with proper styling to center the text vertically and horizontally

Use a Text component for the message

Apply basic styling: font size 24, bold text

Starter Code

React Native

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // TODO: Add styles to center content
  },
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function WelcomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>Welcome to the React Native App!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000'
  }
});

We use a View as the main container and apply flex: 1 to fill the screen. The justifyContent: 'center' and alignItems: 'center' styles center the content vertically and horizontally, just like placing a picture in the middle of a frame. The Text component displays the welcome message with a larger font size and bold weight to make it stand out.

This simple layout is a great first step to understand how React Native arranges components on the screen.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|                   |
|   Welcome to the  |
|     React Native  |
|        App!       |
|                   |
|                   |
|                   |
---------------------

The screen shows the welcome message centered vertically and horizontally.

No buttons or gestures are active on this screen.

Stretch Goal

Add a button below the welcome message that shows an alert saying 'Button pressed!' when tapped.

💡 Hint

Use the <Button> component from 'react-native' and the Alert API to show a simple popup.