Borders in textInput in React-Native autocomplete-input

Question

I'm trying to delete the top, right and left borders of my textInput (so obviously, I'd like to have just the bottom border :) ) with the package react-native-autocomplete-input

I tried borderTop : 0 / and 'transparent' but it's not working I still have the borders on top and sides. borderStyle didn't work either

I get this: https://zupimages.net/viewer.php?id=20/03/ovck.bmp

my code is this:

  <ScrollView style={styles.containerScroll}>
      <Text style={styles.h1}>{i18n.t("tripsform.title")}</Text>
      <Autocomplete
        containerStyle={styles.container}
        inputContainerStyle={styles.inputContainer}
        autoCapitalize="none"
        autoCorrect={false}
        data={this.findAirports(query_arrival)}
        defaultValue={this.findAirports(query_start)}
        onChangeText={text => this.setState({ query_start: text })}
        placeholder="Enter Start airports"
        renderItem={({ airport }) => (
          <TouchableOpacity
            onPress={() => this.setState({ query_start: airport })}
          >
            <Text style={styles.h2}>{airport}-</Text>
          </TouchableOpacity>
        )}
      />
      <Autocomplete
        containerStyle={styles.container}
        inputContainerStyle={styles.inputContainer}
        autoCapitalize="none"
        autoCorrect={false}
        data={this.findAirports(query_arrival)}
        defaultValue={this.findAirports(query_arrival)}
        onChangeText={text => this.setState({ query_arrival: text })}
        placeholder="Enter Arrival airports"
        renderItem={({ airport }) => (
          <TouchableOpacity
            onPress={() => this.setState({ query_arrival: airport })}
          >
            <Text style={styles.h2}>{airport}-</Text>
          </TouchableOpacity>
        )}
      />
      <Form ref={c => (this._form = c)} type={Trip} options={options} />
      <Text>{"\n"}</Text>
      <Text>{"\n"}</Text>
      <Button
        containerStyle={[styles.mybtnContainer]}
        style={styles.mybtn}
        onPress={this.handleSubmit}
      >
        {i18n.t("tripsform.item.add").toUpperCase()}
      </Button>
      <Button
        onPress={() => this.props.navigation.navigate("MyTrips")}
        containerStyle={[styles.mybtnContainer]}
        style={styles.mybtn}
      >
        Return to my trips
      </Button>
      <Text>
        {"\n"}
        {"\n"}
      </Text>
    </ScrollView>

with this style:

inputContainer: {
minWidth: 300,
width: "90%",
height: 55,
backgroundColor: "transparent",
color: "#6C6363",
fontSize: 18,
fontFamily: "Roboto",
borderBottomWidth: 1,
borderBottomColor: "rgba(108, 99, 99, .7)"
},

If I can get any help that's really nice, thanks for reading and for any help !

Answer 1

It seems that it's impossible with that package.

I could do what I wanted to do with 'native base autocomplete'. So, it doesn't completely answer the question but it allows you to do the right thing!