When swiping left on Android, part of the previous screen is shown

[johannesfor]

Hi, I have a custom PageComponent that has a lot of nested elements like views, pressables, buttons, texts etc.

The problem now is, when I swipe left (most of the time) a part of the previous screen is shown after the swipe is finished. On IPhone I don't have this Problem, only on Android. When I removed some of the elements of my custom PageComponent it worked!

Here is an image of the problem. I added a red border to the Animated.View in the PageWrapper:

It should look like this instead:

When I move the screen (trigger the animation) it gets fixed. After many hours I found this workaround. It just rerenders the PageWrapperComponent on Android if the focusAnim is an integer (animation ended) and the isActive changed (so that only the relevant PageWrappers get rerenderd).

PageWrapper:

    //Add helper state to force re-render on Android
    const [rerender, setRerender] = useState(0);
    //Force re-render on Android when focusAnim is an integer and the isActive changed
    useEffect(() => {
      if (Platform.OS === "android" && Number.isInteger(focusAnim.value)) {
        setRerender(rerender => rerender + 1);
      }
    }, [isActive]);

I did not understand what EXACTLY the problem is, but rerendering the screen fixes the issue.

[pehkay]

In my case, it was the re-rendering issue when the index passed in to the renderItem component sometimes could be undefined or not was expected.

[pehkay]

Hmm, rotating it, will also cause this issue.