CODEWITHSUNDEEP
androidreact-native
xtrinch
xtrinch

Reputation: 2281

React native TextInput border not working

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.

Upvotes: 7

Views: 7245

Answers (3)

damio
damio

Reputation: 6301

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)

Upvotes: 2

jainmitesh09
jainmitesh09

Reputation: 173

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

multiline={true}

Upvotes: 2

G. Hamaide
G. Hamaide

Reputation: 7106

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.

Upvotes: 7

Related Questions