Search code examples
react-nativedropdown

Remove the line under dropdown in react-native

I have a dropdown used with react-native-material-dropdown and I can't find a way to remove the underline of the label... What am I missing ? Thanks for your help I tried inputContainerStyle={{borderBottomWidth: 0}}

and

lineWidth={0}
activeLineWidth={0}
disabledLineWidth={0}

but.. no success. my code :

<View style={[styles.centeredView, {marginTop:0}]}>
              <MaterialDropdown
                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]}
                lineWidth={0}
                activeLineWidth={0}
                disabledLineWidth={0}
                itemCount={10}
                dropdownPosition={-4.5}
                labelExtractor={({ label }) => label}
                valueExtractor={({ value }) => value}
                propsExtractor={({ props }, index) => props}
                onChangeText={(value) => this.choiceAction(value)}
                useNativeDriver={true}
              />
              <Image
                source={require("../../assets/images/btn-flights-listing.png")}
                style={{position:'absolute',
                        width: "35%",
                        height: 30,
                        alignItems: "center",
                        justifyContent: "center"}}/>
            </View>

style :

dropdownPickerStyle: {
    backgroundColor: "#FFF",
    position: "absolute",
    bottom: "auto",
  },
dropdownContainerStyle: {
    width: "75%",
    zIndex: 100,
    margin: 0,
    padding: 0,
  },

Underline dropdown

Solution

  • Ciao, to remove the underline you have to pass underlineColor='transparent' to MaterialDropdown component like:

    <MaterialDropdown
   underlineColor='transparent'
   ...
/>