Custom header component in React-Native vesion 0.63 (Confusion in the documentation of React-Native Naviagtion)

Question

I have been reading the document for React-Native Navigation. In the section for header bar configuration, it gives an example to render a custom header like so:

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

I am having confusion with **options={{ headerTitle: props => <LogoTitle {...props} /> }}** what props are being passed to the LogoTitle component?

Answer 1

Only props that are relevant to the headerTitle option. To find out, add a console.log() to the following, and check the console.log.

function LogoTitle(props) {
  console.log('props = ', props);
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}