Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Header of one screen visible in all screens of Stack Navigator in IOS

$
0
0

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.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>