Walter Walter - 2 months ago 20
React JSX Question

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

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

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 >
Comments