Create a React-Native App to Display a Web App and Use SafeAreaView

Last week I needed to create a React Native app to display a web app in a web browser, this is a temporary solution as I work on a real native app. I used create-react-native-app and Expo, which I would highly recommend.

Using create-react-native-app was super nice, I was able to create a React Native app in minutes, no guessing or going through documentation to see what files or dependencies I need to get started.

I hadn’t heard of Expo, but I’ll definitely be using React Native for all of my mobile apps now, just because Expo is so helpful! The ability to see changes in real time on physical devices and emulators, plus the ease of building .apk and .ipa files, plus so many more features I haven’t used yet, makes it amazing!

The most difficult part was getting SafeAreaView to work the way I wanted. I used SafeAreaView to take care of the formatting for the iPhone X type devices, since the Home bar/not button/thing was in the way of the web browser window.

My issue was that I couldn’t get the status bar to be orange, and the chin area to stay white, it was also orange. Then I realized that the way I set this up originally had created a small chin at the bottom of Android and standard iPhone devices.

After enough messing around, I finally came up with a solution. It formatted the WebView perfectly, plus had the colors I wanted in the right areas.

This is what my code looks like:

export default class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <SafeAreaView style={ styles.statusBar } />
        <SafeAreaView style={ styles.webView }>
            <WebView
              source={{ uri: 'https://test-webapp.com' }}/>
        </SafeAreaView>
      </React.Fragment>
    );
  }
}

const styles = StyleSheet.create({
  statusBar: {
    flex: 0,
    backgroundColor: '#ff9136'
  },
  webView: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 30
  }
});

Leave a Reply

Your email address will not be published. Required fields are marked *