rgommezz/react-native-scroll-bottom-sheet

Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land :fire:

react-native-scroll-bottom-sheet's Issues

Must click before being able to scroll

Thanks for the amazing component, I've been extremely happy using it! When the scroll bottom sheet is fully open, the user must click the content before being able to scroll the list. If the user attempts to scroll before clicking, the bottom sheet itself moves. Also, when the bottom sheet is opened half way, it's impossible to scroll the content, even with clicking first. The user in this case must open the scroll sheet fully and then click before being able to scroll. Is this the intended behaviour? I've tried stripping this down (removing <TouchableWithoutFeedback> and the Animation handlers, etc and still the same results).

    <ScrollBottomSheet
      ref={bottomBarRef}
      componentType="FlatList"
      snapPoints={[128, "50%", windowHeight - 75]}
      initialSnapIndex={2}
      onSettle={(snapIndex) =>
        setBottomBarSnapIndex([snapIndex, bottomBarSnapIndex[0]])
      }
      renderHandle={() => (
        <TouchableWithoutFeedback onPress={() => handleBottomBarClick()}>
          <View style={styles.header}>
            <View style={styles.panelHandle} />
            {bottomBarSnapIndex[0] === 2 && (
              <FadeInView duration="100">
                <View style={{ height: 50 }}>
                  <Text style={{ fontSize: 18, paddingTop: 15 }}>
                    Where do you want to go?
                  </Text>
                </View>
              </FadeInView>
            )}
            {bottomBarSnapIndex[0] >= 1 && bottomBarSnapIndex[1] === 2 && (
              <FadeOutView duration="1000">
                <View style={{ height: 50 }}>
                  <Text style={{ fontSize: 18, paddingTop: 15 }}>
                    Where do you want to go?
                  </Text>
                </View>
              </FadeOutView>
            )}
          </View>
        </TouchableWithoutFeedback>
      )}
      data={scrollListData.map((item, i) => String(item.name))}
      keyExtractor={(it) => it}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Button onPress={() => navigation.openDrawer()} title={item} />
        </View>
      )}
      contentContainerStyle={styles.contentContainerStyle}
    />

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.0
react-native	0.61.5
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Dynamic bottom sheet height

Current Behavior

Height of bottom sheet is determined by snapPoints prop.

Expected Behavior

Dynamic bottom sheet height based on it's content height.
Like adjustToContentHeight prop on Modalize.

Your Environment

	version
Platform (Android, iOS or both)	both
react-native-scroll-bottom-sheet	0.7.0
react-native	0.66.4
react-native-gesture-handler	2.1.1
react-native-reanimated	2.2.4

Thanks for the nice lib!

Crashes on Android when swiping down and no data

First off, great work! Really needed something that had this functionality.

Current Behavior

I was using the example from the ReadMe. Only on android, when the data provided to the FlatList is an empty array, swiping up to open the bottom sheet fully, works perfectly. However, when swiping down to close the bottom sheet, the app crashes with the following error: "Invariant Violation: scrollToIndex out of range: requested index 0 but maximum is -1". This error does not occur ever on iOS and does not occur when there is data in the data property to the FlatList on Android.

Expected Behavior

I would expect for the the bottom sheet to snap to either the middle snap point or the bottom snap point.

How to reproduce

Starting from the example from the ReadMe, change the length of the data array to be 0.
Swipe up to fully open the bottom sheet on Android. Then, swipe down to close the bottom sheet, and the app should crash.

<ScrollBottomSheet
      ref={bottomSheetRef}
      componentType="FlatList"
      initialSnapIndex={2}
      snapPoints={['4%', '55%', '90%']}
      data={Array.from({ length: 0 }).map((_, i) => String(i))}
      keyExtractor={(i) => i}
      renderHandle={() => (
        <View style={styles.header}>
          <View style={styles.panelHandle} />
        </View>
      )}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{`Item ${item}`}</Text>
        </View>
      )}
      contentContainerStyle={styles.contentContainerStyle}
    />

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.0
react-native	0.61.5
react-native-gesture-handler	1.6.0
react-native-reanimated	1.8.0

Change in State in a props passed , cause to lose existing props

Current Behavior

I have an animated positions variable that tracks the values of the position
and i also passed scrollEnabled props to the render component which is "Scroll View"

so onSettle I change the scollEnabled behavior seems to lost other values when doing that and the animated position does not get updated anymore which I am interpolating

I manage the scrollEnabled Variable locally using a local state, which when changed causes a rerender of the component, but its not assigning other values approprietly

• What code are you running and what is happening?
• Include a screenshot if it makes sense.
  Here is a sample code I am working on

import React, { useEffect } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
import { Text, Layout, Button } from '@ui-kitten/components';
import { FlatList } from 'react-native-gesture-handler';
import House from '../../components/bottomSheet/houses';
import Animated , { Value , interpolate , Extrapolate, useCode, call} from 'react-native-reanimated';
const windowHeight = Dimensions.get('window').height;
const AnimatedButton = Animated.createAnimatedComponent(Button);

export default function Example(props) {
  const {forwardRef   } = props;
  const animatedPosition = new Animated.Value(0)
  const opacity = animatedPosition.interpolate({
    inputRange:[0,.55,1],
    outputRange:[240,550,550] ,
    extrapolate:Extrapolate.CLAMP
  })
  const innerScrollBar = React.createRef(null);
  const [scrollEnabled , setScrollEnabled] = React.useState(false);
  

  function onSettle(index) {
    console.log('index is at', index);
    if(index == 0) {
      setScrollEnabled(true);
    } else {
        innerScrollBar.current.getNode().scrollTo({y: 0, animated: true})
      setScrollEnabled(false);
    }
  }

  return (
    <>  
      <AnimatedButton style={{position:'absolute', bottom:opacity , padding:10,  right:20,  zIndex:23}} onPress={p => console.log('animation pos', animatedPosition) } >
            hello there
      </AnimatedButton>
     


      <ScrollBottomSheet // If you are using TS, that'll infer the renderItem `item` type
        componentType="ScrollView"
        ref={forwardRef}
        innerRef={innerScrollBar}
        snapPoints={[0, 200, '55%', windowHeight - 200, windowHeight - 100, windowHeight]}
        initialSnapIndex={2}
        friction={0}
        onSettle={onSettle}
        scrollEnabled={scrollEnabled}
        animatedPosition={animatedPosition}
        renderHandle={() => (
          <Layout style={styles.header} level="1"  >
            <View style={styles.panelHandle} />
            <Text category="h6" style={{ marginVertical: 5 }} onPress={e => forwardRef.current.snapTo(windowHeight)} > Explore Houses</Text>
          </Layout>
        )}
        keyExtractor={i => i}
       
        contentContainerStyle={styles.contentContainerStyle}
      >
        <Layout level="2" style={{ paddingLeft: 10 }} >
          

          <Text category="h6" > More Houses </Text>
          <Text appearance="hint" category="c1" > Hint for this group of category  </Text>

          <FlatList
            horizontal
            data={Array.from({ length: 5 }).map((_, i) => String(i))}
            renderItem={House}
            keyExtractor={i => i}
            showsHorizontalScrollIndicator={false}
          />
          <View>
            <Button appearance="ghost" style={{ textAlign: 'left' }} >  Explore more</Button>

          </View>
          <Text category="h6" > More Houses </Text>
          <Text appearance="hint" category="c1" > Hint for this group of category  </Text>

          <FlatList
            horizontal
            data={Array.from({ length: 5 }).map((_, i) => String(i))}
            renderItem={House}
            keyExtractor={i => i}
            showsHorizontalScrollIndicator={false}
            
          />
          <View>
            <Button appearance="ghost" >  Explore more</Button>

          </View>
          <Text category="h6" > More Results </Text>
          <Text appearance="hint" category="c1" > Hint for this group of category  </Text>

          <FlatList
            horizontal
            data={Array.from({ length: 5 }).map((_, i) => String(i))}
            renderItem={House}
            keyExtractor={i => i}
            showsHorizontalScrollIndicator={false}

          />
          <View>
            <Button appearance="ghost" >  Explore more</Button>

          </View>

        </Layout>

      </ScrollBottomSheet>
    </>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainerStyle: {
    backgroundColor: '#F3F4F9',
    zIndex:2323
  },
  header: {
    alignItems: 'center',
    paddingVertical: 10,
    elevation:2

  },
  panelHandle: {
    width: 40,
    height: 4,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 4,

  }
});

Expected Behavior

We will have our existing state in place

• What do you expect should be happening?
• Include a screenshot or a video if it makes sense.

How to reproduce

• You must provide a way to reproduce the problem.
• Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
• Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app, with as many details as possible.

Your Environment

	version
Platform (Android, iOS or both)	Android
react-native-scroll-bottom-sheet	0,63
react-native	0.61
react-native-gesture-handler	1.56
react-native-reanimated	1.90

Scroll gets stuck if you tap on a touchable element

Current Behavior

Currenlty, if you use a Flatlist component and each item is a touchable, if you scroll some content tap on a button, now to scroll again you need to tap on the list first and then in the next gesture scroll gets back to working

Expected Behavior

The touchable element tap should not interupt the scroll and it should function just fine

How to reproduce

• Use a flat list component type
• Use buttons in your items
• Scroll down a bit and tap on any button in the list
• Now try to scroll the list again

Your Environment

	version
Platform (Android, iOS or both)	ios v14
react-native-scroll-bottom-sheet	0.7.0
react-native	0.63.0
react-native-gesture-handler	1.9.0
react-native-reanimated	1.9.0

Orientation changes

Hey @rgommezz, really thanks about this implementation, it's saving me a lot, is the most useful and updated library to do bottom sheet at react-native.
Can you provide some tips about the orientation mode changes?
My main idea was use https://github.com/wcandillon/react-native-responsive-ui and change the snapPoints when the orientation change, but it's not working fine, this library has limitations about the snapPoints changes while it's showing?
Thanks in advance.
Good weekend.

Panel freezes with dynamic FlatList

Current Behavior

• So I am using the library with componentType specified as FlatList, but my flatlist has props that are dynamic in nature, like we have a search bar to filter the list and thus the list can change frequently. The issue is lets say if the list had 20 items and after search just 1 remains, the panel freezes completely, you cannot drag and also since the list has no scroll left nothing would happen and there is no way to get out of the screen.

Expected Behavior

The panel should just behave normally and automatically adjust with change in content.

How to reproduce

Just use a flatlist and then change the list items dynamically and you would encounter the issue.

Your Environment

	version
Platform (Android, iOS or both)
react-native-scroll-bottom-sheet	0.7.0
react-native	0.63.0
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

snapTo() not working with RN 0.63

Current Behavior

I just upgraded my project from RN 0.62.2 to 0.63 and I noticed the snapTo function appears to not be working. The code below worked fine on 0.62.2 (and the console.log shows up in 0.63, so the useEffect() is running..)

  const bottomSheetRef = useRef();

  // Close the bottom sheet
  useEffect(() => {
    if (!bottomSheetIsOpen) {
      console.log('closing BS!');
      bottomSheetRef.current.snapTo(1);
    }
  }, [bottomSheetIsOpen]);

Expected Behavior

The bottom sheet should snap to provided index

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.2
react-native	0.63.0
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Initial stage scroll collapsed

Current Behavior

I create one ScrollBottomSheet with component type ScrollView, the initial state of the scroll is not collapsed.

Expected Behavior

I like create the ScrollBottomSheet with initial state of scroll is collapsed

How to reproduce

the sample runnign in snak of expo:

https://snack.expo.io/@enieber/scrollbottomsheet

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.1
react-native	~0.61.5
react-native-gesture-handler	^1.6.1
react-native-reanimated	~1.7.0
expo	37.0.3

Component is not dragging

Current Behavior

The code bellow is not dragging up (you can assume the flatlist is empty if it makes sense)

        <ScrollBottomSheet // If you are using TS, that'll infer the renderItem `item` type
          style={{flex:1,height:'100%',backgroundColor:'#fff'}}
          componentType="FlatList"
          snapPoints={[10, this.height*0.725]}
          initialSnapIndex={1}
          onEndReached={({distanceFromEnd})=>this.onEndReached()}
          onEndReachedThreshold={0.1}
          renderHandle={() => (
            <View style={{ alignItems: 'center', backgroundColor: '#fff', paddingVertical: 20, borderTopLeftRadius: 20, borderTopRightRadius: 20,
              shadowColor: "#ccc",
              shadowOpacity: 0.3,
              shadowRadius: 5,
              shadowOffset: {
                height: 1,
                width: 1
              },
              elevation:0.6,
              backgroundColor:'#fff'}}>
              <View style={{ width: 50, height: 5, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 4}} />
            </View>
          )}
          data={results}
          keyExtractor={i => i}
          renderItem={({item,index})=>this.renderItemFlatListVertical(item,index)}
          contentContainerStyle={{backgroundColor:'#fff',flex:1}}
        />

Expected Behavior

it should drag up.

How to reproduce

Real android device model SAMSUNG Galaxy S7 edge
run the code above

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.2
react-native	0.61.2
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Compatibility with Reanimated alpha v2

Current Behavior

• The component crashes when trying to use it together with Reanimated alpha v2
• I only tried it for iOS (reanimated not linked on Android)

Expected Behavior

• Reanimated 2 is supposed to be compatible with Reanimated 1 with minor changes https://docs.swmansion.com/react-native-reanimated/docs/next/migration/
• If this library crashes with it, we cannot use other libraries that rely on Reanimated 2

How to reproduce

• Repo: https://github.com/ferrannp/bottom-sheet-reanimated2-example

Solution: Need to support interpolateNode instead of interpolate and EasingNode instead of Easing.

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.2
react-native	0.62.2
react-native-gesture-handler	1.7.0
react-native-reanimated	2.0.0-alpha.3

Infinite Scroll

Is it possible to implement infinite scroll? If yes, I'm looking for a documentation !

On drag start

Hello,

is it possible somehow to know when the sheet start to move up? I don't see any reference in the documentation, I see the onSettled but not an onDragStart.

I'm using version: 0.7.0 with expo 42.0.1

Francesco

Fixed bottom component

Hello, is there any way to achieve a design like the one below?
Basically what I need is a button fixed to the bottom of the FlatList.

Cannot read property 'prototype' of undefined

Current Behavior

• I am using version 0.7.0 and getting error *Cannot read property 'prototype' of undefined *
  

Your Environment

	version
Platform (Android, iOS or both)	ANDROID
react-native-scroll-bottom-sheet	0.7.0
react-native	0.71.7
react-native-gesture-handler	2.9.0
react-native-reanimated	3.1.0

[Feature Request] Rendering additional components

Hi, thanks for this awesome component. It's really smooth! This isn't an issue so pardon me for not following the issue format.

So I am trying to clone an app:

This can easily be done by react-native-maps + this awesome component.

Looking at the example, inside the bottom sheet, there is a horizontal scrollable list of chips. If I want to mimic that functionality inside react-native-scroll-bottom-sheet, do I have to add it in the renderHandle prop? Or is there a better way of doing this?

Thanks!

Image Carousel Libraries not swiping on Android

Question, not an issue. Both react-native-swiper and react-native-snap-carousel won't swipe on android. They work great on IOS. Has anyone been able to implement an image carousel library for this bottom sheet that works on Android?
Thank you!

TouchableOpacity onPress is called after a delay

Current Behavior

I am using code as mentioned in readme
const BottomSheetTouchable = (props) => {
if (Platform.OS === "android") {
return (
<RNGHTouchableOpacity {...props} />
);
}

return <TouchableOpacity {...props} />
};

Expected Behavior

The clicks are working fine except that there is a noticable delay. I am navigating to a new screen on tap of an item in list, and the response is very slow.

How to reproduce

Click TouchableOpacity inside BottomSheet

Your Environment

	version
Platform (Android, iOS or both)	both
react-native-scroll-bottom-sheet	"^0.7.0"
react-native	"0.63.3"
react-native-gesture-handler	"^1.8.0"
react-native-reanimated	"^1.13.1",

[Feature Request] tapper off drag at top / bottom instead of hard stop

Current Behavior

Right now when the sheet reaches the top of bottom of its range there is a hard stop.

Expected Behavior

It would be nice to add an option to taper the movement at the edges. Something like how framer motion handles drag when you reach the edges:

https://codesandbox.io/s/day-10-drag-momentum-config-ph8dd

Recalculate content position

Current Behavior

Hi, i have a problem with bottom offset that appears when i removing some element from initial layout. So when it happen the outer View seems forget to recalculate their position (or height) according to new layout. But then if we drag for e.g 1px, it becomes normal.

Expected Behavior

Like on android where it works pretty decent.

How to reproduce

Run ios emulator, scroll to bottom, then tap on "remove" to see how it works:
https://snack.expo.io/@akse/react-native-scroll-bottom-sheet-issue

On item: Pressable not detected. TouchableHightligth is detected

Current Behavior

Very weird behavior. If I use Pressable, the click is detected once over 100 of the times. With TouchableHighlight, it works perfectly!

How to reproduce

When I replace in the code below TouchableHighligth with Pressable, it doesn't work

<ScrollBottomSheet
        style={{ backgroundColor: "#f8f8f8" }}
        ref={bottomSheetRef}
        componentType="FlatList"
        // snapPoints={[128, "50%", windowHeight]}
        snapPoints={[100, windowHeight]}
        initialSnapIndex={1}
        onSettle={(index) => {
          console.log(index);
        }}
        renderHandle={() => (
          <View style={scrollBottomSheet.header}>
            <View style={scrollBottomSheet.panelHandle} />
          </View>
        )}
        data={groupContext.state.userGroupList}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <TouchableHighlight
              onPress={() => {
                console.log("onPress detected on item");
              }}
              onLongPress={() => {
                console.log("longPress detected on item");
              }}
            >
              <Text>{item.id}</Text>
            </TouchableHighlight>
          );
        }}
        contentContainerStyle={scrollBottomSheet.contentContainerStyle}
      />

Your Environment

	version
Platform (Android, iOS or both)
react-native-scroll-bottom-sheet
react-native
react-native-gesture-handler
react-native-reanimated

enableOverScroll is not working (tested on iOS)

Current Behavior

At first, I want to say thank you all for such a great project. Finally some working scrollable sheets!
But I cant make overscroll working on v0.7.0. Here is my code:

      <ScrollBottomSheet
        componentType="ScrollView"
        snapPoints={[40, windowHeight - 100]}
        initialSnapIndex={0}
        renderHandle={() => null}
        enableOverScroll
        showsVerticalScrollIndicator={false}
        animatedPosition={animatedPosition}
      >
        <View>{props.children}</View>
      </ScrollBottomSheet>

ScrollView is still not overscrolling. I've tried to check it in example code from README.md with enableOverScroll={true} prop, and have same behaviour: no overscrolling.

Your Environment

	version
Platform (Android, iOS or both)	iOS
react-native-scroll-bottom-sheet	0.7.0
react-native	0.61.5
react-native-gesture-handler	1.8.0
react-native-reanimated	1.13

renderRow re-renders?

Hi @rgommezz, thanks a lot for this great component.

I'm seeing a behavior with renderItems for the BottomList that I cannot quite understand. I expect it to behave similarly to a FlatList, which it extends. So let me get to the point and show you code with debug:

For testing purposes:

const renderRow = React.useCallback(
  ({ item, index }) =>
    console.log(`Running render with index ${index}`, item),
  []
);

Your code (I only changed the data Array to 20 instead of 100):

<ScrollBottomSheet<string>
  ...
  data={Array.from({ length: 20 }).map((_, i) => String(i))}
  renderItem={renderRow}
/>

Console output:

Running render with index 0 0
Running render with index 1 1
Running render with index 2 2
Running render with index 3 3
Running render with index 4 4
Running render with index 0 0
Running render with index 1 1
Running render with index 2 2
Running render with index 3 3
Running render with index 4 4
Running render with index 5 5
Running render with index 6 6
Running render with index 7 7
Running render with index 8 8
Running render with index 9 9
Running render with index 10 10
Running render with index 11 11
Running render with index 12 12
Running render with index 13 13
Running render with index 14 14
Running render with index 0 0
Running render with index 1 1
Running render with index 2 2
Running render with index 3 3
Running render with index 4 4
Running render with index 5 5
Running render with index 6 6
Running render with index 7 7
Running render with index 8 8
Running render with index 9 9
Running render with index 10 10
Running render with index 11 11
Running render with index 12 12
Running render with index 13 13
Running render with index 14 14
Running render with index 15 15
Running render with index 16 16
Running render with index 17 17
Running render with index 18 18
Running render with index 19 19

Simple FlatList code:

<FlatList
  data={Array.from({ length: 20 }).map((_, i) => String(i))}
  renderItem={renderRow}
/>

Console output:

Running render with index 0 0
Running render with index 1 1
Running render with index 2 2
Running render with index 3 3
Running render with index 4 4
Running render with index 5 5
Running render with index 6 6
Running render with index 7 7
Running render with index 8 8
Running render with index 9 9
Running render with index 10 10
Running render with index 11 11
Running render with index 12 12
Running render with index 13 13
Running render with index 14 14
Running render with index 15 15
Running render with index 16 16
Running render with index 17 17
Running render with index 18 18
Running render with index 19 19

For the record, I'm getting this when using your own example code, not just when using in my own project.
As you can see, FlatList returns what I would expect, but I'm not sure this is a bug or a problem. This may be a newbie question, if so I apologize. Perhaps it's meant to behave this way, but then I don't quite get why. Isn't it re-rendering the same data over and over?

onEndReached

The onEndReached function performs strangely

React Native Paper's List component not working properly in Android

Current Behavior

I'm trying to use react-native-paper's List component inside the bottom sheet and the behavior in Android is strange. I have to press it longer just to make the ripple appear, and the onPress handler doesn't fire.

iOS

Android

Expected Behavior

Pressing the List.Item will cause the ripple to appear (without long pressing it) and fire the onPress event handler.

How to reproduce

Snack: https://snack.expo.io/@wobsoriano/react-native-paper-with-bottom-sheet

1. Clicking an item should show a timestamp below the Appbar
2. Pressing an item should make the ripple appear.

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.1
react-native	37.0.1
react-native-gesture-handler	1.6.0
react-native-reanimated	1.7.0

This project really rocks btw 👊🏿

Observation: Actually, all clickable items like the react native paper's Button inside the bottom sheet doesn't fire the onPress event in Android.

Render only handle initially?

Current Behavior

I'm using this to render a scrollview. It is not consistently showing the height of the handle as a snap point. Using height (screen) - 50, the height of the screen - the handle, shows nothing, and bumping it up to higher shows various amounts of the handle and content, and it varies across android and ios

Expected Behavior

I'd expect screen height - height of handle would just render the handle

How to reproduce

<ScrollBottomSheet
  componentType="ScrollView"
  snapPoints={[128, '50%', height - 50]} // 50 is height of handle
  initialSnapIndex={2}
  renderHandle={() => (
    <View
      style={{
        backgroundColor: 'white',
        borderBottomWidth: 0.1,
        height: 50,
        flexDirection: 'row',
        justifyContent: 'center',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: -10,
        },
        shadowOpacity: 0.1,
        shadowRadius: 5.0,
        elevation: 16,
      }}
    >
      <View style={{
        width: 22,
        height: 4,
        backgroundColor: '#BDBDBD',
        borderRadius: 4,
        marginTop: 17,
      }}
      />
    </View>
  )}
>
  // I don't want any of this view shown initially
  <View
    style={{ backgroundColor: 'red, height: 1000 }}
  />
</ScrollBottomSheet>

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.0
react-native	expo 37 - 0.6.0
react-native-gesture-handler	1.6.0
react-native-reanimated	1.7.0

TouchableItem does not accept first press on android

Current Behavior

Using the Flatlist BottomSheet... TouchableItem doesn't accept onPress event at the first press on android with react-native-gesture-handler TouchableOpacity component

Expected Behavior

Should accept onPress event when pressed

How to reproduce

• You must provide a way to reproduce the problem.
• Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
• Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app, with as many details as possible.

Your Environment

package	version
react-native-scroll-bottom-sheet
react-native	0.63
react-native-gesture-handler	^1.6.1
react-native-reanimated	^1.9.0

onPress event on Handle not detected when ScrollBottomSheet is closed (100%)

Current Behavior

I'm pretty new in react-native so maybe I missed it.
Anyway the ScrollBottomSheet seems working OK. I wanted to add the possibility to open (respectively close) fully the ScrollBottomSheet when I tap on the handle while the bottome sheet is closed (respectively open).

So display the handle through TouchableOpacity and detect onPress event on which I call the function snapTo of my ScrollBottomSheet depending on the current index provided by onSettle event.

The onSettle event works on all snapping Points, however the onPress event does not work when the ScrollBottomSheet is closed.

My component:

import React, { createRef } from 'react';
import { Dimensions, StyleSheet, Text, Image, View, TouchableOpacity } from 'react-native';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';

const DEVICE_HEIGHT = Dimensions.get('screen').height;
const WINDOW_HEIGHT = Dimensions.get('window').height;

const windowHeight = Dimensions.get('window').height;
const windowWidth = Dimensions.get('window').width;
const space_btw_items = 5;
const item_width = 70;
const bottomSheetRef = createRef()    //Un crée une ref de composant pour plus tard
class ScrollStack extends React.Component {
  constructor(props) {
    super(props)
     this.state = {
       imageSource: Array.from({ length: 200 })
     }
  }

  _getNumberOfColumns = () => {   //Retourne le nombre de colonnes max en fonction du tel 
    return(
      Math.floor((windowWidth-space_btw_items) / (item_width + space_btw_items),0)
    )
  }

  render() {
    return (
      <View style={styles.container} 
        >
        <ScrollBottomSheet // If you are using TS, that'll infer the renderItem `item` type
          ref={bottomSheetRef}    //On donne un nom à notre composant ScrollBottomSheet pour l'appeler plus tard
          componentType="FlatList"
          snapPoints={['0%', '100%']} //{[top of the screen, pas d'autre point d'arrêt 'xx%', windowHeight-28 = windowHeight - hauteur de la poignée]}
          initialSnapIndex={1} // 1 pour commencer en bas
          topInset={140-(DEVICE_HEIGHT-WINDOW_HEIGHT)} //C'est pour remonter la stack list de 80(HScrollList) + 20 (poignée de la StackList) - 6 (ça je sais pas pourquoi)
          numColumns={ this._getNumberOfColumns() }
          //friction={1}
          onSettle={(index) => {
            currentIdex = index
            //console.log(index)
          }}
          renderHandle={() => (
            <TouchableOpacity 
              style={styles.header}
              onPress={() => {
                console.log("event detected, current index is "+currentIdex+". I launch command snapTo to the index "+((currentIdex == 1) ? 0: 1));
                bottomSheetRef.current?.snapTo((currentIdex == 1) ? 0: 1);
              }}
              >
              <View style={styles.panelHandle}/>
              <View style={styles.panelHandle2}/>
            </TouchableOpacity>
          )}
          data={this.state.imageSource.map((_, i) => String(i))}
          keyExtractor={i => i}
          renderItem={({ item }) => (
            <TouchableOpacity 
              style={styles.item}
              onPress={() => {
               console.log("onPress detected on item")
              }} 
              onLongPress={() => {
                console.log("longPress detected on item")
              }}
            >
              <Text>{item}</Text>
            </TouchableOpacity>
          )}
          contentContainerStyle={styles.contentContainerStyle}
          extraData={this.state}
          //disableScrollViewPanResponder={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    zIndex: 20,
  },
  contentContainerStyle: {
    padding: space_btw_items,
    backgroundColor: '#F3F4F9',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  header: {
    alignItems: 'center',
    backgroundColor: '#CCCCCC',
    opacity: 1,
    height:20,
    paddingVertical: 7, //hauteur entre le haut du header et la première poignée
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20
  },
  panelHandle: {
    width: 80,
    height: 2,
    backgroundColor: 'white',
    marginBottom: 2,    //espacement entre les deux poignées
    borderRadius: 1
  },
  panelHandle2: {
    width: 80,
    height: 2,
    backgroundColor: 'white',
    borderRadius: 1
  },
  item: {
    //padding: 2,
    justifyContent: 'center',
    backgroundColor: '#D3D3D3',
    alignItems: 'center',
    margin: space_btw_items/2,
    width: item_width,
    height: item_width,
    borderRadius: 10,
    opacity: 0.8,
  },
});

export default ScrollStack;

Expected Behavior

I expect the onPress event when my ScrollBottomSheet is closed to be detected so I can just by one tap open the list immediately.

How to reproduce

This not an expo project. The code above should work to reproduce my issue.

Your Environment

Test on Android
My dependencies:

  "dependencies": {
    "@react-navigation/bottom-tabs": "^5.11.10",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-android-immersive-mode": "^1.3.0",
    "react-native-draggable-flatlist": "^2.6.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-paper": "^4.8.1",
    "react-native-reanimated": "^2.0.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.1.1",
    "react-native-scroll-bottom-sheet": "^0.7.0",
    "react-native-svg": "^12.1.1",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-vector-icons": "^8.1.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "transcript": "0.0.6"
  },

Controlling the drawer not working on example app

Current Behavior

I'm trying to control the drawer position from the ref variable using the snapTo method.

• What code are you running and what is happening?
  Running example code from horizontal screen.

Expected Behavior

• What do you expect should be happening?
  Pressing X to fully close the drawer.

How to reproduce

• You must provide a way to reproduce the problem.
  1- clone the project
  2- run the expo client(I'm running on android)
  3- select horizontal screen
  4- swipe the drawer up
  5- press the X button
  6- (the problem) the drawer stucks in the middle(wrong result of action)

Your Environment

System:
    OS: Linux 5.1 Arch Linux
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 2.29 GB / 15.59 GB
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.11.3 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 16, 26, 28, 29
      Build Tools: 26.0.3, 28.0.3, 29.0.0
      System Images: android-16 | Intel x86 Atom, android-16 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: 21.0.6113669
  npmPackages:
    react: ~16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
  npmGlobalPackages:
    react-native-cli: 2.0.1

Observations: I also tried to control the drawer in my current project. I've ditched my own component because this one looks awesome(Thanks for the great component)! But I"m having a hard time controlling the drawer. The snapTo is not responding properly to the argument I'm giving it; it only fully opens at first call(even though the argument was to open at middle position) and does not animate to any position in the remaining calls.
I've tried to execute the example app and found out that the drawer is not outputting the exact same actions as in the gif in the README is as well.

Use spring instead of timing

You should consider using react-native-reanimated spring instead of timing.

https://software-mansion.github.io/react-native-reanimated/spring.html

You can use the gesture's velocity as a starting velocity so that the bottomsheet snaps to a snap point at a natural speed & momentum -- better user experience.

Change snapPoints dynamically via state

Hi there! First off, tanks for the hard work you put into this library, it's been really helpful. Also, sorry for not using the issue template, this is more of a question rather than a bug report.

So… I've been trying to wrap BottomSheet so it behaves like a modal, that part was easy enough (literally, just wrap it in a <Modal />). I use the snapTo method to animate the sheet's entry, so far so good, except I don't know what the modal content's height is so I'd like to set the snapPoints based on the modal's content.

The problem, it seems, is that the BottomSheet doesn't seem to care about the updated snapPoints 🤷‍♂️

This is a short version of the code:

const MyCoolModal = () => {
  const ref = useRef();
  const insets = useSafeArea();
  const [snapPoints, setSnapPoints] = useState([insets.top, '50%', screenHeight]);

  const handleLayout = ({ nativeEvent }) => {
    setSnapPoints([insets.top, nativeEvent.layout.height, screenHeight]);
  };

  useEffect(() => {
    ref.current.snapTo(1);
  }, [snapPoints]);

  return (
    <Modal transparent>
      <ScrollBottomSheet
        componentType="ScrollView"
        initialSnapIndex={2} // so it's off screen at the beggining
        ref={ref}
        renderHandle={() => (
          <Header>
            <Handle />
          </Header>
        )}
        snapPoints={snapPoints}>
        <Content onLayout={handleLayout}>{children}</Content>
      </ScrollBottomSheet>
    </Modal>
  );
};

Each snap Point can scroll

Current Behavior

Only scroll when the list is at the top

Expected Behavior

Each snap Point can scroll the list, and only the handle can be dragged
Or give me some hints how to achieve, thanks

Your Environment

	version
Platform (Android, iOS or both)	iOS
react-native-scroll-bottom-sheet	0.7.0
react-native	0.64.2
react-native-gesture-handler	1.5.0
react-native-reanimated	2.0.1

1640158100598884.mp4

Showing static data inside bottom sheet

Hello,

I have been playing around with this library, and I enjoyed it very much. Though I have a question. Is it possible achieve scrollview-like behavior with this library? I want to render a certain pre-defined amount of items inside the bottom sheet, so I do not really need lazy loading behavior. So the only way to achieve this right now would be to pass an array of size 1 to the data prop, and render the views inside renderItem prop function.

I was wondering if I could do something like this:

< ScrollBottomSheet ...props>
{ /* Views I want to render */ }
</ ScrollBottomSheet>

Initially I thought componentType="ScrollView" would allow me to specify child views, which would be rendered inside the ScrollBottomSheet. Since ScrollBottomSheet still takes renderItem and data props, even though it is in ScrollView mode, how are ScrollView and FlatList modes different? In what case would one use ScrollView mode instead of FlatList?

SegmentedControl ignores touch events

This is a truly great package for scrollable bottom sheets. Would really appreciate any help with this bug.

Current Behavior

SegmentedControl does not update when pressed.

Expected Behavior

When I touch the SegmentedControl it should update. It responds to onTouchStart but it seems like the actual onChange event is consumed and therefore doesn't update. Buttons and Touchables seem to work fine, not sure why the same doesn't apply to SegmentedControl.

How to reproduce

• Add a SegentedControl anywhere inside ScrollBottomSheet and try to select another value.

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.2
react-native	0.62.2
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Is it possible for the bottomsheet to have the size of the content instead of defining a snapPoint?

Hello,

I'm currently developing a bottomsheet that doesn't need scroll, but this library looks like has the best performance between the 3 or 4 i saw.

One question i have is that if it's possible for the height of the bottom sheet to be equal to the content of it, instead of trying to calculate the height/padding/margin of every content to subtract to the windowHeight..

So basically, is it possible to render this bottomSheet without specifying a snapPoint, and let it grow until the size of the content matches the size of the sheet?

Awesome library btw, good work!

useScrollToTop hook is not working with library

I'm trying to implement scrollToTop when clicking on the tab bar icon. The hook works great with ScrollView and FlatList, the documentation also states that it works with SectionList, but this does not happens. I'm trying using ref like: useScrollToTop(ref.current.getNode());, also tried use like useScrollToTop(ref).
<ScrollBottomSheet componentType="SectionList" -> this is my config for ScrollBottomSheet.

does scrolling works with this library at all?

also tried to reproduce the ref.current.getNode (). scrollTo ({y: 0, animated: true}) method described in the library documentation, not working for me

link to react navigation hook: https://reactnavigation.org/docs/use-scroll-to-top/

Remove 1px border under the handle

I am using renderHandle prop to show the handle, under which is 1px border set. How could I please remove it? The only solution I came up with is to move the renderHandle component by top: 1, which is not the greatest solution I assume?

docs: reanimated minumum version should be in the README

I tried to add this library to a project I started last year, and I was using [email protected] which makes the use of this component throw an error saying Value is not a constructor right in the first line it tries to initialize the Value object.
After updating it to latest(1.9.0), the app successfully rendered with no errors

Allow snapTo to interrupt previous animation

Current Behavior

If you invoke snapTo before the previous animation is finished (before onSettle), nothing will happen.

Expected Behavior

The ongoing animation should stop, and the new snapTo should begin. Animations can take a few hundred ms before state.finished is updated. For example, if I open a sheet, drag it around, and then immediately try to dismiss it via snapTo, often the first attempt to dismiss will be ignored.

How to reproduce

Invoke snapTo when an existing animation is running before it has fully settled.

Your Environment

	version
Platform (Android, iOS or both)	both
react-native-scroll-bottom-sheet	0.7.0
react-native	0.62.2
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Can't make the bottom sheet full height

Current Behavior

The bottom sheet is not full height, even if snap points are set to 100%

How can we make the bottom scrollable sheet full height?

Expected Behavior

How to reproduce

import React from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
import {Text} from '@ui-kitten/components';
const windowHeight = Dimensions.get('window').height;

export default function Example() {
  return (
    <View style={styles.container}>
      <ScrollBottomSheet // If you are using TS, that'll infer the renderItem `item` type
        componentType="FlatList"
        snapPoints={[188, '100%', windowHeight -200]}
        initialSnapIndex={2}
        renderHandle={() => (
          <View style={styles.header}>
            <View style={styles.panelHandle}/>
              <Text category="h4"  > Explore Houses Neaerby </Text>
          </View>
        )}
        data={Array.from({ length: 20 }).map((_, i) => String(i))}
        keyExtractor={i => i}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{`Item ${item}`}</Text>
          </View>
        )}
        contentContainerStyle={styles.contentContainerStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainerStyle: {
    padding: 16,
    backgroundColor: '#F3F4F9',
  },
  header: {
    alignItems: 'center',
    backgroundColor: 'white',
    paddingVertical: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20
  },
  panelHandle: {
    width: 40,
    height: 2,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 4
  },
  item: {
    padding: 20,
    justifyContent: 'center',
    backgroundColor: 'white',
    alignItems: 'center',
    marginVertical: 10,
  },
});

• You must provide a way to reproduce the problem.
• Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
• Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app, with as much details as possible.

Your Environment

	version
Platform (Android, iOS or both)	Android
react-native-scroll-bottom-sheet	0.63
react-native	0.61
react-native-gesture-handler	1.5.6
react-native-reanimated	0.11

With animationType='spring', calling 2 times snapTo with same index will block subsequent calls to snapTo

Current Behavior

With this modification of the "bank" example:

diff --git a/example/screens/SectionListExample.tsx b/example/screens/SectionListExample.tsx
index 192ff26..dd1acdd 100644
--- a/example/screens/SectionListExample.tsx
+++ b/example/screens/SectionListExample.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import Constants from 'expo-constants';
 import { FontAwesome5, Ionicons } from '@expo/vector-icons';
-import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
 import { Colors, ProgressBar } from 'react-native-paper';
 import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -36,7 +36,8 @@ const navBarHeight = 56;
 const sections = createMockData();
 
 const SectionListExample: React.FC<Props> = () => {
-  const snapPointsFromTop = [96, '45%', windowHeight - 264];
+  const snapPointsFromTop = [96, '45%', windowHeight];
+  const sheetRef = React.useRef<ScrollBottomSheet<ListItemData>>(null);
   const animatedPosition = React.useRef(new Value(0.5));
   const handleLeftRotate = concat(
     interpolate(animatedPosition.current, {
@@ -76,6 +77,11 @@ const SectionListExample: React.FC<Props> = () => {
 
   return (
     <View style={styles.container}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around', width: '100%'}}>
+        <TouchableHighlight onPress={() => sheetRef.current?.snapTo(0)}><Text>Snap to 0</Text></TouchableHighlight>
+        <TouchableHighlight onPress={() => sheetRef.current?.snapTo(1)}><Text>Snap to 1</Text></TouchableHighlight>
+        <TouchableHighlight onPress={() => sheetRef.current?.snapTo(2)}><Text>Snap to 2</Text></TouchableHighlight>
+      </View>
       <View style={styles.balanceContainer}>
         <Text style={styles.poundSign}>£</Text>
         <Text style={styles.balance}>4,345</Text>
@@ -116,9 +122,11 @@ const SectionListExample: React.FC<Props> = () => {
         </View>
       </View>
       <ScrollBottomSheet<ListItemData>
+        ref={sheetRef}
         enableOverScroll
         removeClippedSubviews={Platform.OS === 'android' && sections.length > 0}
         componentType="SectionList"
+        animationType="spring"
         topInset={statusBarHeight + navBarHeight}
         animatedPosition={animatedPosition.current}
         snapPoints={snapPointsFromTop}

To reproduce:

• tap on "Snap to 1"
• => it snaps to 1 ✅
• tap a 2nd time on "Snap to 1"
• tap on "Snap to 0"
• => nothing happens ❌

Expected Behavior

Expected:

• tap on "Snap to 1"
• => it snaps to 1 ✅
• tap a 2nd time on "Snap to 1"
• tap on "Snap to 0"
• => it snaps to 0

You can verify the expected behavior if you remove the prop animationType="spring"

Your Environment

	version
Platform (Android, iOS or both)	iOS 14.0
react-native-scroll-bottom-sheet	master@4267d879b88d686b3c28a649dbaa3ec3203108dd
react-native	https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Tests failing after installing react-native-scroll-bottom-sheet

After installing tests have started failing for some reason?

package	version
react-native-scroll-bottom-sheet	0.6.1
react-native	0.62.2
react-native-gesture-handler	1.5.0
react-native-reanimated	1.8.0

Struggling to work out what's going on. Removing react-native-scroll-bottom-sheet causes the test to pass again 🤔

[Feature Request]Support bounce

Currently you can not go beyond snap points even a single pixel, which makes it hard to implement something like pull to refresh/load more.

FlatList scrolling with pan gesture not working properly

Hello @rgommezz first of all, I'd like to thank you for the awesome package :)

Current Behavior

Currently, I'm not able to scroll the bottom sheet with the pan gesture over the flatlist
If I drag the handle everything works fine, problem is I'd like to reproduce the behaviour of your SectionList example but I don't understand what I'm missing.
This is a GIF of my current behaviour:

Expected Behavior

I'd like to reproduce the behaviour of your example, I tried to download it and run it with expo on iOS simulator, and the animation "jumps" after I start dragging, release the gesture, when I tap again the bottom sheet jumps to the expected position

How to reproduce

I have this structure to wrap a react-native storybook

    <>
      <BottomSheetContext.Provider value={{ openBottomSheet, closeBottomSheet, renderHandle }}>
        {children}
        {isVisible && !!bottomSheetProps && (
          <>
            <TouchableWithoutFeedback onPress={closeBottomSheet}>
              <AnimatedBackground style={{ opacity }} />
            </TouchableWithoutFeedback>
            <ScrollBottomSheet<any>
              {...bottomSheetProps}
              ref={bottomSheetRef}
              onSettle={handleSnapPointChanged}
              animatedPosition={animatedPosition.current}
              animationConfig={{
                duration: 150
              }}
              contentContainerStyle={{
                backgroundColor: Colors.WHITE_100
              }}
            />
          </>
        )}
      </BottomSheetContext.Provider>
    </>

If I give contentContainerStyle prop a value of flex:1, it works but the flatlist stops scrolling when I reach the top (like setting flex 1 on a normal FlatList).

Any idea?

Your Environment

package	version
react-native-scroll-bottom-sheet	0.6.2
react-native	61.5
react-native-gesture-handler	1.6.1
react-native-reanimated	1.7.1

Error: ... You can now directly use the ref instead. This method will be removed in a future release., FlatList, getNode()

Current Behavior

Getting the following error when scrolling down + hide on Android:
%s: Calling %s on the ref of an Animated component is no longer necessary. You can now directly use the ref instead. This method will be removed in a future release., FlatList, getNode()

index.tsx line 781. Removed getNode() and the warning is gone.

Before:
// @ts-ignore
const node = this.props.innerRef.current?.getNode();

After:
// @ts-ignore
const node = this.props.innerRef.current;

How to reproduce

Just scroll down from inside the FlatList very fast and you get the error.

Your Environment

	version
Platform (Android, iOS or both)
react-native-scroll-bottom-sheet
react-native
react-native-gesture-handler
react-native-reanimated

react-native-keyboard-aware-scroll-view works incorrectly on Android

Current Behavior

Code

<ScrollBottomSheet {...props} componentType="ScrollView"> <KeyboardAwareScrollView> ... </KeyboardAwareScrollView> </ScrollBottomSheet>

Expected Behavior

Environment

	version
Platform (Android, iOS or both)	Android
react-native-scroll-bottom-sheet	0.7.0
react-native	0.63.2
react-native-gesture-handler	1.7.0
react-native-reanimated	1.13.0

How to set the drag in px for the user to close or open the drawer

Current Behavior

I have the drawer set up but if user doesn't drag the set amount of pixels, it goes back to last snap point. Basically if the user is not doing the drag gesture at set velocity and area we bring back the drawer to the last snap point.

Expected Behavior

Is there a way for us to set the velocity and area a user should drag in order to open/close the drawer? Like for instance I want that the user with even small flick should be able to open/close the drawer. Is there a way to set that up?

How to reproduce

Just use any drawer and do the flick/drag gesture at slow speed or in very less area.

Your Environment

	version
Platform (Android, iOS or both)
react-native-scroll-bottom-sheet	0.7.0
react-native	0.63.1
react-native-gesture-handler	1.6.1
react-native-reanimated	1.9.0

Android: sheet stops between snap points

Hi!
I found that on Android it is possible to interrupt sheet transition to snap point by quickly tapping on it. Screen recording is attached. Reproduced on Android only, seems okay on iOS. There is no difference if tap happened on nested horizontal scroll view or just on static content.

Here is my use-case:

      <ScrollBottomSheet
        componentType="ScrollView"
        snapPoints={[0, windowHeight - 100]}
        initialSnapIndex={0}
        renderHandle={() => null}
        enableOverScroll
        showsVerticalScrollIndicator={false}
        animatedPosition={animatedPosition} // used to animate overlay behind sheet
        containerStyle={{
          overflow: 'hidden',
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          elevation: 5,
          backgroundColor: '#ffffff',
        }}
      >
        <Container>
          <HorizaontalSlider /> // based on ScrollView from react-native-gesture-handler
          <OtherStuff />
        </Container>
      </ScrollBottomSheet>

I guess that I can prevent any touches while sheet is hiding, but don't know yet how to do it.

	version
Platform (Android, iOS or both)	Android
react-native-scroll-bottom-sheet	0.7.0
react-native	0.61.5
react-native-gesture-handler	1.8.0
react-native-reanimated	1.13.0

How to hide vertical Scroll bar

is there a way to hide vertical scroll bar? thanks

Typing issue on `innerRef`

innerRef prop actually gets a an AnimatedComponent<FlatList | ScrollView | SectionList> rather than just a FlatList | ScrollView | SectionList (the type AnimatedComponent<T> does not exist in reanimated though).

We should do something like this:

class AnimatedFlatList extends Component<AnimateProps<FlatListStyle, FlatListProps>> {
  getNode(): ReactNativeView;
}

// same for AnimatedScrollView and AnimatedSectionList

type Props = {
  ...,
  innerRef: RefObject<AnimatedFlatList | AnimatedScrollView | AnimatedSectionList>;
}