React Native: How to set 's height and width to 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

score 38 · Accepted Answer · edited Aug 07 '18 at 08:52

38

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>

edited Aug 07 '18 at 08:52

Dimitar Tsonev

3,711
5
40
70

answered Sep 28 '16 at 06:02

rudydydy

749
7
11

1

thank you! It's working nicely. One question, why does it have to be clicked right at the beginning of the TextInput to get the text cursor up and to start typing? How can I do it so that if I click anywhere the TextInput covers, the text cursor at the beginning will pop up and I can start typing? – Walter Sep 28 '16 at 10:05
This only handles width but the question is how to set height and width to view container. – Nunchucks Apr 25 '19 at 19:29

score 18 · Answer 2 · answered Oct 25 '17 at 13:40

18

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',
  }
});

answered Oct 25 '17 at 13:40

Gonzalo Ortellado

573
1
5
8

This should be the accepted answer as it handles height and width, not just width. – Nunchucks Apr 25 '19 at 19:31

score 1 · Answer 3 · answered Sep 28 '16 at 07:18

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.

React Native: How to set 's height and width to container?

3 Answers3