Couldn't find a route object. Is your component inside a screen in a navigator? React Native

Question

I am developing a multi page app using stack navigators in react native. While navigating to different pages, I may/may not pass data, but in some cases like 'Chat' I do pass the userB data to ChatScreen which is defined inside the StackNavigator , so in order to change the Header of my ChatScreen to userB 's displayName, I created a custom headerTitle component for it and passed as a prop in Stack.Screen . Below is the code:

<Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{headerTitle: HomeHeader}}
      />
      <Stack.Screen
        name="Chat"
        component={ChatScreen}
        options={{headerTitle: (props) => <ChatHeader {...props} />}} // PROBLEM IS HERE...
      />
      <Stack.Screen
        name="Contacts"
        component={ContactScreen}
        options={{title: 'Select Contact'}}
      />
    </Stack.Navigator>

Now, In someother component, I pass some data to Chat screen:

const ContactItem = ({item}) => {
  const navigator = useNavigation();
  const {phone, name, profile} = item;
  const [userB, setUserB] = useState(null);

  return (
    <TouchableOpacity
      onPress={() => {
        const formattedPhone = reformat(phone);
        getUserDetails(formattedPhone, setUserB);
        if (userB) {
          console.log(userB);
          navigator.navigate('Chat', {
            user: userB,
          });
        } else {
          ToastMessage(`User with phone number ${formattedPhone} does not exist`);
        }
      }}>
    </TouchableOpacity>
  );
};

Now, while navigating to Chat I'm passing userB data to Chat Screen I'm getting the following details in ChatHeader component:

const ChatHeader = () => {
  const navigator = useNavigation();
  const {params} = useRoute();
  const {user} = params;
  console.log(user);

  return (
    <View style={styles.container}>
      <TouchableOpacity>
        <Image
          source={require('../../../assets/images/user-icon.png')}
          style={styles.image}
        />
      </TouchableOpacity>

      <View style={styles.headerTextContainer}>
        <Text style={styles.headerText}>{user.name}</Text>
      </View>
    </View>
  );
};

Error:

Warning: Cannot update a component (`NativeStackNavigator`) while rendering a different component (`ChatScreen`). To locate the bad setState() call inside `ChatScreen`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render  in ChatScreen (at SceneView.tsx:126).

Error: Couldn't find a route object. Is your component inside a screen in a navigator?  This error is located at:in ChatHeader (at navigation/index.js:47)

As I'm passing the props in Stack.Screen options={{headerTitle: (props) => <ChatHeader {...props} />}} so this ensures that I should be able to inherit the data in ChatHeader which is passed to Chat screen component right? But that is not the case...

Can someone help me?

Thank you!

Answer 1

React Navigation doc's says :

In order to use params in the title, we need to make options prop for the screen a function that returns a configuration object.

So you have to change

options={{headerTitle: (props) => <ChatHeader {...props} />}}

to

options={(props) => ({headerTitle: <ChatHeader {...props} />})}