Status Bar Web Browser Notch

[santimartin]

Hi there!

I found what I think is a bug, when you open the Web Browser with the status bar hidden in a notch device, for example, iPhone X, appears a transparent space.

I think that would be great if without status bar that space was cover also without status bar.

Web Browser bug - Snack

[ochui]

Hello @santimartin,
I don’t think that a bug.
Simply wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application’s design.

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

See docs here SafeAreaView · React Native

[santimartin]

Hi @ochui,

Thanks for your response, this works with the app, but when I open the Web browser it still appears without the top status bar.

[marcusstenbeck]

Hey @santimartin,

I don’t know if it’s a bug, but you can solve it by having a state property that keeps track of if the status bar should be hidden or not. Here’s a code snippet that will do that for you. I tested it on the iPhone X simulator and it works great.

I know you would have rather not have the status bar even with the browser popup, but I hope this way will solve at least some of your issues.

import * as React from 'react';
import { View, StyleSheet, Button, StatusBar } from 'react-native';
import { Constants, WebBrowser } from 'expo';

export default class App extends React.Component {
  state = { shouldHideStatusBar: true };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={this.state.shouldHideStatusBar} animated />
        <Button onPress={this._handlePressButtonAsync} title={'Open URL'} />
      </View>
    );
  }

  _handlePressButtonAsync = async () => {
    this.setState({ shouldHideStatusBar: false });
    await WebBrowser.openBrowserAsync('https://stenbeck.io');
    this.setState({ shouldHideStatusBar: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'lightblue',
    padding: 8
  }
});