0

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

enter image description here

enter image description here

  <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>

}

mayra
  • 73
  • 8

0 Answers0