/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View
} from 'react-native'
import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

type Props = {};
type State = {
  safeAreaInsets: SafeAreaInsets,
};

export default class App extends Component<Props, State> {
  state = {
    safeAreaInsets: {
      top:0, left: 0, bottom: 0, right: 0,
    },
  }

  // To keep the context of 'this'
  onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(this)

  componentWillMount() {
    // Set initial safe area insets
    SafeArea.getSafeAreaInsetsForRootView()
      .then((result) => {
        const { safeAreaInsets } = result
        this.setState({ safeAreaInsets })
      })
  }

  componentDidMount() {
    // Add event listener
    SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
  }


  componentWillUnmount() {
    // Remove event listener
    SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
  }

  onSafeAreaInsetsForRootViewChange(result: { safeAreaInsets: SafeAreaInsets }) {
    const { safeAreaInsets } = result
    this.setState({ safeAreaInsets })
  }

  render() {
    const { safeAreaInsets } = this.state

    return (
      <View style={styles.container}>
        <View style={[styles.content, {
          marginTop: safeAreaInsets.top,
          marginLeft: safeAreaInsets.left,
          marginBottom: safeAreaInsets.bottom,
          marginRight: safeAreaInsets.right,
        }]}>
          <Text style={styles.label}>
            {'It\'s safe!'}
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#99ff99',
  },
  label: {
    color: '#333333',
    fontSize: 30,
    fontWeight: 'bold',
  },
})

@@ -194,33 +194,22 @@
 ort 
-SafeArea, %7B type 
+%7B with
 SafeArea
 Inse
@@ -204,22 +204,16 @@
 SafeArea
-Insets
  %7D from 
@@ -242,1133 +242,173 @@
 a'%0A%0A
-type Props = %7B%7D;%0Atype State = %7B%0A  safeAreaInsets: SafeAreaInsets,%0A%7D;%0A%0Aexport default class App extends Component%3CProps, State%3E %7B%0A  state = %7B%0A    safeAreaInsets: %7B%0A      top:0, left: 0, bottom: 0, right: 0,%0A    %7D,%0A  %7D%0A%0A  // To keep the context of 'this'%0A  onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(this)%0A%0A  componentWillMount() %7B%0A    // Set initial safe area insets%0A    SafeArea.getSafeAreaInsetsForRootView()%0A      .then((result)
+const SafeAreaView = withSafeArea(View, 'margin', 'both')%0A%0Atype Props
  =
-%3E
  %7B
-%0A        const %7B safeAreaInsets %7D = result%0A        this.setState(%7B safeAreaInsets %7D)%0A      %7D)%0A  %7D%0A%0A  componentDidMount() %7B%0A    // Add event listener%0A    SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)%0A  %7D%0A%0A%0A  componentWillUnmount() %7B%0A    // Remove event listener%0A    SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)%0A  %7D%0A%0A  onSafeAreaInsetsForRootViewChange(result: %7B safeAreaInsets: SafeAreaInsets %7D) %7B%0A    const %7B safeAreaInsets %7D = result%0A    this.setState(%7B safeAreaInsets %7D)%0A  %7D%0A%0A  render() %7B%0A    const %7B safeAreaInsets %7D = this.state%0A
+%7D;%0Atype State = %7B%7D;%0A%0Aexport default class App extends Component%3CProps, State%3E %7B%0A  render() %7B
 %0A   
@@ -460,24 +460,32 @@
 %7D%3E%0A        %3C
+SafeArea
 View style=%7B
@@ -488,9 +488,8 @@
 le=%7B
-%5B
 styl
@@ -502,198 +502,8 @@
 tent
-, %7B%0A          marginTop: safeAreaInsets.top,%0A          marginLeft: safeAreaInsets.left,%0A          marginBottom: safeAreaInsets.bottom,%0A          marginRight: safeAreaInsets.right,%0A        %7D%5D
 %7D%3E%0A 
@@ -587,32 +587,40 @@
 Text%3E%0A        %3C/
+SafeArea
 View%3E%0A      %3C/Vi

Update example.