0

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?

Rahul Chaudhari
  • 2,230
  • 21
  • 29

1 Answers1

1

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>
Fateh Farooqui
  • 134
  • 1
  • 3
  • Actually, View component is wrapped into a separate component and have used in multiple places. So using the above leads to so much complexity. – Rahul Chaudhari Oct 27 '18 at 11:21
  • The views which you want to open on fullscreen mode, you can use the Modal of React Native for those views. – Fateh Farooqui Oct 27 '18 at 11:26
  • Problem is, am having lots of other progress bar related stuff is going on, on that View. And using a Modal leads to handle lots of complexity. Perfect solution without complexity, is expand it. – Rahul Chaudhari Oct 29 '18 at 06:57
  • You can pass down a function that sets a state through which you can hide the footer and header , to the Shared View and set that to be called on onPress of the View, for that you can use TouchableNativeFeedback, this will trigger the parent function from the child component, and it will cause parent to re render. – Fateh Farooqui Oct 29 '18 at 07:05