Search⌘ K
AI Features
Home
Courses
Getting Started with Mobile App Development with React Native

Solution Review: Navigation

Learn to implement stack-based navigation in React Native by reviewing a complete solution. Understand screen configuration, navigation props, and passing route parameters to build seamless mobile app navigation.

We'll cover the following...

The Android widget below contains the solution to the challenge. We will also go through a step-by-step explanation of the solution.

Note: Click the “Run” button on the Android widget below to execute the program. Wait for the program to compile inside the “Terminal” tab of the widget, and then switch to the “Output” tab once the program has been successfully compiled.

Solution

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

const WelcomeScreen = ({route}) => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}> { route.params.parameter } </Text>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    text: {
        fontSize: 40,
        marginBottom: 20
    }
});

export default WelcomeScreen;
Coding playground

In the solution code provided above:

  • In the App.js ...