ScollView does not work within the drawer

[impavidum]

My code displays the view with the items going off the screen but the view will not scroll. I have tried messing with zIndex and wrapping in views etc with no luck. I have also tried a vertical scroll view and it does not scroll either. Any help is appreciated.

[impavidum]

<BottomDrawer
        containerHeight={JOBS_LIST_HEIGHT}
        offset={TAB_BAR_HEIGHT}
        startUp={false}
        downDisplay={DOWN_DISPLAY}
        roundedEdges={true}
      >
        <ScrollView horizontal={true}>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
        </ScrollView>
      </BottomDrawer>

[venzersiz]

Oh! I got the same problem.

[loga4]

add <TouchableOpacity> inside scrollview like:

<BottomDrawer
        containerHeight={JOBS_LIST_HEIGHT}
        offset={TAB_BAR_HEIGHT}
        startUp={false}
        downDisplay={DOWN_DISPLAY}
        roundedEdges={true}
      >
        <ScrollView horizontal={true}>
<TouchableOpacity>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
          <View style={styles.date}><Text>Today</Text></View>
</TouchableOpacity>
        </ScrollView>
      </BottomDrawer>

[yasaricli]

@impavidum

yarn add https://github.com/yasaricli/rn-bottom-drawer.git

<BottomDrawer
  containerHeight={420}
  offset={10}
  downDisplay={340}
  roundedEdges={true}
  panResponder={false} // add panResponder to false
  responder={(panHandlers) => {
    return (
        <ScrollView horizontal={true}>
          <TouchableOpacity>
            <View style={styles.date} {...panHandlers}><Text>BottomDrawer</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
          </TouchableOpacity>
        </ScrollView>
    )
  }}
/>

[sharpmachine]

If swipe on the horizontal ScrollView to open or close the drawer, it doesn't work.

[impavidum]

@sharpmachine https://github.com/osdnk/react-native-reanimated-bottom-sheet

[Helo3615]

Still not working for me with <TouchableOpacity>

<View>
	<BottomDrawer containerHeight={screenHeight * 0.95}
			  startUp={false}
			  downDisplay={screenHeight * 0.75}
			  shadow={true}
			  style={styles.bottomDrawer}
	>
		<View style={styles.topBar} />
		<ScrollView style={styles.listContainer}>
			<TouchableOpacity activeOpacity={1}>
				{ content.map((item, index) =>
					<ListItem title={item.name}
							leftAvatar={{ source: { uri: item.image } }}
							subtitle={item.description}
							key={index}
							subtitleStyle={styles.listSubtitle}
					/>
				)}
			</TouchableOpacity>
		</ScrollView>
	</BottomDrawer>
</View>

[fsobh]

How can I add a FlatList instead of a scrollview?

[haneul512]

How can I add a FlatList instead of a scrollview?

Wrapping TouchableOpacity around each renderItem did the trick for me

[abbasmoosavi]

Still not working for me with <TouchableOpacity>

<View>
	<BottomDrawer containerHeight={screenHeight * 0.95}
			  startUp={false}
			  downDisplay={screenHeight * 0.75}
			  shadow={true}
			  style={styles.bottomDrawer}
	>
		<View style={styles.topBar} />
		<ScrollView style={styles.listContainer}>
			<TouchableOpacity activeOpacity={1}>
				{ content.map((item, index) =>
					<ListItem title={item.name}
							leftAvatar={{ source: { uri: item.image } }}
							subtitle={item.description}
							key={index}
							subtitleStyle={styles.listSubtitle}
					/>
				)}
			</TouchableOpacity>
		</ScrollView>
	</BottomDrawer>
</View>

Thanks! save my life

[wl05]

@impavidum

yarn add https://github.com/yasaricli/rn-bottom-drawer.git

<BottomDrawer
  containerHeight={420}
  offset={10}
  downDisplay={340}
  roundedEdges={true}
  panResponder={false} // add panResponder to false
  responder={(panHandlers) => {
    return (
        <ScrollView horizontal={true}>
          <TouchableOpacity>
            <View style={styles.date} {...panHandlers}><Text>BottomDrawer</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
            <View style={styles.date}><Text>Today</Text></View>
          </TouchableOpacity>
        </ScrollView>
    )
  }}
/>

but how you slide down the drawer?

[fsobh]

If You also set the nested ScrollView / FlatList style to have a zIndex : 1 , then the first tap gesture made should be detected by the scrolling view before the bottom sheet. this was my only working work around for nested scroll view in BottomSheet for Android. Still works the same on IOS.

Also, use FlatlLst or ScrollView from react-native-gesture-handler instead of react-native