Roadmap for v2 ( Reanimated v1 )

[gorhom]

Bottom Sheet v2 ( Reanimated v1 )

These are the planned improvements and features for v2.

Improvements

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

Features

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

Install Stable Release

yarn add @gorhom/bottom-sheet

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

[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 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 (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.