Search code examples
react-nativeexporeact-native-paper

cannot set background color on dropdown from React native paper dropdown


I used a react-native-paper-dropdown and the styles I am applying wont get set for example the background color wont change;

<DropDown
      // label={''}
      mode="flat"
      visible={showDropDown}
      showDropDown={() => setShowDropDown(true)}
      onDismiss={() => setShowDropDown(false)}
      value={country}
      setValue={setCountry}
      list={countriesList}        
      dropDownStyle={{
        width: 100,
        backgroundColor: 'white',
        borderColor: 'white',
        shadowColor: 'white',
    }}
  />

Solution

  • this code worked for me to change background color of the dropdown.
    
        <DropDown
          // label={'P'}
          mode={'outlined'}
          visible={showMobileDropDOwn}
          showDropDown={() => setShowMobileDropDOwn(true)}
          onDismiss={() => setShowMobileDropDOwn(false)}
          setValue={setPhoneCountry}
          value={phoneCountry}
          list={codes}
          inputProps={{
            style:{
              width:90,
              backgroundColor: 'rgb(252,243,207)',
              height:20
            }
          }}
        />