[RELEASED] BottomSheet v4

[gorhom]

Overview

Hi everyone 👋

After introducing Keyboard Handling on the previous discussion, I notice that the core library needs a refactor especially when it comes to state and memoized variables. Some of the issues that needed this major refactor #401 #402, and others.

Another area I wanted to improve is logging and in-code docs to help the community to contribute and debug issues easily, so I will try to document the major functionalities and main components.

Finally, I would love to hear your feedback or improvements that could be shipped with this release.

Testing

I will be posting an individual PRs for each feature/improvements and include installation commands.

You can test latest alpha here:

yarn add @gorhom/bottom-sheet@4.0.0-alpha.30

Any issue should be reported with this reproducible issue template on Expo Snack
https://snack.expo.io/@gorhom/bottom-sheet-v4-reproducible-issue-template

Status

We've reach to the sable version so far, I am currently working on finalising this release.

• Rename branch Master to v2
• Rename branch v4 to Master
• Update the documentation website

Change-log

New Features

• Added custom pan gesture and scroll handler customisation support (enable advanced scroll&pan customizations #525) (by @vonovak)
• Added snapToPosition method which will allows user to snap to a custom position out of the provided snap points.
• Added bottomInset prop which will add a space below the BottomSheet.
• Added enablePanDownToClose prop which will allow user to close the sheet when panning down.
• Added footerComponent prop.
• Added BottomSheetVirtualizedList
• Added keyboard input mode for Android.
• Added Pull-To-Refresh support.
• Added Detached BottomSheet
• Added backgroundStyle, handleStyle & handleIndicatorStyle to the BottomSheet
• Added Web support. TBD

Improvements

• Converted all internal state/memoized variables to Reanimated shared values.
• Prevent resetting the scrollable position when dragging by the handle. scrollView losing position + please make code more contributor-friendly #461
• Added animatedPosition & animatedIndex to useBottomSheet.
• Export useBottomSheetInternal for advanced usage.
• Improved dynamic snap points handling, and introduce useBottomSheetDynamicSnapPoints hook
• TBD

Breaking Changes

• Removed animationEasing from BottomSheet props.
• Removed animationDuration from BottomSheet props.
• Removed closeOnPress from BottomSheetBackdrop props.
• Removed dismissOnClose from BottomSheetModal props.

DevX

• Added visuals of the BottomSheet layering to the documentation.
• Added enableLogging to enable logging in development environment.
• Added more loggings.

[gorhom]

Converted all internal state/memoized variables to Reanimated shared values.

In this branch, I have refactored the library to use shared values to store and update layout values.

Notice

Calculating snap points position had change in this branch, now the library will count the handle height when positioning the sheet. This is a breaking change and will require developers to carefully monitor the change.

This is how you can visualise it:

Testing

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#refactor/convert-variables-to-shared-values

[gorhom]

here is the pr: #430

[gorhom]

enablePanDownToClose

This prop will give the ability to pan down the sheet to close, this will also benefit the bottom sheet modal too.

Testing

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#feature/added-enable-pan-down-to-close

[gorhom]

pr: #437

[darrylyoung]

This looks great. Thanks for sharing the progress, @gorhom.

For now, should I assume that issues like #52 won't be fixed? It makes sense if you're working on a refactor but any information would be good to help me decide which route to take — use version 2 for now as 3 isn't working or use neither and wait for version 4.

Thanks again and good luck with version 4.

[gorhom]

Hi @darrylyoung #52 should been already fixed with the stable release of v3.

make sure you follow Reanimated v2 installation instructions https://docs.swmansion.com/react-native-reanimated/docs/next/installation

[axeldelafosse]

Hey @gorhom!

Thank you very much for your work.

@nandorojo sent me your gist to test BottomSheet v4 with RN Modal. It's working fine on iOS but there is a weird behavior on web:

bottomsheetrnmodal.mp4

Any idea why?

[nandorojo]

@axeldelafosse thanks for the PR!

Yeah @gorhom it actually already works on web with the BottomSheetModal it seems. It's only the RN modal that experiences this.

[axeldelafosse]

No worries! It was long overdue.

I'll try to make it work with ShowcaseApp if I find some time this weekend.

[gorhom]

Thanks @axeldelafosse for submitting the pr, tomorrow i'll review it and look into the web issue 👏

[nandorojo]

Thanks for the quick work here guys

[axeldelafosse]

Hey guys! Going back to this one. Here is a repo featuring this bug: https://github.com/axeldelafosse/bottom-sheet-example. Also, I realized that the modal isn't moving on Android 🤷‍♂️

[gorhom]

Added BottomSheetFooter

This component will be placed at the bottom of the sheet all the time and will react to keyboard appearnce.

Props

appearanceBehavior: Appearance behavior when sheet is below starts to cut off footer, you can combine many behaviors together.

• none: do nothing.
• fade: fade in and out.
• scale: scale up and down.
• slide: slide up and down.

screencap-2021-05-25T220030.468Z.mp4

Testing

yarn add @gorhom/bottom-sheet@4.0.0-alpha.4

[gorhom]

Prevent resetting the scrollable position when dragging by the handle

more info here #461

lockposition.mov

Testing

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

[nandorojo]

@gorhom where can I see the code for this search list UI?

[gorhom]

here you go https://github.com/gorhom/react-native-bottom-sheet/blob/v4/example/src/components/searchHandle/SearchHandle.tsx

[gorhom]

Detached Bottom Sheet

This will allow user to create a detached bottom sheet with less effort.

Detached.mp4

Testing

yarn add @gorhom/bottom-sheet@4.0.0-alpha.12

[nandorojo]

So cool!

[alessiocancian]

I think this feature would be nice to have, especially along with web support:
#234

I could help with the implementation if needed

[gorhom]

@alessiocancian i think it will be doable now since we have detached bottom sheet implementation in place , would you mind have a look at it and see if its doable ? thanks alot

[alessiocancian]

@gorhom I'm on it.
I looked at the BottomSheet implementation and I think I need to write a different component for this feature by using some of the internal components such as BottomSheetBackdrop, BottomSheetContainer and BottomSheetBackgroundContainer.
A wrapper will choose the component to render between BottomSheet and ContainedLayout. I think it should be based on a prop of the BottomSheet and not just calculated internally based on the screen size, but this could be another option. Like a displayMode prop with default | contained | auto as options.

Then we need to find a way to translate the snap points to the modal display height, we could choose the greatest one or add a different prop to handle modal height...

Another feature to consider is the modal header. Usually when presenting a modal instead of the bottom-sheet I like to show an header with a title and the close button. I'd like to add a prop to the BottomSheet, like modalTitle or containedLayoutTitle to show this header automatically only for the contained layout.

[gorbypark]

I'd love it if we could get the onScroll event working for BottomSheetScrollView and related components. I have a few animations that need to run when the y contentOffset !== 0 but currently can't because there's no way (that I know of) to get that information. #488

[nandorojo]

I've been getting this issue on v4, a bit hard to reproduce but notice it only happens like 1/10 times (midway through the video it shoots up.)

I'm using the sheet inside of a Modal. Let me know if you need me to share the code.

Upload.from.GitHub.for.iOS.MOV

[Vednus]

Not sure if this is the place to write this, but it would be nice to have the option to use it in a more declarative way so I can just set the index prop and whenever that changes, it moves to that index. I often just handle the index in a state property and then use a useEffect to snapToIndex when that index changes. It's fine for now, but might be nice if index behaved like that.

[gorhom]

this will be added with alpha 21 👏

[elgorditosalsero]

Hi @gorhom, quick question... 😄

As in V3 there is the dismiss by name/key functionality, is possible also add the expand by name/key in v4?

[skdev24]

Hey @gorhom

I was testing BottomSheetModal on 4.0.0-alpha.17, seems like onDismiss method is not getting called, to which I did little testing found out that handleOnChange method from BottomSheet was not getting called because of inside useAnimatedReaction condition was false every time.

react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx

Line 1598 in 7139e08

_animatedIndex !== animatedCurrentIndex.value &&

But as I seen the value of both condition I changed with equals to sign which worked.

[gorhom]

thanks for spotting it, it should be fixed with alpha.18

[gorhom]

you do not need to wrap your BottomSheetHomeScreen with BottomSheetView

[pouyarezvani]

@gorhom when can we expect v4 to be fully released?

[gorhom]

i am working on finalising it , currently i would appreciate if you could test v4 and let me know if you find any issues

here are the remaining tasks:

• Insure all new features are working as expected.
• Move v4 branch to master
• Complete and move website to the new master

[nmuranovas]

Hello 👋

It would be really nice to have complete control over the accessibility props (accessible, accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState) on the BottomSheet as well as it's sub-components (handle, backdrop) since it is currently not possible to do localisation.

In my team we have done some research on how accessibility is handled on different apps, platforms and it seems like everyone does it completely differently (e.g. some do not make the backdrop accessible, others do not even make the handle accessible and basically anything in between).

Are there any plans in introducing customisable accessibility in the v4 release?

[nmuranovas]

In the v4 release or either by contributing to the current version?

[gorhom]

Hi @nmuranovas, i will priorities accessibility after this major release, please feel free to open a new discussion regarding what's needed or possible implementation :)

[gorhom]

@ShivamJoker you can override BottomSheetBackdrop props to control your expected behaviour.

<BottomSheetBackdrop appearsOnIndex={1} disappearsOnIndex={-1} />

[gorhom]

@ajonikas you need to pass onRefresh to the scrollable in order to get it working 👍

[ajonikas]

Ah I see! Thank you

[thebiltheory]

Good Afternoon @gorhom

I'm am continuing the convo here instead of Twitter.

Here is some feedback:

The snack has some issues.

React Navigation integration

When trying to implement a navigator (as below and according to your examples) nothing happens.

The code below is the way I implemented it.

  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(["CONTENT_HEIGHT"]);


<NativeViewGestureHandler disallowInterruption={true}>
      <View flex={1}>
        <BottomSheetModal
          name="Select"
          ref={newBookingModal.ref}
          onDismiss={resetCarForm}
          snapPoints={animatedSnapPoints}
          handleHeight={animatedHandleHeight}
          contentHeight={animatedContentHeight}
          enablePanDownToClose={true}
          keyboardBehavior="interactive"
          android_keyboardInputMode="adjustPan"
        >
          <BottomSheetScrollView
            onLayout={handleContentLayout}
            style={{
              flex: 1,
              backgroundColor: "red",
            }}
          >
            <NewBookingNavigator />
          </BottomSheetScrollView>
        </BottomSheetModal>
      </View>
    </NativeViewGestureHandler>

NewBookingNavigator.ts

 <NavigationContainer independent={true}>
      <Stack.Navigator
        screenOptions={screenOptions}
        initialRouteName="ScreenOne"
      >
        <Stack.Screen
          name="ScreenOne"
          options={{ title: "Screen One", headerShown: false }}
          component={ScreenOne}
        />
        <Stack.Screen
          name="ScreenTwo"
          options={{ title: "Screen Two", headerShown: false }}
          component={ScreenTwo}
        />
        ...
      </Stack.Navigator>
    </NavigationContainer>

[thebiltheory]

What's your hacky solution @bohemima ?
I'd love to make this work somehow without have to snap to a specific snap point index on every navigate action.

[bohemima]

There's a hacky PoC on my profile, react-navigation-modal-as-bottomsheet-poc - it's not using a 'real' bottom sheet at all, just views and some transparency. No keyboard handling, no swipe to dismiss.

I'll see if I get some time to deep dive into @gorhom's code and see if we can't solve this somehow..

[thebiltheory]

@bohemima

I've implemented a hack that works.
Checkout the implementation.
#601

[bohemima]

Good stuff, could use context to share the method instead, or maybe there's issues when using a modal?

[thebiltheory]

@bohemima at this level I think it's alright to pass the method as a prop. The only thing is that React Navigation is gonna complain about non-serializable data (the method). you can suppress that with LogBox.

Feel free to suggest improvements!

[gorhom]

unfortunately i had to update the Footer api, it was super limited to pre-configure simple animation appearance, so i had to make it more generic to enable users to create their own custom animation.

look the at new custom footer component https://github.com/gorhom/react-native-bottom-sheet/blob/master/example/src/components/customFooter/CustomFooter.tsx

[gorhom]

yeah, you could set index={-1}

[moyolvera]

thank you sir

[nandorojo]

I suggest opening this as an issue, unless it worked before v4 and then stopped working.

[alexco2]

Hi everyone,
I upgraded from v3 to v4. So far everything works well. Especially the footerComponent is a huge benefit for me. I´m using a StackNavigator in my BottomModal though and want to render a different footerComponent based on the navigationState the Stack has. Do you know if there is a possibility to control the footerComponent prop from a nested stack screen?
Thank you for your help! :)

[gorhom]

you could copy animatedFooterPosition from BottomSheetFooterContainer and add it to your custom footer per screen/stack 👍

[alexco2]

Thank you! I solved it by passing all of the state down the tree. Ideally, something like react navigations setOptions (headerRight, headerLeft etc.) would have been helpfull, but I think that really is just a niche problem :)

[theMasix]

I'm waiting for stable v4 and its documentation for weeks...

[gorhom]

documentation is up https://gorhom.github.io/react-native-bottom-sheet , i am just finalising the stable release and it would be on Monday 🤞

[alexco2]

@gorhom
Hello, I come across one issue, but unfortunatly I am unable to reproduce it in a snack. When I unmount the screen which has a BottomSheetModal, the app crashes. This just happens when the modal is closed (e.g. by tapping the backdrop). If it is "manually" dismissed, the crash does not appear. I tried to narrow the problem down, but even after stripping the modal of all content, the issue still persists. Is it perhaps a problem that I am using one BottomSheetModalProvider at the top level for all my BottomSheetModal components? Do you have an idea what could cause the problem?

The only error log I can provide is one from crashlytics:

Fatal Exception: java.lang.IllegalArgumentException: Scrapped or attached views may not be recycled. isScrap:false isAttached:true b.v.b.f$m{b086991 VFED..... ......ID 0,0-1080,2096 #1a}, adapter:com.reactnativepagerview.b@9e550f6, layout:b.v.b.f$h@9929cf7, context:com.facebook.react.uimanager.l0@7d7890e
       at androidx.recyclerview.widget.RecyclerView$v.C(:282)
       at androidx.recyclerview.widget.RecyclerView.removeAnimatingView(:22)
       at androidx.recyclerview.widget.RecyclerView$m.a(:27)
       at androidx.recyclerview.widget.RecyclerView$l.h(:7)
       at androidx.recyclerview.widget.n.G(:3)
       at androidx.recyclerview.widget.c$d.onAnimationEnd(:17)
       at android.view.ViewPropertyAnimator$AnimatorEventListener.onAnimationEnd(ViewPropertyAnimator.java:1111)
       at android.animation.Animator$AnimatorListener.onAnimationEnd(Animator.java:554)
       at android.animation.ValueAnimator.endAnimation(ValueAnimator.java:1250)
       at android.animation.ValueAnimator.doAnimationFrame(ValueAnimator.java:1492)
       at android.animation.AnimationHandler.doAnimationFrame(AnimationHandler.java:146)
       at android.animation.AnimationHandler.access$100(AnimationHandler.java:37)
       at android.animation.AnimationHandler$1.doFrame(AnimationHandler.java:54)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1008)
       at android.view.Choreographer.doCallbacks(Choreographer.java:809)
       at android.view.Choreographer.doFrame(Choreographer.java:740)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:995)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:246)
       at android.app.ActivityThread.main(ActivityThread.java:8512)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)

[alexco2]

I found this issue.
callstack/react-native-pager-view#173
When switching the parent nativeStackNavigator to a normal StackNavigator the issue is resolved. For performance reasons I would rather use the native version. Is there a way to make sure the BottomSheetModal is alwas dismissed?

[gorhom]

could you provide a snack using the v4 template ?

[alexco2]

I would like to, but I´m getting the repeated error that expo failed to resolved dependencies because the network request failed for react-native-pager-view.
https://snack.expo.dev/@expoco2/fatal-crash-bottomsheetmodal-v4-with-pagerview
In theory, the bug should be reproducable by going back from a NativeStack screen which has a PagerView (react-native-pager-view) or TabView (react-native-tab-view) and a not unmounted BottomSheetModal (not dismissed, but e.g. closed).
I will check over the day if the expo issue might be resolved.