[v4] | BottomSheetScrollView - Not scrolling on every render

[ZanaNabaz]

Bug

I've noticed a bug where BottomSheetScrollView sometimes won't be scrollable (can not scroll). I don't know what's causing it, sometimes it works on the first render and sometimes it works on the second render. Tested on Android

I Created the following view to display my bottomSheets that needs scrollable functionality

Environment info

System: OS: Windows 11 10.0.22631 CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz Memory: 14.25 GB / 31.90 GB Binaries: Node: version: 21.4.0 path: C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: version: 10.2.4 path: C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: - "28" - "29" - "32" - "33" - "34" Build Tools: - 28.0.3 - 29.0.2 - 29.0.3 - 33.0.1 - 34.0.0 System Images: - android-28 | Google APIs Intel x86_64 Atom - android-34 | Google APIs Intel x86_64 Atom Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-231.9392.1.2311.11076708 Visual Studio: Not Found Languages: Java: version: 11.0.20 path: /c/Program Files/Common Files/Oracle/Java/javapath/javac Ruby: Not Found npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.0 wanted: 0.73.0 react-native-windows: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: Not found newArchEnabled: Not found

Library	Version
@gorhom/bottom-sheet	4.5.1
react-native	0.73.0
react-native-reanimated	3.6.1
react-native-gesture-handler	2.14.0

Steps To Reproduce

1.Use the docs for BottomSheetScrollView 2.Replicate the example

Describe what you expected to happen:

1. Being able to scroll when using BottomSheetScrollView

Reproducible sample code

import React, {FC, useCallback, useEffect, useMemo, useRef} from 'react';
import {View, StyleSheet, Button, ViewStyle} from 'react-native';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetScrollView,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {Portal} from 'react-native-paper';
import {deviceScreenHeight, deviceScreenWidth, hp} from '../../utils';
type Props = {
  isVisible: boolean;
  setIsVisable: (value: boolean) => void;
  closeOnBackDrop?: boolean;
  canPressThrough?: boolean;
  children: React.ReactNode;
  snapPoints: string[];
  backgroundStyle?: ViewStyle;
  handleIndicatorStyle?: ViewStyle;
  handleStyle?: ViewStyle;
  panToClose?: boolean;
  handleComponent?: React.FC;
};

export const CustomScrollModal: FC<Props> = ({
  isVisible,
  setIsVisable,
  closeOnBackDrop,
  canPressThrough,
  children,
  snapPoints,
  backgroundStyle,
  handleIndicatorStyle,
  handleStyle,
  panToClose = false,
  handleComponent,
}) => {
  // variables
  const sheetRef = useRef<BottomSheet>(null);

  // callbacks
  const handleSheetChange = useCallback((index: number) => {
    if (index === -1) {
      setIsVisable(false);
      sheetRef.current?.forceClose();
    }
  }, []);

  const StyledBackdrop = (props: any) => {
    return (
      <BottomSheetBackdrop
        opacity={1}
        {...props}
        disappearsOnIndex={-1}
        closeOnPress={closeOnBackDrop}
        enableTouchThrough={canPressThrough}
      />
    );
  };
  if (isVisible)
    return (
      <Portal>
        <GestureHandlerRootView style={{flex: 1}}>
          <BottomSheet
            enablePanDownToClose={panToClose}
            backdropComponent={StyledBackdrop}
            ref={sheetRef}
            snapPoints={snapPoints}
            handleComponent={
              handleComponent
                ? handleComponent
                : () => (
                    <View
                      style={{
                        height: hp(0),
                      }}></View>
                  )
            }
            onChange={handleSheetChange}>
            <BottomSheetScrollView nestedScrollEnabled>
              {children}
            </BottomSheetScrollView>
          </BottomSheet>
        </GestureHandlerRootView>
      </Portal>
    );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  modalView: {
    maxWidth: 455,
    alignSelf: 'center',
    borderRadius: 5,
    padding: 35,
  },
  contentContainer: {
    backgroundColor: 'white',
  },
});

export default CustomScrollModal;

Screen Recording of the issue: Video

[xwmtp]

I have the exact same issue, it seems to have started since upgrading to the latest react native and reanimated versions.

[Mlobaievskyi]

Have same issue. It's more global bug and happen with all kind of bottomsheet components, touchable elements stop to respond and start to work again after close and open again.

Tested with 4..6.0 and and 5.alpha_4

[csnvrl]

I'm having the same issue

[Maniae]

It seems that sometimes, the BottomSheetScrollView inside the BottomSheet is rendered with a height too big to be allowed to scroll (actually the height of its content). I reproduced the issue using a simple BottomSheet with a single snappoint, containing a BottomSheetScrollView, itself having only a View component with its height set to 1500px

Using onLayout on the BottomSheetScrollView component, I see that the ScrollView resizes from 0 to ~600px, its max size to fit in the bottom sheet (onLayout is called ~10 times), and then can scroll. However, sometimes, onLyaout is only called twice : once with a height at 0px, once with a height at 1500px.

Since the height is exactly its content, it won't scroll. (This is easily visible using a detached bottom sheet)

I can reproduce the buggy render easily by making the opening of the bottom sheet "laggy", e.g manipulating things immediately after I render the bottom sheet, juste before it opens.

I have no clue how to fix it but to render an empty BottomSheet first, waiting 100ms and then rendering its content. (It is obviously not a good solution).

Issue also appeared for us after upgrading Expo from v0.49 to v0.50 (Meaning we also upgraded Reanimated, gesture-handler and react-native)

[Maniae]

After further investigation, this seems not to be related to library upgrades. I can reproduce it with expo 0.49, even though this is way harder (React Native 0.72, Reanimated 3.6.1, rn-gesture-handler 2.12.0)

Maybe we're seeing this problem more often because the "laggy" mounting of the view is more common now ?

Anyway, one thing that seems to fix it is removing the flex: 1 style on the BottomSheetDraggableView that is wrapping the ScrollView, inside createBottomSheetScrollableComponent.tsx. Not sure if it can introduce other issues though.

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

[ZanaNabaz]

Thanks for looking into this @Maniae, your solution seems to solve my issue. 👍

[rahimlisarkhan]

<BottomSheetScrollView style={styles.container} nestedScrollEnabled contentContainerStyle={[ styles.contentContainer, // {paddingBottom: pixelVertical(90) + insets.bottom}, ]}

 You should remove flex:1 style in contentContainerStyle. I fixed same isues

[lucadegasperi]

Hello I'm still having the same issue but on iOS. Using Bottom Sheet v 4.6.1 and iOS 17.2. The first time the scrollview renders it doesn't scroll. If you change something it starts scrolling but as soon as it's back at the top, it no longer scrolls...

[fegig]

i did import { ScrollView } from 'react-native-gesture-handler'; to replace the BottomSheetScrollView and it worked for me

[phgn0]

This PR fixed the issue for me!

https://github.com/gorhom/react-native-bottom-sheet/issues/1697#issuecomment-1919464182

[Hiba-Bazerbashi]

i did import { ScrollView } from 'react-native-gesture-handler'; to replace the BottomSheetScrollView and it worked for me hey @fegig could you please show me the component with its style , I'm having the same issue