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

Question

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

Solution 1

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>

Solution 2

Another good answer would be to add:

alignItems: 'stretch'

alignItems: 'stretch' will stretch every child element along the Cross Axis as long as the child element does not have a specified width (flexDirection: row) or height (flexDirection: column). ​

In your container if you have one, something like:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
  }
});

Solution 3

try getting the View's dimensions first:

<View 
    onLayout={(event) => {
        var {x_pos, y_pos, width, height} = event.nativeEvent.layout;
    }} 
/>

Then use the retrieved width and height to set your TextInput's width and height. The only thing is you get these values on runtime.