React native TextInput border not working

Question

Here's my style for the input:

 searchBarInput: {
  flex: 1,
  fontSize: 20,
  fontWeight: 'bold',
  color: 'white',
  height: 50,
  padding: 0,
  backgroundColor: 'transparent',
  borderColor: '#000000', 
  borderWidth: 50,  
  borderStyle: 'solid',
 }

If I change the border width, the size of the input changes, but still there's no visible border.

I am using react-native 0.15.0 with an android device.

Answer 1

Does this answer your question : https://github.com/facebook/react-native/blob/master/docs/KnownIssues.md#text-input-border

It seems it is a known bug from react-native...

You can try and wrap it in a view component and set the border you want on the view component.

Answer 2

As per react native doc, you need to set below in text input properties:

multiline={true}

Answer 3

This is now fixed on Android via underlineColorAndroid="transparent"

source: https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#text-input-border (archive)