CODEWITHSUNDEEP
react-nativenative-base
Rahul Chaudhari
Rahul Chaudhari

Reputation: 2240

React native expand View full screen above header and footer component

We have a situation where on a screen there are multiple View components are present. And each component has some progress bar related stuff.

But when the user taps on any View, we want to expand it to the full screen and we are doing it by applying a new style,

  fullscr: {
    top: 0,
    left: 0,
    height: "100%",
    width: 100%,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  }

But the View is not expanding above Header and Footer of native base. It is expanding rest of the view but not Header and Footer.

I tried zIndex and elevation option but no luck. How can I expand a view to fill the entire screen?

Upvotes: 0

Views: 3230

Answers (1)

Fateh Farooqui
Fateh Farooqui

Reputation: 144

You can conditionally hide the footer and header of native-base, that way in the Container component of native-base you have your view inside Content.

<Container>
{condition ? <Fragment> :<Header/>}
<Content>
  {{Your main view goes here}}
</Content>
{condition ? <Fragment> :<Footer/>}
</Container>

Upvotes: 1

Related Questions