App freeze on android

[Hrmojtahed]

portal package on ios works fine,but on android app freeze. i use react-navigation and react-native-reanimated

[gurbela]

any news?

[rin2k]

react-native-reanimated and use portal => problem

[thanhnvpk01168]

@hodangnamtien I have to the same problem

[iamvucms]

Same problem. After two times make portal visible, android app become freeze

[miihauu]

I am facing the same problem. Any news with fix to this? @gorhom

[bartlomiejwendt]

The same issue on my end. Would be grateful for some updates about this issue from you. @gorhom

[AlanSl]

Could the underlying cause be similar to this (solved) issue on react-native-modalfy - https://github.com/colorfy-software/react-native-modalfy/issues/66?

They're doing a similar thing to this library (using context for pure-JS portal/modal-like behaviour without using React Native's Modal) and their issue was also specific to Android, and also seemed to happen when reanimated was in use and when the feature is used multiple times.

Looks like their issue turned out to be something to do with timing when elements inside the portal/pseudo-modal contained reanimated-powered enter/exit animations.

---

(off-topic - I don't know why there has been three comments on this issue in the last 20 minutes, mine is completely coincidental 😅)

[gorhom]

Any reproducible sample code to work on ?

[miihauu]

I am using react-native-portal with react-native-bottom-sheet.

Applying provider in App.tsx

const App = () => {
return (
<PortalProvider>
            <RootNavigator
                     initialState={initialNavigationState}
                     onStateChange={onNavigationStateChange}
              />
</PortalProvider>
)}

Using Portal with BottomSheet. This Sheet component is showing with Map (Mapbox library) in background.

const Sheet = () => {
  const { bottomSheetRef } = myContextHook()

  return (
    <Portal>
      <BottomSheet
        index={-1}
        ref={bottomSheetRef}
        snapPoints={[10, 75]}
        enablePanDownToClose
        backdropComponent={(props) => (
          <BottomSheetBackdrop {...props} pressBehavior={'close'} appearsOnIndex={0} disappearsOnIndex={-1} />
        )}
        onChange={() => {}}
      >
        <BottomSheetScrollView contentContainerStyle={{ paddingBottom: '8%' }}>
          <Box>
            My content
          </Box>
        </BottomSheetScrollView>
      </BottomSheet>
    </Portal>
  )
}

"dependencies": {
    "@gorhom/bottom-sheet": "^4.1.5",
    "@gorhom/portal": "^1.0.13",
    "react-native-reanimated": "^2.3.1",
    "react-native-screens": "3.10.2",

Issue appears only on Android. iOS works fine.

[AlanSl]

I tried a few combinations of reanimated animations, portals and navigators on a standalone app on an Android device, and couldn't replicate this. Even navigating during an exit animation in a portal worked fine.

So this is more subtle than "react-native-reanimated and use portal => problem". More example cases would help.

@miihauu There's a lot of possible causes in that example; dozens of animations within BottomSheet alone, plus the navigator. Does the issue still occur with that bottom-sheet / portal setup without the navigator? E.g. if you temporarily simplify it to this:

const App = () => {
return (
  <PortalProvider>
    <View>/* Some pressable that brings up the bottom sheet */</View>
    <Sheet /> 
  </PortalProvider>
)}

[miihauu]

@AlanSl Thank you for your involvment. I've figured out that app is not exactly freezing, but the bottom sheet is not reacting for dragging it down when it is wrapped in <Portal></Portal>. When I placed button inside sheet to closing it - it works, but I would like to have ability to use gestures. On iOS it works fine so only android devices have problems with that.

Thanks and still looking for solution for that.

[miihauu]

Ok, I have found a solution.

I wrapped my Portal provider with GestureHandlerRootView

<GestureHandlerRootView style={{ flex: 1 }}>
        <PortalProvider>
          <RootNavigator
                     initialState={initialNavigationState}
                     onStateChange={onNavigationStateChange}
              />
        </PortalProvider>
      </GestureHandlerRootView>

and my BottomSheet component looks like this:

<Portal>
   <BottomSheet {...props] >
      <Content />
   </BottomSheet>
</Portal>

From my side is closed. Thanks for help.

[gorhom]

thanks @miihauu & @AlanSl for investigating this issue, i have added a section in the readme for the usage with gesture handler.

i'll close the ticket, if someone still faces the issue, please create a new issue

[lightrow]

i just encountered this issue again. I think it might be due to "exiting" animation of an Animated.View. The structure i have is something like this

<PortalHost name="menu" />
<AppNavigator>
   ...many levels deeper a component that gets mounted/unmounted when menu is activated/dismissed
   <Portal hostName="menu">
      <Animated.View exiting={exitingAnimation} ...>
          ...
      </Animated.View>
   </Portal>

so maybe Animated.View tries to play its exiting animation but Portal does something upon unmount that breaks it all? But again it works fine on iOS...

[kunuit]

@lightrow I commented this "exiting" code then fine but without animated. when re-comment and after first-time call exiting => I don't see any bottom sheets. How can we fix it? And Seem I see a run function with 'worklet' maybe this bottomsheet also die

[truongnv98]

I'm currently using the react-native-portal and BottomSheet component from @gorhom/bottom-sheet. I realize that if I use this code, the app will freeze:

backdropComponent={props => ( <BottomSheetBackdrop {...props} appearsOnIndex={1} disappearsOnIndex={-1} /> )}

If I comment out the appearsOnIndex and disappearsOnIndex props, the app will work properly but there will be no backdrop.

And one more thing. I have this code in the MainActivity - onCreate function getWindow().setDecorFitsSystemWindows(false); to apply the Android Edge to Edge

@gorhom Can you please take a look