Putting it together
- React Native course
- Beginner
- Lesson 116/116
- 6 min
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.
Practice 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.
Starter code
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])} />
{/* add a Details button */}
</View>
);
}
// add DetailsScreen
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} />
{/* add the Details screen */}
</Stack.Navigator>
</NavigationContainer>
);
}Sample 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.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do you pass params with navigate?
navigation.navigate('Details', ?)- { itemNo: 1 } Correct answer
- 1
- 'itemNo'
- [1]
Explanation: params are passed as an object { itemNo: 1 }.
2 Match: concept and usage
| Term | Meaning |
|---|---|
navigate |
screen opening |
goBack |
going back |
route.params |
data reading |
3 Fill in the blank: go back
navigation.____();navigation.goBack();Explanation: goBack returns you to the previous screen.