React Native: How to set the height and width of <TextInput / "> to the <View /"> container?

Question

Currently I have < TextInput >inside < View >, which has padding: 15. I would like the width and height to < TextInput >'scover all the space inside < View >except the fill.

So, I tried the var width = Dimensions.get('window').widthfollowing, but < TextInput >stick to the pad on the left, but when you continue to enter text, it goes beyond the right side:

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

So, how can I get TextInput to cover all the space, height and width, inside the View it still remains in accordance with the rule of view additions?

thank

Answer 1

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

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

Answer 2

Another good answer is to add:

alignItems: 'stretch'

alignItems: "stretch" stretches each child on the Cross axis if the child does not have the specified width (flexDirection: row) or height (flexDirection: column).

In your container, if you have something like:

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

Answer 3

View:

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

, TextInput. , .