[v4] Unable to use .expand() with snapPoint at 100%

[Akeuuh]

trafficstars

Bug

Th problem I'm facing is simple to describe.

I have a BottomSheet with only one snapPoint ['100%']. I would like to open the bottomsheet in full screen only. But when I call the expand (or snapToIndex or snapToPosition) function on the bottomsheet ref, nothing append.

I know that my configuration is good because on lower snapPoint everything works properly.

I have seen one issue that could be close to mine but there was no good answer..

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.2
react-native	0.69.2
react-native-reanimated	2.9.1
react-native-gesture-handler	2.5.0

Steps To Reproduce

1. Set snapPoint to ['100%']
2. Have your bottomsheet component with index = -1 for it to be hide
3. Click on a button with ref?.current?.expand() method
4. The bottom sheet doesn't react

Describe what you expected to happen:

1. Set snapPoint to ['100%']
2. Have your bottomsheet component with index = -1 for it to be hide
3. Click on a button with ref?.current?.expand() method
4. The bottomsheet should expand to full screen size

Reproducible sample code

import React from 'react';
import {View, StyleSheet} from 'react-native';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import Animated, {useSharedValue} from 'react-native-reanimated';

type Props = {
  children?: React.ReactNode;
};

const BottomSheetComponent = React.forwardRef<BottomSheet, Props>(
  ({children}: Props, ref) => {
    const yPosition = useSharedValue(0);
    const snapPoints = React.useMemo(() => ['100%'], []);

    const handleSheetChange = React.useCallback((index: number) => {
      console.log('handleSheetChange', index);
    }, []);

    const renderHeader = () => (
      <View style={styles.headerContainer}>
        <Animated.View style={styles.dragLine} />
        <View style={styles.mainHeader}>
          <View style={styles.sideView}>
            <View style={{height: 25, width: 25, backgroundColor: 'red'}} />
          </View>
          <View style={styles.titleContainer}>
            <View style={styles.title} />
          </View>
          <View style={styles.sideView} />
        </View>
      </View>
    );

    const renderBackdrop = React.useCallback(
      (props: BottomSheetBackdropProps) => (
        <BottomSheetBackdrop
          {...props}
          appearsOnIndex={2}
          disappearsOnIndex={1}
        />
      ),
      [],
    );

    return (
      <BottomSheet
        ref={ref}
        snapPoints={snapPoints}
        onChange={handleSheetChange}
        handleComponent={renderHeader}
        backgroundStyle={styles.background}
        backdropComponent={renderBackdrop}
        animatedPosition={yPosition}
        topInset={47}
        index={-1}
        enablePanDownToClose
        handleStyle={styles.bottomSheet}>
        <BottomSheetScrollView>{children}</BottomSheetScrollView>
      </BottomSheet>
    );
  },
);

const styles = StyleSheet.create({
  bottomSheet: {
    borderRadius: 0,
    backgroundColor: 'green',
  },
  background: {
    backgroundColor: 'green',
    borderRadius: 25,
  },
  headerContainer: {
    padding: 16,
  },
  dragLine: {
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: 'grey',
    alignSelf: 'center',
    marginBottom: 16,
  },
  mainHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  titleContainer: {
    flex: 5,
    alignItems: 'center',
  },
  title: {
    backgroundColor: 'purple',
    height: 30,
    width: 70,
    borderRadius: 15,
  },
  sideView: {
    flex: 1,
  },
});
export default BottomSheetComponent;

[Akeuuh]

I've search deep down the lib and see that the line 964 from BottomSheet.tsx throws me out of the function. Don't know what to do with it but it can help you to look for the error..

[go-sean-go]

@Akeuuh - Your comment inadvertently solved my (similar) problem after several hours of debugging.

I was using .forceClose() on a BottomSheet, and at some later times using snapToIndex(). It worked great - UNTIL I moved to an abstracted class, using React.forwardRef() - like yours.

Checking out your reference to BottomSheet.tsx:964, I started investigating the conditions, and found that isForcedClosing was my likely culprit.

In my case, switching to .close() on my BottomSheet (instead of forceClose()) solved the problem - and, fortunately, my use case supports the change. I suggest trying the same if you're still stuck, and can use .close().

tl;dr I believe there is some bug with forwardRef() and forceClose() where some state is being lost or calc'd incorrectly. Using forceClose() without forwardRef() works fine, and close() with forwardRef() also works fine (for me).

[OfficialDarkComet]

Try using either the ref method snapToIndex( ) or snapToPosition( ) instead of expand( ). Then, do bottomSheetRef?.current?.snapToIndex(0), since you only have two indexes -1 for close and 0 for 100%.

I'm on my phone so I can't check, but it should work. Hope this helps! 😊

- Logan (a.k.a. DarkComet)

[go-sean-go]

@OfficialDarkComet - For me, the problem would occur on any of the 'expansion' or reposition-type methods after a .forceClose() - but, again, only when using forwardRef() in combination. Without forwardRef(), everything worked great. With forwardRef(), I need to close with .close() and not .forceClose() (I stopped troubleshooting at that point since my use case was solved).

[Rc85]

Upgrading to version 4.4.3 fixes it.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.