The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.1, latest: 6.1.7)
• @react-navigation/bottom-tabs (found: 6.5.2, latest: 6.5.8)
• @react-navigation/drawer (found: 6.5.7, latest: 6.6.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

The behavior persists even after upgrading to the latest versions

For what it's worth - I am experiencing similar navigation event lag w/ bottom tabs.

App is built with Expo, on SDK 49.

I just tested switching from hermes back to jsc -- and my navigation speed issues improved considerably.

I just tested switching from hermes back to jsc -- and my navigation speed issues improved considerably.

@trattles thanks for sharing! However, I tried the same thing in my app, and actually, it became slower.

App is built with Expo, on SDK 49.

Same here.

I've started to believe it might be related to React 18 Automatic Batching feature, but i'm not sure how this relates with React Navigation. I couldn't find anything on the docs. However, it noticeably affects navigation performance.

I'm still looking into it and would appreciate if anyone has any inputs to share on this.

@rnqs i'm in the same boat.

I've started to believe it might be related to React 18 Automatic Batching feature, but i'm not sure how this relates with React Navigation. I couldn't find anything on the docs. However, it noticeably affects navigation performance.

I'm still looking into it and would appreciate if anyone has any inputs to share on this.

@rnqs How can I confirm if the issue is caused by the React 18 Automatic Batching feature? Is there a way to adjust this issue with React Navigation? I've also encountered a similar performance problem.

Same problem for me, do you find any solution or temp fix ?

@rnqs How can I confirm if the issue is caused by the React 18 Automatic Batching feature? Is there a way to adjust this issue with React Navigation? I've also encountered a similar performance problem.

I just suspect the issue might be related to React 18 Automatic Batching.

Same problem for me, do you find any solution or temp fix ?

Unfortunately, I haven't found any solution or temp fix for this problem thus far.

I'd really appreciate it if someone with a more in-depth knowledge of this library could take a look at this.

Is there any update on this issue, I've been noticing very similar behaviour due to the fact the default implementation awaits everything to render within the screen before transitioning. Haven't found a viable solution as of yet.

I've posted a proposed fix, please verify that it solves your problems as well 👍

I was changing a state in a custom hook, however I had that deley when changing the state, I solved it by adding a setTimeout to change the state, Example:

const [isActive, setIsActive] = useState(true);

const subscribe = () => {
  setTimeout(() => {
    setIsActive(true);
  }, 300);
};

const unsubscribe = () => {
  setTimeout(() => {
    setIsActive(false);
  }, 300);
};

useFocusEffect(
  useCallback(() => {
    subscribe();

    return () => unsubscribe();
  }, [])
);

this is still happening. removing useIsFocused() solved the issue

I was changing a state in a custom hook, however I had that deley when changing the state, I solved it by adding a setTimeout to change the state, Example:

const [isActive, setIsActive] = useState(true);

const subscribe = () => {
  setTimeout(() => {
    setIsActive(true);
  }, 300);
};

const unsubscribe = () => {
  setTimeout(() => {
    setIsActive(false);
  }, 300);
};

useFocusEffect(
  useCallback(() => {
    subscribe();

    return () => unsubscribe();
  }, [])
);

Not works for me facing same issue