React-native-screens: Header Component

[mezalejandro]

Hello everyone, is it possible to have a header component and not a string?

[WoLewicki]

What do you mean by "string"? Headers in native-stack are native components and can only be changed by the props regarding them: https://github.com/software-mansion/react-native-screens/tree/master/native-stack#options.

[mezalejandro]

Hello @WoLewicki I am testing like this:

const HomeStack = createNativeStackNavigator()

const HomeStackScreen = () => (
    <HomeStack.Navigator
        headerMode='screen'
        screenOptions={({ navigation, route }) => ({
            headerTitle: <LogoTitle navigation={navigation} route={route} />
        })}
    >
      <HomeStack.Screen name="Home" component={Home} />
      <HomeStack.Screen name="Nota" component={Nota}/>
    </HomeStack.Navigator>
)

but it does not work, like this if:

const HomeStackScreen = () => (
    <HomeStack.Navigator
        headerMode='screen'
        screenOptions={({ navigation, route }) => ({
            headerTitle: 'Header'
        })}
    >
      <HomeStack.Screen name="Home" component={Home} />
      <HomeStack.Screen name="Nota" component={Nota}/>
    </HomeStack.Navigator>
)

[WoLewicki]

Yes, but you have to use headerCenter: https://github.com/software-mansion/react-native-screens/tree/master/native-stack#headercenter

[WoLewicki]

I am closing this issue. Let me know if the solution is not what you are looking for in order to reopen it.

[Kailash23]

@WoLewicki
There should be a header prop also (like in navigation stack)
So that we can replace the whole header instead of specifying the left right and center header.
That will be helpful

[WoLewicki]

You can always set headerShown: false and apply your own header on top of the Screen component, it does not need to be controlled by native-stack. But we are considering exposing such an option in the future.