Navigation parameters and options in React Native allow screens to pass data between each other and dynamically control headers, titles, buttons, and styles. They are commonly used with React Navigation.
Navigation params are passed using the navigate() method. Options are configured using options or setOptions().
// Navigate to Details screen with parameters
navigation.navigate("Details", {
id: 101,
name: "React Native"
});
// Access route parameters in destination screen
const { id, name } = route.params;
console.log(id, name);
// Dynamically update header options
React.useEffect(() => {
navigation.setOptions({
title: "Details Screen",
headerStyle: { backgroundColor: "#2563eb" },
headerTintColor: "#fff"
});
}, []);
The first screen sends data using navigation params. The destination screen reads those values from route.params. Header title and styles update dynamically using navigation options.
Use the mock phone below. Enter data on the "Home" screen and see how it is passed to the "Details" screen and how the header options (color) change dynamically.
*This simulates sending data to the next screen.
Recieved Data (route.params):
Notice the header color changed? This simulates navigation.setOptions.
Think of navigation params like function arguments. Each screen is a function, and params are the input values passed to it.
setOptions() for dynamic headers