React-native equivalent of Flutter's SafeArea Container?

I am trying to wrap my app in a container to prevent content from getting underneath the status bar. I don't want to have to write platform specific code; the same container should work for both android and ios.

Flutter has a container called SafeArea which takes props: top, bottom, right, left, and child. Down below, you can see how SafeArea can be configured to avoid the status bar.

return new SafeArea(
  top: true,
  bottom: false,
  right: false,
  left: false,
  child: new Stack(
    children: <Widget>[
      new Container(
        color: Colors.green,
      ),
      new Scaffold(
        backgroundColor: const Color(0x00000000),
        appBar: new CustomTabBar(
          pageController: _pageController,
          pageNames: pages.keys.toList(),
        ),
        body: new PageView(
          controller: _pageController,
          children: pages.values.toList(),
        ),
      ),
    ],
  ),
);

The closest react-native equivalent, that I could find, was SafeAreaView but it didn't work on my Galaxy S7. Here is the code that I ran:

import React, { Component } from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import Navigator from './Navigator'

export default class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <Navigator />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#ddd'
  },
});

I don't think it is designed to fix status bar issue on anything other than the iphone X; however, as of 8 days ago (at the time of writing), it seems that it isn't even working for ios anymore.

Is there any other way to do this?