From 11d00ff11177cf24168b6776072071488a3c8a33 Mon Sep 17 00:00:00 2001
From: Evan Bacon <baconbrix@gmail.com>
Date: Sat, 1 Jun 2019 21:49:18 -0700
Subject: [PATCH] [add] SafeAreaView support for iOS 11 CSS `constant`

Close #1359
---
 .../src/exports/SafeAreaView/index.js         | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js
index b826e862..c6096b78 100644
--- a/packages/react-native-web/src/exports/SafeAreaView/index.js
+++ b/packages/react-native-web/src/exports/SafeAreaView/index.js
@@ -8,6 +8,7 @@
  * @flow
  */
 
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import React from 'react';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
@@ -34,12 +35,24 @@ class SafeAreaView extends React.Component<ViewProps> {
   }
 }
 
+const cssFunction: 'constant' | 'env' = (function() {
+  if (
+    canUseDOM &&
+    window.CSS &&
+    window.CSS.supports &&
+    window.CSS.supports('top: constant(safe-area-inset-top)')
+  ) {
+    return 'constant';
+  }
+  return 'env';
+})();
+
 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)'
+    paddingTop: `${cssFunction}(safe-area-inset-top)`,
+    paddingRight: `${cssFunction}(safe-area-inset-right)`,
+    paddingBottom: `${cssFunction}(safe-area-inset-bottom)`,
+    paddingLeft: `${cssFunction}(safe-area-inset-left)`
   }
 });