Dynamic header title.

[BatuhanCakir]

Hi,
I have a dynamic route [detailScan], but the header title of that route should be dynamic. How can i do this ?

[marklawlor]

We haven't got documentation on this yet, but since the layouts are simply React Navigation layouts, you can follow the React Navigation documentation https://reactnavigation.org/docs/headers/#replacing-the-title-with-a-custom-component

[marcelobettini]

Just type headerTitle: YourVariableHere

[nikodunk]

You can do it in _layout.tsx as above docs say, but you can also do it simply in [detailScan].tsx itself as is less clear from the docs IMO. You can change the title like so:

import { Stack } from 'expo-router'

export default function DetailScan(...){
 ...

   return(
     <>
        ....
         <Stack.Screen options={{ title: yourTitleVar }} />
        ....
     <>
   )
}

[fabiancarlos]

If i remember, expo uses react-navigation, maybe you can do this on the current component screen:

useEffect(() => {
  navigation.setOptions({
    title: "HEEEEYY DUDE",
  });
}, [navigation]);

[Mohammad-Alismael]

this solution makes the most sense

[nikodunk]

Or in expo-router you can also do:

import { Stack, useLocalSearchParams } from "expo-router";



export default function Detail() {
  const title = "your dynamic title from params or computed"
    return (
      <ScrollView>
        <Stack.Screen
          options={{
            title: `${title} <= dynamic title`
          }}
        />
        <Text>Your normal components</Text>
      <ScrollView>
    )
}