[Bug]: The BottomSheetModal is not even opening at all

NickeNicrad commented 3 weeks ago

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

After upgrading to Expo 51 with React Native 0.74.5, my BottomSheet component stopped working and it cannot even open. I've reviewed my code and checked the documentation, but I haven't found any errors or issues to indicate what's wrong.

The BottomSheet is essential to my app, and I can't downgrade since it now relies on react-native-reanimated v3, which is also a dependency for many of my other libraries used in the app.

Reproduction steps

I was running Expo-50
Then I upgraded to Expo-51
Then the BottomSheet stopped working

Reproduction sample

https://snack.expo.dev/@gorhom/bottom-sheet---issue-reproduction-template?platform=ios

Relevant log output

I cannot reproduce anything because it's not showing any kind of error

jquezada19 commented 2 weeks ago

I'm also having the same issues and I'm also not getting any error messages; Please let me know if any solutions

w8ight commented 2 weeks ago

Same on version 5.0.5. Happens when there is a props combination of enableDynamicSize + BottomSheetScrollView. but it was working perfectly fine until I updated to react-native 0.76.1 For example this modal shows up:

<BottomSheetModal ref={modalRef} enableDynamicSizing={false} snapPoints={[300]}>
        <BottomSheetScrollView>
              <View style={{ width: '100%', height: 500, backgroundColor: 'tomato' }} />
        </BottomSheetScrollView>
 </BottomSheetModal>

This one does not:

 <BottomSheetModal ref={modalRef} enableDynamicSizing={true} snapPoints={[300]}>
        <BottomSheetScrollView>
              <View style={{ width: '100%', height: 500, backgroundColor: 'tomato' }} />
        </BottomSheetScrollView>
 </BottomSheetModal>

This one does not either:

 <BottomSheetModal ref={modalRef} enableDynamicSizing={true}>
        <BottomSheetScrollView>
              <View style={{ width: '100%', height: 500, backgroundColor: 'tomato' }} />
        </BottomSheetScrollView>
 </BottomSheetModal>

But if we place a BottomSheetView inside of BottomSheetScrollView, it seems to be working:

<BottomSheetModal ref={modalRef} enableDynamicSizing={true}>
      <BottomSheetScrollView>
        <BottomSheetView>
          <View style={{ width: '100%', height: 300, backgroundColor: 'tomato' }} />
          <View style={{ width: '100%', height: 300, backgroundColor: 'red' }} />
          <View style={{ width: '100%', height: 300, backgroundColor: 'blue' }} />
          <View style={{ width: '100%', height: 300, backgroundColor: 'aqua' }} />
        </BottomSheetView>
      </BottomSheetScrollView>
 </BottomSheetModal>

skoolaidl commented 2 weeks ago

Commenting to track this issue. I am having the same problem with recently upgrading to RN 0.75.4, Expo V51, and bottom sheet 5.0.5

skoolaidl commented 2 weeks ago

Coming back to say I found a workaround similar to @w8ight -- Adding in BottomSheetView OR BottomSheetScrollView seemed to fix the problem depending on the need. However, I used to have a ScrollView inside of my bottom sheet with some static content (header and footer) outside of the scroll view. It seems that either the entire contents of the sheet must be scrollable or only part -- I can't figure out a way to have the in between as it used to be.

vorn-dev-ni commented 2 weeks ago

same issue

BRaymond69 commented 2 weeks ago

If you use a Tab.Navigatior browser, try adding this as props

    <Tab.Navigator
      initialRouteName={NAVIGATOR.HOME}
      detachInactiveScreens={Platform.OS === "android" ? false : true} <--- this line
      screenOptions={() => ({
        tabBarActiveTintColor: "#144C41",
        tabBarInactiveTintColor: "#C4C4C4",
        headerShown: false,
      })}>
{...}

kospaa commented 2 weeks ago

Same issue, adding BottomSheetView as direct child fixes the problem but when you have a BottomsSheetScrollView or BottomSheetFlatList as child also, the modal opens up with the BottomsSheetScrollView/BottomSheetFlatList content height, ignoring the height of the content in BottomSheetView.

<BottomSheetView>
  <BottomSheetScrollView>
    {..content}
  </BottomSheetScrollView/>
  <View>
    {Content not taken in account when the modal shows up}
  </View/>
</BottomSheetView>

kevin-presentpal commented 2 weeks ago

Just an FYI, this issue is already assigned to @gorhom , so hopefully we can get a fix soon! 🤞

hraschan commented 2 weeks ago

I can also confirm this issue. We are using just a normal view in the bottom sheet. This also does not work. I made a test component below. For a little more context. We are using the normal react modal when screen reader is active. Therefore the content cant be a BottomSheetView and has to be a view instead. Its crusial that normal components work in the BottomSheet.

import { View, Text } from "react-native";
import React, { useCallback, useRef } from "react";
import { AppButton } from "./AppButton";
import { BottomSheetModal, BottomSheetView } from "@gorhom/bottom-sheet";

const TestBottomSheet = () => {
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const bottomSheetModalRefView = useRef<BottomSheetModal>(null);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handlePresentModalPressView = useCallback(() => {
    bottomSheetModalRefView.current?.present();
  }, []);
  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);
  const handleSheetChangesView = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);
  return (
    <View>
      <AppButton title="Open Bottom Sheet" onPress={handlePresentModalPress} />
      <BottomSheetModal ref={bottomSheetModalRef} onChange={handleSheetChanges}>
        <BottomSheetView
          style={{
            flex: 1,
            padding: 24,
            justifyContent: "center",
            backgroundColor: "grey"
          }}
        >
          <Text>Awesome 🎉</Text>
        </BottomSheetView>
      </BottomSheetModal>
      <AppButton
        title="Open Bottom Sheet View"
        onPress={handlePresentModalPressView}
      />
      <BottomSheetModal
        ref={bottomSheetModalRefView}
        onChange={handleSheetChangesView}
      >
        <View
          style={{
            flex: 1,
            padding: 24,
            justifyContent: "center",
            backgroundColor: "grey"
          }}
        >
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheetModal>
    </View>
  );
};

export default TestBottomSheet;

houssemELbahri commented 2 weeks ago

I have the same issue with RN:75.4

vellov commented 1 week ago

Just had same problem, also after adding BottomSheetView BottomSheetScrollView my snapPoints got messed up, some further investigation and found that setting enableDynamicSizing={false} fixed the issue without the need to add additional wrapper views.