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.

Answer 1

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>
  )
}