Expo Go for quick start in React Native - Mini App: Build & Ship

Build: Welcome Screen

A simple welcome screen app to demonstrate quick start with Expo Go. It shows a greeting message and a button to change the greeting.

Target UI

-----------------------
|                     |
|   Welcome to Expo!   |
|                     |
|   [Change Greeting]  |
|                     |
-----------------------

Display a centered text greeting 'Welcome to Expo!'

Add a button below the text labeled 'Change Greeting'

When the button is pressed, change the greeting text to 'Hello from Expo Go!'

Use React Native components and hooks

Ensure the UI is centered vertically and horizontally

Starter Code

React Native

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

export default function App() {
  // TODO: Add state for greeting text

  return (
    <View style={styles.container}>
      {/* TODO: Display greeting text here */}
      {/* TODO: Add button to change greeting */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Solution

React Native

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

export default function App() {
  const [greeting, setGreeting] = useState('Welcome to Expo!');

  const changeGreeting = () => {
    setGreeting('Hello from Expo Go!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.greetingText}>{greeting}</Text>
      <Button title="Change Greeting" onPress={changeGreeting} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  greetingText: {
    fontSize: 24,
    marginBottom: 20
  }
});

This app uses React Native with Expo Go to quickly create a simple welcome screen.

We use the useState hook to keep track of the greeting text. Initially, it shows 'Welcome to Expo!'.

The Text component displays the greeting, and the Button below it changes the greeting to 'Hello from Expo Go!' when pressed.

The View container uses flexbox to center the content both vertically and horizontally for a clean look.

Final Result

Completed Screen

-----------------------
|                     |
|   Hello from Expo Go!|
|                     |
|   [Change Greeting]  |
|                     |
-----------------------

User sees 'Welcome to Expo!' text centered on screen with a button labeled 'Change Greeting' below.

When user taps the button, the text changes to 'Hello from Expo Go!'.

Button remains visible for repeated taps but text stays the same after first change.

Stretch Goal

Add a reset button that changes the greeting back to 'Welcome to Expo!'

💡 Hint

Add another Button component with title 'Reset Greeting' and onPress handler that sets greeting state back to initial text.