React Native: Make a view take the whole screen when other view is not present

Question

This may seem like a basic question, but I can't seem to figure it out or properly word a search on this. I have a View with two other Views in it, one of which sometimes is hidden. So the component looks something like this:

function MyComponent (props) {
  return (
    <View style={{ flex: 1 }}>
      {
        props.showButtonView
          ? (
            <View style={{ flex: ??? }}>
              <Button title='do something' onPress={() => console.warn('doSomethign)} />
            </View>
          )
          : null
      }
      <View style={{ flex: ?? }}>
        <Stuff/>
      </View>
    </View>
  )
}

Now, what I am trying to do is have the Stuff component cover the entire screen whenever the Button is not present. However, if the props.showButtonView is true, and we do want to see the view with the Button I only want need to see the button on the top, and then the rest is whatever is in the Stuff component. How do I get this done? Is it based on the flex numbers?

Also, you may be wondering why I need to separate these two into separate Views in the first place, the reason for that is because there are other unrelated things in the Stuff component that cover the button and don't allow me to click it. Anyway, long story short, the separation of the two by View is mandatory for this case.

abhikumar22 · Accepted Answer · 2019-11-19T18:15:50.050

3

flex should be 1 for both the places.

Flex:1 Indicates that it will takes the whole space available after if. So, it doesn't really matters when a button is placed there or not.
Whenprops.showButtonView is true then the button is at the top and rest your stuff is placed after that.

Otherwise,

When props.showButtonView is false then button render code will not be executed and then stuff view will be all over your

Try below code when props.showButtonView === true

function MyComponent (props) {
  return (
    <View style={{ flex: 1 }}>
      {
        props.showButtonView
          ? (
            <View style={{ width: '100%' }}>
              <Button title='do something' onPress={() => console.warn('doSomethign)} />
            </View>
          )
          : null
      }
      <View style={{ flex: 1 }}>
        <Stuff/>
      </View>
    </View>
  )
}

edited Nov 19 '19 at 18:15

answered Nov 19 '19 at 18:02

abhikumar22

1,764
2
11
24

If I put `flex: 1` on both places, each of their views covers half the screen, which is not what I want since the button is only a fraction of the screen. So on my improvised code, I currently have the button's view with `flex: 1`, which the other one is `flex: 10`, but that doesn't feel right. I want to guarantee that the button will only cover enough space to display the button, while the other view will cover the rest of the screen. – theJuls Nov 19 '19 at 18:05
are you struggling when props.showButtonView is true ?? @theJuls – abhikumar22 Nov 19 '19 at 18:06
Correct. It divides the screen equally. I do not want that since the button is much smaller than the `Stuff` component. – theJuls Nov 19 '19 at 18:07
i have edited the code, please try and accept if it works. Thanks :) – abhikumar22 Nov 19 '19 at 18:16
don't remember the context of this question or anything, but I am sure it worked XD Better 2 years late than never I suppose. – theJuls Feb 04 '21 at 00:58

React Native: Make a view take the whole screen when other view is not present

1 Answers1