Drop down scroll is not working inside another scroll in react-native-dropdown-picker
I already tried giving
listMode="SCROLLVIEW"
scrollViewProps={{
nestedScrollEnabled: true,
}}
to the as a prop. But still not working.
here is my code
<SafeAreaView edges={['right', 'left', 'bottom']} style={styles.container} >
<ScrollView>
<View style={[globalStyles.contentWrap, { marginBottom: 16, height: 1000 }]}>
<View>
<View style={{ zIndex: 10 }}>
<DropDownPicker
listMode="SCROLLVIEW"
placeholder="Select your restaurant"
style={{
borderColor: Colors.borderColor,
backgroundColor: '#fff',
borderWidth: 1,
paddingHorizontal: 12,
paddingVertical: Platform.OS === 'ios' ? 12 : 6,
fontSize: 16,
borderRadius: 5,
marginTop: 8,
marginBottom: 16,
}}
dropDownContainerStyle={{
borderColor: Colors.borderColor,
color: Colors.black1,
fontSize: 16,
borderRadius: 5,
}}
placeholderStyle={{
color: '#696969',
fontSize: 16,
}}
textStyle={{
fontSize: 16,
}}
dropDownMaxHeight={240}
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
schema={{
label: 'name',
value: 'id',
}}
/>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
The scroll bar shows in the dropdown but its not scrollable. here is a reference image..
As per their official documentation, you can't have a inside scrollview.
Notes#
The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning. If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise you have to use the MODAL mode.
See this link: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/list-modes
If you are facing issue with nested scrolling. Use ScrollView of react-native-gesture-handler with nestedScrollEnabled={true}. It works better in android. You can also patch react-native-dropdown-picker for that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.