[Layout] flexbox while changed StatusBar height (e.g. while having a hotspot open)

[PhilippKrone]

Hello,

I'm having a simple flexbox as view with a HeaderBar and a FooterBar. It seems that the FooterBar is not positioned correctly while having e.g. a hotspot open (resulting in an increased standard IOS status bar). The footer seems to be below the end of the screen (e.g. too low).

Regards
Philipp

P.S. I know #871, but thats not working for me (even worse than before, seems to push the box more down)

[brentvatne]

Maybe there should be a better way of dealing with this built into react-native, cc @vjeux, but you can try this out until then https://github.com/brentvatne/react-native-status-bar-size

Based on changes in the status bar size, you could add a negative margin of the difference between the new status bar height and the default (20) to your container and that should offset it properly.

Let me know if this helps @PhilippKrone

[PhilippKrone]

Thanks for your help, @brentvatne. I was already doing something similar (although not with an event listener, but just checking the current height in the componentDidMount method), but thought there might be something built in RN already, as this should be an issue for nearly every app, shouldnt it?

Regards,
Philipp

[brentvatne]

@PhilippKrone - agreed - it's still very early for react-native so it's likely that something like this will get built in eventually. Does the negative margin trick approximate what the default behaviour should be for you? (Shift content up to appear underneath the status bar). Perhaps we could look at building this in.

[PhilippKrone]

@brentvatne Yes, it has worked. For the sake of documentation, I have done the following:

1. around my "Navigator", I have added a view:

     <View style={[styles.flex1, this.getStatusBarHeight()]}>
       <Navigator ....
       />
     </View>

2. the method "getStatusBarHeight()" returns "top: 20 - currentStatusBarHeight":

  getStatusBarHeight: function() {
    var t = 20 - this.state.currentStatusBarHeight;
    return {
      top: t,
    }
  },

3. for the rest, I was following your minimal example @ https://github.com/brentvatne/react-native-status-bar-size

Sure, we can take a look at implementing something like that directly in RN!

Regards
Philipp

[brentvatne]

Great - this issue seems to be coming up a lot and I think a good solution would be to automatically do those offsets, but there should be a way to disable that as well, just in case. I'm sure @vjeux would have a better comprehensive insight into what would work best here.

[vjeux]

iOS model is really tricky here. Let say we have a navigation bar and a tab bar. The normal way you would implement it is by doing:

<Container>
  <Navigation />
  <Content />
  <TabBar />
</Container>

and let the layout system automatically figure out what navigation and tabbar take and size the content with the remaining space.

However, Apple designers decided to make the navigation and tab bar semi-transparent, which complicates everything. Now instead of having 3 boxes laid out on-top of each other, <Content /> needs to be as tall as the container BUT have some padding equal to the size of the top and bottom bars.

The way Apple implements this is by having the following structure:

<Navigation offsetTop={40}>
  <TabBar offsetBottom={30}>
    <Content />
  </TabBar>
</Navigation>

As you go deeper in the hierarchy you accumulate those offsets and when you reach the first element that's a ScrollView, you apply some negative margin up and down and padding up and down equal to the accumulated offsets.

Someone tried to implement this but it proved to be difficult in the current architecture because we run React Native in a separate thread layout -before- we render the iOS elements. Those offsets are computed in iOS layout phase which happens in the main thread -after- React Native layout.

Then, we realized that it was going to be super tricky and we found easy workarounds in our use cases so we didn't invest much time on it. This is however something that needs to be fixed :)

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/layout-flexbox-while-changed-statusbar-height-eg-while-having-a-hotspot-open

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix. We rely on the community to provide
bugfixes as the core team is focused on performance.