Reputation: 373
I am working on a react native project but my scrollView is not working on small View height. This is my code.
<View style={{height: 300}}>
<ScrollView>
<View>
...
</View>
<View>
...
</View>
...
</ScrollView>
</View>
Please what could be the problem?
UPDATE
I have added more styling to explain further... The scrollView is in a bottom sheet react-native-raw-bottom-sheet
which is the RBSheet as seen in the code. The scrollView isn't scrolling. Is anything wrong?
<View>
<RBSheet
ref={ref}
closeOnDragDown={true}
closeOnPressMask={true}
height={500}
customStyles={{
draggableIcon: {
backgroundColor: Colors.light,
},
container: {
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
},
}}>
<View style={{flex: 1}}>
<View style={{padding: 16}}>
<View style={{height:300}}>
<ScrollView showsVerticalScrollIndicator={true}>
<View
style={[
FlexDirections.row,
JustifyContent.spaceBetween,
{paddingVertical: 8},
]}>
<Text style={FontWeight.bold}>Name</Text>
<Text>Jane doe</Text>
</View>
...
</ScrollView>
</View>
</View>
</View>
</RBSheet>
</View>
Upvotes: 0
Views: 2518
Reputation: 587
You can set closeOnDragDown to false.
If you need closeOnDragDown to be true, what you can try is to add an TouchableOpacity directly after the ScrollView like this:
<ScrollView showsVerticalScrollIndicator={true}>
<TouchableOpacity activeOpacity={1}>
<View
style={[
FlexDirections.row,
JustifyContent.spaceBetween,
{ paddingVertical: 8 },
]}>
<Text style={FontWeight.bold}>Name</Text>
<Text>Jane doe</Text>
</View>
</TouchableOpacity>
</ScrollView>
Upvotes: 1