Scrollview Not Scrolling in Android Bottomsheet

ScrollView's scroll is not working inside bottomsheet?

After a lot of research I finally solved my issue by placing the scrollview inside a trasperent linear layout as we can't set maxHeight of any view in xml and now it's scrolling .
Ref :https://stackoverflow.com/a/13811461/8953835

Bottom Sheet Android- Scrolling issue

Instead of using scrollview you can use NestedScrollView
that works better with CoordinatorLayout
make sure to use app:layout_behavior="@string/appbar_scrolling_view_behavior" for smooth scrolling of content inside NestedScrollView

mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                mBottomSheetBehavior.setPeekHeight(0);
            }
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        }
    });

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.btn_negetive: {
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            mBottomSheetBehavior.setPeekHeight(Constants.PEEK_HEIGHT);
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            break;
        }
        case R.id.btn_positive: {
            //some code
        }
    }
}

the above solution worked for me using this link:
https://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031

ListView in BottomSheet not scrolling

try this :

com.example.nicsutherland.stationfinder.Adapters.BottomSheetListView
                android:id="@+id/list_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:nestedScrollingEnabled="true"\\insert this line
/>

FlatList not working inside BottomSheet on Android

After a lot of research, I was able to resolve the issue by using BottomSheetFlatList instead of FlatList from the same package.

import { BottomSheetFlatList } from "@gorhom/bottom-sheet";

<BottomSheetFlatList
        ref={ref}
        initialNumToRender={3}
        keyExtractor={(item) => item?.id}
        showsVerticalScrollIndicator={false}
        maxToRenderPerBatch={3}
        windowSize={7}
        data={dat}
        renderItem={renderItem}
      />

By doing so, it started working fine on android too.

But as I also wanted my Flatlist to auto-scroll using ref on a particular event.

After some research and because of the great documentation of @gorhom/bottom-sheet. I found out the solution in the troubleshooting section of the docs.

But as a developer, StackOverflow is our first go-to place for every issue. So, I decided to post the answer here.

ANSWER

Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler, any gesture interaction would not function as expected.

To resolve this issue, please use ScrollView & FlatList from react-native-gesture-handler provide instead react-native.

import {
  ScrollView,
  FlatList
} from 'react-native-gesture-handler';

find the original answer here-
https://gorhom.github.io/react-native-bottom-sheet/troubleshooting

---

Related Topics