route.params never updates react navigation v5

Question

The problems is that when I move to a certain screen my headerTitle only sets the initial route.params.counter value but does not update even though counter value is changing every second.

route.params.counter in my "ChatMessage" screen doesnt update at all, the value is the initial value when the screen mounts. If i go back the counter is updating as one would expect but again once i press the button to move to the "ChatMessage" screen it only has the last captured value of the counter before it mounted. doing a console.log confirms the route.params.counter value stays the same, it never changes unless i go back and press the button again.

I currently have a subscription which updates about every 30 seconds which tells me whether my user is online or not, ive represented this subscription with a timer.

you can check out this snack which demos the issue that route.params dont update in the next screen.

How can I dynamically change the header title based on my counter value using a functional component?

here is my stack navigation setup

export default function MainStack({ navigation }) {
  return (
    <Stack.Navigator
        {...}
    >
      <Stack.Screen
         {...}
      />
      <Stack.Screen
        {...}
      />
      <Stack.Screen
        options={({ route }) => ({
          headerTitle: route.params.counter,
          headerTitleAlign: 'center',
          headerBackTitleVisible: true
        })}
        name='ChatMessage'
        component={ChatMessage}
      />
    </Stack.Navigator>
  );
}

and here is my component

export default () => {
  const [counter, setCounter] = useState(0);
  // (hooks)
  const navigation = useNavigation();

  useEffect(() => {
    function fn01sec() {
      setCounter((prevCount) => prevCount + 1);

     // does nothing ive tried
     // navigation.setParams('ChatMessage', {
     //   counter: counter
     // });
    }
    fn01sec();
    const interval = setInterval(fn01sec, 1000);

    return function cleanup() {
      clearInterval(interval);
    };
  }, []);

  return (
    <ChannelWrapper>
      <Button
        title='go next screen'
        onPress={() =>
          navigation.navigate('ChatMessage', {
            counter: counter
          })
        }
      />
      <Text>counter: {counter}</Text>
    </ChannelWrapper>
  );
};

score 0 · Answer 1 · answered Mar 30 '21 at 21:20

What if you pass your dynamic props as props of a child component of the chat <Stack.Screen /> component?

<Stack.Screen name="ChatMessage">
  {props => <ChatMessage headerTitle={route.params.counter} headerTitleAlign="center" headerBackTitleVisible {...props} />}
</ Stack.Screen>

I was having a hard time with a similar situation and this approach solved the problem for me.

Reference: https://reactnavigation.org/docs/screen/#children

route.params never updates react navigation v5

1 Answers1