Roadmap for v2 ( Reanimated v1 )

[gorhom]

Bottom Sheet v2 ( Reanimated v1 )

These are the planned improvements and features for v2.

Improvements

• [x] Change the current v2 alpha release into v3.
• [x] Fix measuring bottom sheet container to use its actual size than window height. #77
• [ ] [blocker] Extract BottomSheetModal into a separate repository and package, or refactor repository to become a monorepo.
• [x] [blocker] Add documentation site.

Features

• [x] Add animateOnMount prop to snap to the initial snap point index when the sheet is mounted. (#78)
• [x] Add dynamic snap points feature. #32
• [x] Add enableContentPanningGesture prop to allow panning sheet by its content view or scrollables. #55
• [ ] [not blocker] Allow scrollables bouncing.
• [x] Refactor BottomSheetModal to make it declarative component, using @gorhom/portal.
• [x] [blocker] Add default backdrop #45.

Install Stable Release

yarn add @gorhom/bottom-sheet

also check out the new documents website ( still in progress ) 🎉

[gorhom]

hi @sa8ab, would be interested to pick this on up 😇

Add default backdrop #45.

[gorhom]

I just pushed an alpha release for v2, please try it and let me know :)

also check out the new documents website ( still in progress ) 🎉

yarn add @gorhom/bottom-sheet@2.0.0-alpha.2

[adamsoutar]

Hey 👋 v2 (alpha) is amazing, thank you!

I've just noticed two things that have changed from v1 that I didn't expect

The rounded corners on my modal didn't show up (there was a view behind them) until I added a backgroundComponent={() => <></>} prop - is there a default white background now?

And with the changes to snapPoints, if you want the bottom snap point to be showing just your header, you have to set it to 1 and have 1px of your content peeking out because 0 seems to have a special definition of making the sheet disappear?

[gorhom]

hi @adamsoutar , thanks for testing the alpha release

The rounded corners on my modal didn't show up (there was a view behind them) until I added a backgroundComponent={() => <></>} prop - is there a default white background now?

yeah, BottomSheetDefaultBackground is set as a default background, look here, you could provide null to remove it.

And with the changes to snapPoints, if you want the bottom snap point to be showing just your header, you have to set it to 1 and have 1px of your content peeking out because 0 seems to have a special definition of making the sheet disappear?

with this release , you could provide handleHeight as a prop and set it as your first snap point, and it should work 👍

[adamsoutar]

Thanks, sounds good 👍

The only other suggestion I had (and it might already be in and I've just missed it somewhere), was that we have px and %, with % being of the screen height - do you think it'd be possible to add a relative unit, so 100r or whatever the unit is, opens the sheet to 100% the height of its content (ie. for some non-scrolling content that is shorter than the screen)?

I think this should be possible since the docs mention that the lib measures the height of the content already?

EDIT: Sorry, just came across something from your answer 😅

you could provide null to remove it

Providing null as backgroundComponent, while totally valid, isn't included in its type and yields

Type 'null' is not assignable to type 'FC<BottomSheetBackgroundProps> | undefined'

Just thought that might be worth noting

[gorhom]

The only other suggestion I had (and it might already be in and I've just missed it somewhere), was that we have px and %, with % being of the screen height - do you think it'd be possible to add a relative unit, so 100r or whatever the unit is, opens the sheet to 100% the height of its content (ie. for some non-scrolling content that is shorter than the screen)?

this is doable but you will need to handle measuring the content layout the update the snap points.

Providing null as backgroundComponent, while totally valid, isn't included in its type and yields

OPS ! good catch, will fix it later 👍

[gorhom]

I just pushed an alpha release for v2, please try it and let me know !

also check out the new documents website ( still in progress ) 🎉

yarn add @gorhom/bottom-sheet@2.0.0-alpha.3

[Angelk90]

Hi @gorhom ,

1) I updated to the latest version @gorhom/bottom-sheet@2.0.0-alpha.3, but I'm having the following problem. A kind of flickering before the bottom sheet opens, a matter of seconds. But every time I open it, sometimes it doesn't happen and sometimes it does.

I tried updating the latest versions of react-native-gesture-handler andreact-native-reanimated as well, but the problem persists.

I also tried to record it but converting the video to gif, you can't see it.

The problem appears on modals, it also happens in your modal examples folder.

Link video: https://streamable.com/jwkcin

2) If I put only one snapPoints with values higher than "97%", then 98%, 99%, 100%, it won't open with values lower than or equal to 97% it opens.

3) Would it be possible that when you get to the top in 100% size the rounded corners can disappear, like they do in many apps?

[gorhom]

hi @Angelk90 , thanks for testing Alpha 3 👏

A kind of flickering before the bottom sheet opens, a matter of seconds.

I have fixed this issue with Alpha 4, let me know if its still happening.

If I put only one snapPoints with values higher than "97%", then 98%, 99%, 100%, it won't open with values lower than or equal to 97% it opens.

hmm not sure if i understand correctly , but please open an issue and i'll try to help :)

Would it be possible that when you get to the top in 100% size the rounded corners can disappear, like they do in many apps?

look at custom handle in /example folder, i did modify the handle border radius 👍

[Angelk90]

@gorhom : Version Alpha 4

With the new update it is giving me the following problem, the bottom-sheet at the bottom doesn't take the background color.

I am using present.

Index:

  const bottomSheetTheme = useCallback(
      (newValue, id) => {
        present(<ThemeModal darkMode={darkMode} onChange={handleThemeChange} />, {
          snapPoints: ['50%'],
          animationDuration: 800,
          overlayComponent: BottomSheetOverlay,
          overlayOpacity: 0.5,
          dismissOnOverlayPress: true,
          animationEasing: Easing.out(Easing.exp),
          handleComponent: handleModal,
        });
      },
      [settings],
  );

ThemeModal:

import React, { useState } from 'react';
import { View, TouchableWithoutFeedback } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Text } from 'react-native-paper';
import { useTheme } from '@/Theme';
import { useTranslation } from 'react-i18next';

const ThemeModal = ({ darkMode, onChange }) => {
  const { t } = useTranslation();
  const { bottom: bottomSafeArea } = useSafeAreaInsets();
  const { Gutters, Layout, Colors, Svgs } = useTheme();
  const [scheme, setScheme] = useState(darkMode);

  const changeButtonTheme = (value) => {
    setScheme(value);
    if (onChange) onChange(value);
  };

  const list = [
    { title: 'Light', value: false },
    { title: 'Dark', value: true },
    { title: t('automatically'), value: null },
  ];

  const backgroundColor = Colors.backgroundPrimary;

  return (
    <View
      style={{
        flex: 1,
        backgroundColor,
        //paddingBottom: bottomSafeArea,
      }}>
      {list.map(({ title, value }) => {
        return (
          <TouchableWithoutFeedback
            key={value}
            onPress={() => {
              changeButtonTheme(value);
            }}>
            <View
              style={[
                Layout.row,
                Layout.rowHCenter,
                Gutters.tinyVMargin,
                Gutters.tinyHMargin,
              ]}>
              <View style={[Layout.fill]}>
                <Text>{title}</Text>
              </View>
              {scheme === value ? (
                <Svgs.RadioButton size={32} color={backgroundColor} />
              ) : (
                <Svgs.RadioButtonEmpty size={32} color={backgroundColor} />
              )}
            </View>
          </TouchableWithoutFeedback>
        );
      })}
    </View>
  );
};

export default ThemeModal;

[gorhom]

I just released Alpha 5 - hopefully the last alpha release.

yarn add @gorhom/bottom-sheet@2.0.0-alpha.5

also check out the new documents website ( still in progress ) 🎉

[gorhom]

I just released Alpha 6 to fix minor bug reported by @Angelk90

yarn add @gorhom/bottom-sheet@2.0.0-alpha.6

also check out the new documents website ( still in progress ) 🎉

[YNV6YXR1]

Hi, I've found this problem during compilation now with alpha.6 Unable to resolve "./components/draggableView" from "node_modules/@gorhom/bottom-sheet/src/index.ts"

[gorhom]

@YNV6YXR1 try to remove the library and install it again. the path /components/draggableView is no longer exists

[adamsoutar]

Hi, absolutely loving Alpha 6 & the new docs site 👍

I've just been having two issues.

First small one is that animateOnMount={false} no longer seems to be respected? The sheets appear to always animate no matter its value, though this isn't a big one since I usually have it enabled.

The second issue is a slightly larger one - enableContentPanningGesture, while it does stop you from being able to pull down the sheet by scrolling, no longer seems to remove the PanGestureHandler? This leaves some elements untappable on Android (#85).

I think these issues may have arisen around the major refactor in alpha 4, as I only just updated from 3 -> 6 and came across them

The rest of the new changes are great, thanks for maintaining such a good lib!

[gorhom]

@adamsoutar , first thanks for testing and giving your feedback, that helps a lot 👏

First small one is that animateOnMount={false} no longer seems to be respected? The sheets appear to always animate no matter its value, though this isn't a big one since I usually have it enabled.

good point , actually it is working as expected , there will be a small transition due to the calculating the containerHeight & handleHeight if not provided.

I think it would be a good idea to provide a tips page where i would explain this in details.

The second issue is a slightly larger one - enableContentPanningGesture, while it does stop you from being able to pull down the sheet by scrolling, no longer seems to remove the PanGestureHandler? This leaves some elements untappable on Android (#85).

for android touchables elements , please have a look at Pressables / Touchables are not working on Android.

but for normal user interaction with content while the sheet is not on the last snap point, that is something i'll for sure add!

[gorhom]

I just released Alpha 7 that fixes:

• fix: dynamic snap points on modals (#113)
• fix: unstable modal mounting

yarn add @gorhom/bottom-sheet@2.0.0-alpha.7

also check out the new documents website ( still in progress ) 🎉

[adamsoutar]

Thanks for the quick reply :)

Yeah, I was aware of the thing with replacing Touchables on Android, but having enableContentPanningGesture={false} remove the PanGestureHandler as it did in earlier alphas would be a great feature, because it allows you to use third-party components where you don't control what Touchables they use - like RN's <Switch /> and others from npm.

[gorhom]

@adamsoutar i think this enhancement would be a great addition to the library , unfortunately i don't think it will be shipped with v2 release at least the first stable release.

[gorhom]

Thanks @adamsoutar , @Angelk90 for helping in testing this release 👏

[heejongahn]

@gorhom First off, thanks for the great lib!

I just want to double-check: is presenting BottomSheetModal with useBottomSheetModal deprecated in v2, in favor of BottomSheetModal component? I already have more than 50 useBottomSheetModal usages in my app, and want to use new dynamic snap point feature but it seems like upgrading to v2 requires rewriting all hook-based BottomSheetModals into components... 😢

[gorhom]

hi @heejongahn , unfortunately present in v1 was blocking any updates to the modal by the parent, and in order to solve that i had to convert the BottomSheetModal into a declarative component.

present in v2 is still needed, but only to mount the component, look at the usage doc, hope it helps.

hopefully this is the last major breaking changes release

[heejongahn]

@gorhom Thanks for the quick reply! It's a bit sad news for me but the reason is understandable...

As you're here, I've got another question. When using useBottomSheetModal version, BottomSheet's children cannot access to parent's Context value from. Does this behavior change if I use declarative BottomSheetModal component? i.e. if you do:

const TestContext = React.createContext(false);

const MyBottomSheet = () => {
  const canAccessContext = useContext(TestContext);
  return <Text>{`${canAccessContext}`}</Text>
}

const MyComponent = () => {
  return (
    <TestContext.Provider value={true}>
      <MyBottomSheet />
    </TestContext.Provider>
  );
}

and present it, will MyBottomSheet render true instead of false? My guess is it won't, as RN doesn't really support portals natively... but just asking to make sure. (Also, please let me know if there's more proper channel for asking questions 🙏 )

[00SangHun00]

I don't know if I'm writing in the correct place, the bug with elevation elements on Android is still persisting. I've seen somewhere on your repo a report, but it was closed. I'm using v2 of the module, and elements with elevation, override my bottom sheet. On IOS, elements with elevation are going behind the bottom sheet.