0
0
React Nativemobile~15 mins

First React Native app - Mini App: Build & Ship

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