CODEWITHSUNDEEP
react-nativestylesborderexpotextinput
Kimako
Kimako

Reputation: 625

Borders in textInput in React-Native autocomplete-input

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 !

Upvotes: 0

Views: 2935

Answers (4)

Airesh Bhat
Airesh Bhat

Reputation: 1

You can set the inputContainer style borderWidth to 0:

    // other styles
    inputContainer: {
        borderWidth: 0,
    },

Upvotes: 0

Kimako
Kimako

Reputation: 625

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!

Upvotes: 0

User
User

Reputation: 1

This Should give you the desired output :) :

<Autocomplete
   inputContainerStyle={{width:"100%",borderBottomWidth:1}}
   inputStyle={{borderWidth:0}}
   data={Options}
   handleSelectItem={(item,id)=>optionHandler(item.value,id)}
   valueExtractor={item => item.value}
  />

Upvotes: 0

fayeed
fayeed

Reputation: 2485

You need to use inputContainerStyle property to apply styles to the input.

You can also use containerStyle to style the container around the AutoComplete so you also don't need to wrap the Autocomplete with View tag.

<Autocomplete
  inputContainerStyle={styles.inputContainer}
/>

Upvotes: 1

Related Questions