Search code examples
react-nativedropdown

How to use an image for a dropdown in React-native?

I'd like to know if it's possible to replace the line 'periods' by a file like an icon/image ? Maybe not with this package but whatever. In short I want to replace the underline text by an image. I don't find anything that could do... Thanks for any help

I have this :

enter image description here

When I click it gives me this :

enter image description here

with this code :

<View style={[styles.centeredView, {marginTop:0}]}>
              <MaterialDropdown
                label={i18n.t("mytrips.date.date")}
                data={data_dropdown}
                baseColor="#212121"
                labelFontSize={17}
                textColor="#212121"
                itemColor="#212121"
                selectedItemColor="#000"
                backgroundColor="transparent"
                pickerStyle={styles.dropdownPickerStyle}
                affixTextStyle={{ fontFamily: "FunctionLH" }}
                itemTextStyle={{ fontFamily: "FunctionLH" }}
                labelTextStyle={{ fontFamily: "FunctionLH" }}
                containerStyle={[styles.dropdownContainerStyle, {borderWidth: 0}]}
                itemCount={10}
                dropdownPosition={-4.5}
                labelExtractor={({ label }) => label}
                valueExtractor={({ value }) => value}
                propsExtractor={({ props }, index) => props}
                onChangeText={(value) => this.choiceAction(value)}
                useNativeDriver={true}
                  </View>}
              />
            </View>
Solution

  • In the same container where you have material drop down make another Image element and make it absolute

    <View>
   ....
   <MaterialDropDown ......
   <Image style={{position:'absolute',right:16, top:0,bottom:0} source={{your_drop_down_image}/>