CODEWITHSUNDEEP
reactjsemailinputnative
David Pham
David Pham

Reputation: 327

Styling React Native Inputs

I'm new to React Native and I've been playing around with inputs. How can I achieve the look of the first picture from their documentation?

https://react-native-training.github.io/react-native-elements/docs/input.html

I'm looking at their documentation, and I see there is a field called inputContainerStyle. However, I don't see any values that I could potentially use.

This is what I have:

<Input placeholder="Email Address" textAlign="center" autoCapitalize = "none" leftIcon={<Icon name='user' size={24} color='black'/>}/>

Upvotes: 1

Views: 1096

Answers (1)

Producdevity
Producdevity

Reputation: 882

This probably isn't possible with only a Input component.

You might solve this by adding 2 View components. One on each side of the TextInput.

These Views should be styled as a triangle. Take a look at this css explanation for more info https://css-tricks.com/snippets/css/css-triangle/

This is one way to achieve your goal, I don't know if it's the 'best' way.

Upvotes: 1

Related Questions