I am using react navigation version 5.As per the react navigation docs the options
props of a screen applies the configuration to that particular screen. For common configuration we use screenOptions
, I have used the header
property in the options to show custom header in one screen but it is also visible in other screens of the stack in ios.Works fine in Android.
Here is the code
import * as React from 'react';import { View, Text } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';function HomeScreen({navigation}) { return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text onPress={()=>navigation.navigate('Details')}>Home Screen</Text></View> );}function DetailsScreen() { return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text></View> );}const Stack = createStackNavigator();function App() { return (<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} options={{ header:props=><View style={{backgroundColor:'red', height:80}} /> }} /><Stack.Screen name="Details" component={DetailsScreen} options={{ headerShown: false }} /></Stack.Navigator></NavigationContainer> );}export default App;
The red header is visible on DetailsScreen
also.