gestureHandlerRootHOC forces reload every time on iOS

[timothyerwin]

Description

I was trying to understand why my component was reloading every time I came back from a background state on iOS and I found out it was this code gestureHandlerRootHOC...if I remove it suddenly there is no refresh.

According to the docs it should just be a no-op on iOS...it however seems to actually be doing more than just that. I can't remember why I switched from the root level to this but I think it was to fix some issue.

Anyway, what can I do to fix this?

Steps to reproduce

1. Forces component reload every time you tap the app from iOS

 <Stack.Screen
          name="/chats/channel"
          options={{
            title: 'Chat',
            headerShown: true,
          }}
          component={gestureHandlerRootHOC(ChatChannelScreen)}
        />

2. Works as expected and maintains state

 <Stack.Screen
          name="/chats/channel"
          options={{
            title: 'Chat',
            headerShown: true,
          }}
          component={ChatChannelScreen}
        />

Snack or a link to a repository

https://stackoverflow.com/help/mcve

Gesture Handler version

2.13.4

React Native version

0.72

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[j-piasecki]

Could you check whether

const GestureEnabledChatChannelScreen = gestureHandlerRootHOC(ChatChannelScreen);

 <Stack.Screen
          name="/chats/channel"
          options={{
            title: 'Chat',
            headerShown: true,
          }}
          component={GestureEnabledChatChannelScreen}
        />

works as expected? It's likely caused by the function being called on every render and returning a newly created component every time.

[timothyerwin]

strange, but that appears to have fixed it...can you explain why? is the true issue coming from Stack.Screen? I guess not since that would also have refreshed the original component that worked...I'm still confused :)

[j-piasecki]

It's not an issue actually, but the expected behavior.

gestureHandlerRootHOC creates a new component every time you call it. When you come back to the app, the Screen renders its component prop. When you pass gestureHandlerRootHOC(ChatChannelScreen) directly to the prop, it's called every time you come back from the background, and it creates a new component each time. Since the new component is different from the previous one, it's rendered again.

When you first assign the result of gestureHandlerRootHOC(ChatChannelScreen) to a variable, it creates the new component only once. When you then pass that variable to the component prop, Screen renders exactly the same component each time, so React is able to optimize it.