BottomSheet is now lower

[kickbk]

Ask your Question

@gorhom I just installed 2.2.0 and saw my bottomsheet sank by about 20px. Is that since the new bottomInset option was introduced?
I tried adding the option with bottomInset={bottomSafeArea} and updated my function to const { top: topSafeArea, bottom: bottomSafeArea } = useSafeAreaInsets(); but that didn't fix it.
What's going on? how do I fix this?

[gorhom]

hi @kickbk , i will investigate it later 👍

[chybisov]

Same for 3.3.1

[gorhom]

@chybisov hmm interesting , so 3.3.0 was working fine ,, right ?

[chybisov]

@chybisov sorry, it started in 3.3.0, I just mention that this is also the case for latest v3.

[chybisov]

@kickbk as a temporary workaround you can add bottomInset to your snapPoints.

const snapPoints = useMemo(() => [280 + bottomInset], [bottomInset]);

If you use @react-navigation/bottom-tabs you need also provide tabbar height (for me it's 48):

const snapPoints = useMemo(() => [280 + 48 + bottomInset], [bottomInset]);

Hope this will be fixed soon, as I don't like put snapPoints inside component logic, much better to keep these as constant array outside of component. 😃

[kickbk]

@chybisov thanks, but yeah, I would avoid that.

[gorhom]

i found the issue, working on a fix 🛠

[chybisov]

@gorhom could you please look into these issues #281 #196 #237 in context of this one? It would be really helpful to rollout solution for them as well.

[gorhom]

@kickbk could you please test #296 👍

[kickbk]

Just checked. It changed for sure, but now it's too high ;) Mind you, I haven't tweaked anything since upgrading, so it's not too high because of a workaround I introduced

[gorhom]

are you using BottomSheet or BottomSheetModal ?

[kickbk]

Both

[gorhom]

could you check your top and bottom insets, now it should work as expected and will cut off these insets

[kickbk]

Oh, I think was supposed to add the bottomInset option. So I did this again: bottomInset={bottomSafeArea} and updated my function to const { top: topSafeArea, bottom: bottomSafeArea } = useSafeAreaInsets();
It's now even higher than before.

It's probably important to share how I use the BottomSheet/ BottomSheetModal.
I have App.js which loads the root navigator:

<Stack.Navigator screenOptions={{ headerShown: false }} mode="modal">
   <Stack.Screen name="BottomTabStack" component={BottomTabNavigator} />
  ...
</Stack.Navigator>

Then BottomTabNavigator loads the search page like so:

<BottomTab.Navigator>
    <BottomTab.Screen
      name="Search"
      component={SearchNavigator}
    />
  ...

Finally, My search screen looks like this:

const { height: SCREEN_HEIGHT } = Dimensions.get('screen');
const { top: topSafeArea, bottom: bottomSafeArea } = useSafeAreaInsets();
const searchModalSnapPoints = useMemo(
    () => [60, resultsHeight, SCREEN_HEIGHT],
    [resultsHeight]
  );
<BottomSheetModalProvider>
  <View style={styles.container}>
    <MapView ... />
    <BottomSheetModal
          ref={searchModalRef}
          name="SearchModal"
          index={0}
          snapPoints={searchModalSnapPoints}
          topInset={topSafeArea}
          bottomInset={bottomSafeArea}
          animatedPosition={animatedPosition}
          animatedIndex={animatedIndex}
          dismissOnPanDown={false}
          handleComponent={Handle}
          backdropComponent={renderBackdrop}
          ...

the 60 is because I push the search bar inside the modal above the navigation bar. Just like your example with the map does.

As I mentioned, now that I update the BottomSheetModal with bottomInset, it is even higher than before when I did not.

Does this help?