Setting a border for react native TextInput

Question

Using React native 0.26,

My component is something like this

const Search = () => {
    return (
      <View style={styles.backgroundImage}>
        <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/>
      </View>
    )
}

And my styles :

const styles = StyleSheet.create({
  backgroundImage: {
    flex : 1,
    flexDirection: "column",
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    justifyContent: "center",
    alignItems: "stretch",
    borderRightWidth: 30,
    borderLeftWidth: 30,
    height: 50,
    borderColor: "#FFFFFF",
  }
})

The problems that I am facing are

The border right width and left width do not seem to have any effect and the placeholder text just begins on the left edge.
The background of TextInput is "grey" its the same as the View's background. I was expecting it to be white by default, (Feels transparent).
With iOS simulator how to bring up the keyboard, I would like to set returnKeyType and see how the keyboard looks (and have some code on onSubmitEditing and test).

Screenshot below :

score 37 · Accepted Answer · edited Dec 11 '17 at 06:31

1 You cannot declare a specific border directly on the TextInput unless multiline is enabled (For example borderLeftWidth will not work unless multiline={true} is enabled but borderWidth will work), but you can just wrap the TextInput in a View and give it a border.

inputContainer: {
  borderLeftWidth: 4,
  borderRightWidth: 4,
  height: 70
},
input: {
  height: 70,
  backgroundColor: '#ffffff',
  paddingLeft: 15,
  paddingRight: 15
}

2 You need to declare a backgroundColor for the TextInput.

3 To make the native keyboard show up, you need to go to the simulator menu and disconnect your hardware. Go to Hardware -> Keyboard -> Connect Hardware Keyboard, toggle it off.

the links which you specified is not working. @nader dabit – Ashok R Nov 16 '17 at 13:40 — Ashok R, Nov 16 '17 at 13:40

score 13 · Answer 2 · answered Dec 23 '19 at 08:57

13

As of react-native: 0.61.5 you can directly set the borderBottomWidth on TextInput. Like below in inline style or if you want in separate style object.

  style = {{borderBottomWidth : 1.0}}

answered Dec 23 '19 at 08:57

Mohammad Sadiq

5,070
28
29

Works perfectly! Thanks! – Fernando Barbosa May 12 '21 at 19:59

score 2 · Answer 3 · answered Jan 21 '20 at 11:19

By default the boderWidth will be set for 0. So use borderWidth : 5 defaults for (Top, Right, Bottom, Left).

If you want to asign width individually you have options like,

style = {{
borderStartWidth : 2
borderEndWidth : 3
borderTopWidth : 1
boderLeftWidth: 2
borderRightWidth: 3
borderBottomWidth : 4
}}

Setting a border for react native TextInput

3 Answers3

Linked