TextInput border and width within a React-Native view

Question

I have a react-native view that has this piece:

<View style={styles.section}>
          <Text style={styles.h2}>
            NAME
          </Text>
          <TextInput style={styles.input} placeholder="Name" />
          <Text style={styles.h2}>
            EMAIL
          </Text>
          <TextInput style={styles.input} placeholder="Password" />
        </View>  

input: {
    height: 30,
    flex: 0.7,
    fontSize: 13,
    padding: 4,
    borderBottomColor: '#fff',
    borderRightColor: 'transparent',
    borderLeftColor: 'transparent',
    borderTopColor: 'transparent',
    borderTopWidth: 0,
    borderBottomWidth: 0.5,
  },

Unfortunately, this shows no border (instead of the desired underline border), and both input boxes take up the full screen (instead of the 0.7 flex I want). How do I fix this?

wrap textinputs with views and assign input style (except fontSize) to them — Burak Karasoy, Oct 11 '16 at 06:06

score 2 · Accepted Answer · edited May 23 '17 at 10:31

You cannot declare a specific border directly on the TextInput unless multiline is enabled you can checkout this link.

I wrap my TextInput in a view and then add a border to the view and in your case you don't want your text input to be full width I just add a margin on the left and right.

Wrapping the TextInput inside views:

<View style={styles.section}>
           <Text style={styles.h2}>
             NAME
           </Text>
           <View style={styles.inputView}>
            <TextInput style={styles.input} placeholder="Name" />
           </View>
           <Text style={styles.h2}>
             EMAIL
           </Text>
           <View style={styles.inputView}>
              <TextInput style={styles.input} placeholder="Password" />
           </View>
</View>

The styles for those views:

input: {
  height: 40,
  fontSize: 13,
  padding: 4,
},
section:{
  marginLeft:10,
  marginRight:10,
},
inputView:{
  borderBottomColor: '#fff',
  borderBottomWidth: 0.5,
}

TextInput border and width within a React-Native view

1 Answers1