Search code examples
androidreact-nativedrop-down-menudropdown

Vertical scrolling on React Native Dropdowns


My Android app built using React Native doesn't allow one to scroll a DropDownPicker (github.com/hossein-zare/react-native-dropdown-picker). What can be changed in the below code to fix this? The parent components and relevant styles can be found below. The code itself is also wrapped in a flex 1 container view.

 <View style = {styles.dropdownContainerIn}>
           <TextInput
             keyboardType = "number-pad"
             style = {styles.toAmount}
             placeholder="Amount"
             placeholderTextColor="white" 
             value = {text}
             editable = {false}
             maxLength = {18}
           />
           <DropDownPicker
             placeholder={from}
             open={openFrom}
             items={baseCurrencies}
             setOpen={setOpenFrom}
             onOpen={() => setOpenTo(false)}
             setItems={setBases}
             onSelectItem={(from) => {setFrom(from.label)}}
             style={styles.dropdown}
             textStyle={styles.dropdownText}
             dropDownContainerStyle={styles.dropdownOption}
             searchable = {true}
             searchPlaceholder="Search"
         />
    </View>


dropdown:{
   backgroundColor: "transparent",
   borderColor: 'white',
   borderWidth: 3,
   width: 120,
   height: 60,
   borderRadius: 3,
   flex: 1
 },
 dropdownText:{
   fontSize: 15,
   fontWeight: 'bold',
   color: 'white',
 },
 dropdownOption:{
  backgroundColor: '#123',
   borderColor: 'white',
   borderWidth: 2,
   width: 340,
   transform: [{translateX: -220}],
 },
 dropdownContainerIn:{
   flexDirection: 'row',
   transform: [{translateX: 140}, {translateY: 160}],
   marginRight: 20,
 },
 toAmount:{
   width: 220,
   height: 60, 
   borderColor: 'white',
   borderWidth: 3,
   borderRadiusLeft: 3,
   borderRightWidth: 0,
   color: 'white',
   fontSize: 20,
   paddingLeft: 15,
 },

Solution

  • For those encountering this issue add this line of code underneath the import statements: DropDownPicker.setListMode("MODAL")