[Bug]: BottomSheet Disappears on Android after Location Permissions

[lxr-mwhite]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

On Android, the BottomSheet disappears if it's mounted at the same time as a location permission request, after interacting with the dialog and a child component of the BottomSheet is re-rendered.

Using react-native-reanimated v4.3.1.

Reproduction steps

• Launch an app on Android for the first time, or with location permissions set to "Ask every time"
• Request permission for the user's location
• Render a BottomSheet component on launch
• Trigger a state change that updates a child component

Example:

import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import Permissions, { PERMISSIONS } from 'react-native-permissions';

const LOCATION_PERMISSION = PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION;

const App = () => {
  const [locationStatus, setLocationStatus] = useState('undetermined');

  const requestLocationPermission = useCallback(async () => {
    const checkStatus = await Permissions.check(LOCATION_PERMISSION);
    let hasLocationPermission = checkStatus === Permissions.RESULTS.GRANTED;
    if (!hasLocationPermission) {
      const requestStatus = await Permissions.request(LOCATION_PERMISSION);
      hasLocationPermission = requestStatus === Permissions.RESULTS.GRANTED;
    }
    return hasLocationPermission;
  }, []);

  useEffect(() => {
    requestLocationPermission().then((hasLocationPermission) =>
      setLocationStatus(hasLocationPermission ? 'authorized' : 'not allowed')
    );
  }, [requestLocationPermission]);

  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet index={2} snapPoints={[120, 500, 750]} enableDynamicSizing={false} animateOnMount={false}>
        <BottomSheetView style={styles.content}>
          <Text>{locationStatus}</Text>
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#00ffff'
  },
  content: {
    flex: 1,
    backgroundColor: '#eeeeee',
    padding: 20,
    alignItems: 'center'
  }
});

Reproduction sample

https://snack.expo.dev/@gorhom/bottom-sheet---issue-reproduction-template

Relevant log output

[VariabileAleatoria]

Facing similar issue when coming back from document-picker prompt

[lxr-mwhite]

Facing similar issue when coming back from document-picker prompt

@VariabileAleatoria As a workaround I found that toggling the enableDynamicSizingProp restored the BottomSheet. While it's not great and I hope to see a permanent fix for the issue, it's better than the BottomSheet not being visible at all.

[xixoecu-beep]

Same issue

[rozhkovs]

I ran into a very similar Android-only issue after moving to Expo 56 / RN 0.85 / Reanimated 4.

In my case, BottomSheetModal sometimes disappeared after opening a system picker, such as file picker or gallery, and then returning to the app with the Android back button. The backdrop was still visible and interactive, but the sheet content was missing, or only a thin strip/handle was visible above the navigation bar.

The issue was intermittent and did not reproduce 100% consistently, but it happened often enough during repeated attempts. The reproduction rate seemed higher when opening the picker shortly after navigating to the document screen.

The bottom sheet state looked correct in logs (index: 0, opacity: 1, expected position), so it did not look like a snap point or layout calculation issue. It felt more like stale native/Fabric animated props after returning from an Android Activity.

This workaround seems to have helped in my app, although I'm not fully sure it is the correct long-term fix:

{
  "reanimated": {
    "staticFeatureFlags": {
      "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false
    }
  }
}

A native rebuild is required after changing this flag.

This Reanimated issue looks related/similar: software-mansion/react-native-reanimated#9635

[lxr-mwhite]

@rozhkovs Thank you for raising this, I’ll give it a try. Have you noticed any other side effects as a result of disabling this feature flag?

[rozhkovs]

@rozhkovs Thank you for raising this, I’ll give it a try. Have you noticed any other side effects as a result of disabling this feature flag?

I did not find any other side effects.

[lxr-mwhite]

This workaround seems to have helped in my app, although I'm not fully sure it is the correct long-term fix:

{
"reanimated": {
"staticFeatureFlags": {
"FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false
}
}
}
A native rebuild is required after changing this flag.

This Reanimated issue looks related/similar: software-mansion/react-native-reanimated#9635

This has also fixed the issue for me, as well as another issue where the BottomSheet could disappear randomly after an app launch without any system alert being displayed.

I don't think it's a long term fix either but it can provide us with temporary relief until a proper fix is implemented. Given that it is a feature flag that I anticipate will eventually be removed and this functionality will be the new default, I will leave this issue open.

[LeCiel]

I have exactly same issue, on both iOS and Android. Not only Gorhom bottom sheet, but also "any" Animated.View lost its animatedStyle values. It happens randomly just after committing something big renderings, such as FlatList with complicated child views. I guess for some reason, Fabric drops reanimated values on heavy rendering.
I don't know if dev notices this, but hope they fix the issue asap.