react-native-modal dropdown only displays 9 values than when I select any value and open the dropdown again it shows me remaining values I have tried this solution stackoverflow.com/q/68266570/10619360 but its not working you can check the images
<ModalDropdown
ref={dropdown}
style={{ width: '100%' }}
showsVerticalScrollIndicator={false}
options={["Lottes", "Stelzer", "Puchtler", "Reichel", "Hühnermobil", "Simplebakery", "Ruckdeschel", "Seidel", "Bloß", "Wunderlich", "Edeka", "Harles"]}
onSelect={(index, val) => (setValue(val), setError(null))}
renderRow={(rowData, rowID) => renderDropDownList(rowData)}
dropdownStyle={{
marginTop: 0.5,
width: '75%',
borderRadius: 10,
borderWidth: 0,
elevation: 3,
overflow: 'hidden',
}}
>
<Pressable
onPress={() => dropdown.current?.show()}
style={{ marginTop: 40 }}>
<View style={{
...globalStyles.input,
justifyContent: 'space-between',
padding: 2
}}>
<TextInput
editable={false}
value={value}
placeholder='Lieferant'
style={{
...FONTS.regular,
height: 40
}} />
<View
style={{
height: "100%",
borderRadius: 10,
width: '14%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.primary,
}}>
<Image
source={icons.dropdown}
resizeMode="contain"
style={{
height: 15,
width: 12,
tintColor: COLORS.secondary,
}}
/>
</View>
</View>
</Pressable>
</ModalDropdown>
const renderDropDownList = (rowData) => {
return <Text style={{
...FONTS.regular,
fontSize: 14,
padding: 10,
}} >{rowData}</Text>
}