CODEWITHSUNDEEP
react-nativereact-native-text
Sathyakumar Seshachalam
Sathyakumar Seshachalam

Reputation: 2053

Setting a border for react native TextInput

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

  1. The border right width and left width do not seem to have any effect and the placeholder text just begins on the left edge.
  2. 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).
  3. 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 : Screenshot

Upvotes: 28

Views: 90150

Answers (3)

Sukshith S
Sukshith S

Reputation: 501

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
}}

Upvotes: 3

Mohammad Sadiq
Mohammad Sadiq

Reputation: 5241

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}}

Upvotes: 13

Nader Dabit
Nader Dabit

Reputation: 53681

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.

Upvotes: 37

Related Questions