0

I followed the tutorial on this link https://callstack.github.io/react-native-paper/docs/guides/react-navigation/#adding-appbar for your reference.

I have a custom header AppHeader from React Native Paper. Below is the code:

import { Appbar } from 'react-native-paper';

const AppHeader = ({ navigation, back }) => {

    const _goBack = () => navigation.pop();

    const _handleProfile = () => navigation.navigate('Profile');

    const _handleMore = () => console.log('Shown more');

    return (
        <Appbar.Header>
            {back ? <Appbar.BackAction onPress={_goBack} /> : null}
            <Appbar.Content title='This is my sample title' />
            <Appbar.Action icon="account-circle-outline" onPress={_handleProfile} />
            <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
        </Appbar.Header>
    )
}

Then below is the code for the navigation on App.js:

import AppHeader from './components/AppHeader';

const App = () => {

  return (
    <PaperProvider theme={theme}>
      <NavigationContainer theme={LightTheme}>
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
            header: (props) => <AppHeader {...props} />,
            ...TransitionPresets.FadeFromBottomAndroid,
          }}
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
          <Stack.Screen name="About" component={AboutScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>

  );
}

I have three different screen that uses the navigation header, how can I change the title (in this case This is my sample title to the title that I want depending on the screen? For example change the title to Home when on HomeScreen, About on AboutScreen and so on.

Below are image for reference:

Home Screen

enter image description here

Details Screen

enter image description here

serking
  • 111
  • 8

1 Answers1

0

I've adjusted the documentation you're following and modified it to explain how to get the title for the screen.

https://callstack.github.io/react-native-paper/docs/guides/react-navigation

happiryu
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – devpolo Mar 29 '23 at 12:45