React Native: How to set <TextInput/>'s height and width to <View/> container?

javascript css reactjs react-native jsx
Walter picture Walter · Sep 28, 2016 · Viewed 25.9k times · Source

I currently have a <TextInput> inside a <View> that has a padding: 15. I would like for the <TextInput>'s width and height to cover all space inside <View> except the padding.

So I tried var width = Dimensions.get('window').width and the following, but the < TextInput > abide to the padding on the left but when you continue to type, it goes beyond the right side padding:

<View style = {{ padding: 15 }}> <TextInput style = {{ width: width }} /> </View>

So how can I get the TextInput to cover all space, height and width, inside View yet abide to the View's padding rule as well?

Thank you

Answer

rudydydy picture rudydydy · Sep 28, 2016

Try setting the styling of TextInput to flex: 1 instead of getting the width. The Flex style will automatically fill your view and leave the padding blank.

<View style = {{ padding: 15 }}> <TextInput style = {{ flex: 1 }} /> </View>

Related questions

Make view 80% width of parent in React Native

I'm creating a form in React Native and would like to make my TextInputs 80% of the screen width. With HTML and ordinary CSS, this would be straightforward: input { display: block; width: 80%; margin: auto; } Except that React Native doesn't support the …

Read More
FlatList not scrolling

i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction? render-function and style from …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More