React Native
Putting it together
Combine all parts into a working final app.
Adding a Details screen
In the final step we will add a DetailsScreen and navigate to it from HomeScreen. DetailsScreen reads the itemNo param from the route prop and displays it in a <Text>. A <Button> calls navigation.goBack() to return.
We add a Button to HomeScreen: when pressed it calls navigation.navigate('Details', { itemNo: 1 }). We add <Stack.Screen name="Details" component={DetailsScreen} /> inside Stack.Navigator. This completes the app: you can add items, navigate to details and go back.
Exercise Your turn: Details screen and navigation
Add a DetailsScreen component: it should receive route and navigation props, read itemNo from route.params, display it in a <Text>, and call navigation.goBack() from a <Button>. Add a Button to HomeScreen: in its onPress call navigation.navigate('Details', { itemNo: 1 }). Add <Stack.Screen name="Details" component={DetailsScreen} /> inside Stack.Navigator.
Show example solution
import { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation }) {
const [text, setText] = useState('');
const [items, setItems] = useState([]);
return (
<View style={styles.container}>
<Text>Shopping List</Text>
<TextInput value={text} onChangeText={setText} placeholder="Item name" style={styles.input} />
<Button title="Add" onPress={() => setItems([...items, text])} />
<Button title="Details" onPress={() => navigation.navigate('Details', { itemNo: 1 })} />
</View>
);
}
function DetailsScreen({ route, navigation }) {
const { itemNo } = route.params;
return (
<View style={styles.container}>
<Text>Item no: {itemNo}</Text>
<Button title="Back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createNativeStackNavigator();
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Integration
You have reached the end of the project! Now all pieces have come together: skeleton with View and Text, user input with TextInput, state management with useState, interaction with Button and screen transitions with navigation.
This project is the summary of the beginner level. Every concept you learned was used in a real app: adding items, viewing details and going back. In the next level you will see more complex state management, list optimization and data fetching.
Test yourself
-
How do you pass params with navigate?
navigation.navigate('Details', ?)
- { itemNo: 1 }
- 1
- 'itemNo'
- [1]
Show answer
{ itemNo: 1 } — params are passed as an object { itemNo: 1 }.
-
Match: concept and usage
- navigate
- screen opening
- goBack
- going back
- route.params
- data reading
-
Fill in the blank: go back
navigation.____();
Show answer
navigation.goBack();
Next lesson: Beginner section exam
