From 4c59343fd30b980dddbf784ac816256f2f9bd69d Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 2 Apr 2018 14:32:15 -0700
Subject: [PATCH] [fix] SafeAreaView inset padding for Safari

See https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Fix #859
---
 .../src/exports/SafeAreaView/index.js         | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js
index decb5d67..66415a3f 100644
--- a/packages/react-native-web/src/exports/SafeAreaView/index.js
+++ b/packages/react-native-web/src/exports/SafeAreaView/index.js
@@ -8,5 +8,31 @@
  * @flow
  */
 
+import React from 'react';
+import StyleSheet from '../StyleSheet';
 import View from '../View';
-export default View;
+import ViewPropTypes, { type ViewProps } from '../ViewPropTypes';
+
+class SafeAreaView extends React.Component<ViewProps> {
+  static displayName = 'SafeAreaView';
+
+  static propTypes = {
+    ...ViewPropTypes
+  };
+
+  render() {
+    const { style, ...rest } = this.props;
+    return <View {...rest} style={StyleSheet.compose(styles.root, style)} />;
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    paddingTop: 'env(safe-area-inset-top)',
+    paddingRight: 'env(safe-area-inset-right)',
+    paddingBottom: 'env(safe-area-inset-bottom)',
+    paddingLeft: 'env(safe-area-inset-left)'
+  }
+});
+
+export default SafeAreaView;