diff --git a/docs/pages/5.react-native-web.md b/docs/pages/5.react-native-web.md
index d247d305dc..5ba30bf033 100644
--- a/docs/pages/5.react-native-web.md
+++ b/docs/pages/5.react-native-web.md
@@ -30,7 +30,7 @@ yarn add --dev react-app-rewired
 module.exports = function override(config, env) {
   config.module.rules.push({
     test: /\.js$/,
-    exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
+    exclude: /node_modules[/\\](?!react-native-vector-icons)/,
     use: {
       loader: "babel-loader",
       options: {
@@ -176,7 +176,7 @@ Now, add the following in the `module.rules` array in your webpack config:
 ```js
 {
   test: /\.js$/,
-  exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
+  exclude: /node_modules[/\\](?!react-native-vector-icons)/,
   use: {
     loader: 'babel-loader',
     options: {
diff --git a/package.json b/package.json
index 85a4bdf0a9..2cc89c4b9c 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.5",
     "color": "^3.1.2",
-    "react-native-safe-area-view": "^0.14.9"
+    "react-native-iphone-x-helper": "^1.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx
index 0d8630a8e8..e0d0cf57cb 100644
--- a/src/components/BottomNavigation.tsx
+++ b/src/components/BottomNavigation.tsx
@@ -13,7 +13,7 @@ import {
   ViewStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import SafeAreaView from 'react-native-safe-area-view';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 import color from 'color';
 import overlay from '../styles/overlay';
 import Icon, { IconSource } from './Icon';
@@ -271,6 +271,7 @@ const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animat
 const MIN_TAB_WIDTH = 96;
 const MAX_TAB_WIDTH = 168;
 const BAR_HEIGHT = 56;
+const BOTTOM_INSET = getBottomSpace();
 const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;
 
 const Touchable = ({
@@ -784,9 +785,11 @@ class BottomNavigation extends React.Component<Props, State> {
           onLayout={this.handleLayout}
         >
           <Animated.View style={[styles.barContent, { backgroundColor }]}>
-            <SafeAreaView
-              forceInset={{ top: 'never', bottom: 'always' }}
-              style={[styles.items, { maxWidth: maxTabBarWidth }]}
+            <View
+              style={[
+                styles.items,
+                { marginBottom: BOTTOM_INSET, maxWidth: maxTabBarWidth },
+              ]}
             >
               {shifting ? (
                 <Animated.View
@@ -1006,7 +1009,7 @@ class BottomNavigation extends React.Component<Props, State> {
                   ),
                 });
               })}
-            </SafeAreaView>
+            </View>
           </Animated.View>
         </Surface>
       </View>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 0b314c7b22..d00e451cee 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -7,8 +7,12 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   ViewStyle,
+  View,
 } from 'react-native';
-import SafeAreaView from 'react-native-safe-area-view';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
 import Surface from './Surface';
 import { withTheme } from '../core/theming';
 
@@ -49,6 +53,8 @@ type State = {
 };
 
 const DEFAULT_DURATION = 220;
+const TOP_INSET = getStatusBarHeight(true);
+const BOTTOM_INSET = getBottomSpace();
 
 /**
  * The Modal component is a simple way to present content above an enclosing view.
@@ -89,7 +95,6 @@ const DEFAULT_DURATION = 220;
  * export default MyComponent;
  * ```
  */
-
 class Modal extends React.Component<Props, State> {
   static defaultProps = {
     dismissable: true,
@@ -212,7 +217,13 @@ class Modal extends React.Component<Props, State> {
             ]}
           />
         </TouchableWithoutFeedback>
-        <SafeAreaView style={styles.wrapper} pointerEvents="box-none">
+        <View
+          style={[
+            styles.wrapper,
+            { marginTop: TOP_INSET, marginBottom: BOTTOM_INSET },
+          ]}
+          pointerEvents="box-none"
+        >
           <Surface
             style={
               [{ opacity }, styles.content, contentContainerStyle] as StyleProp<
@@ -222,7 +233,7 @@ class Modal extends React.Component<Props, State> {
           >
             {children}
           </Surface>
-        </SafeAreaView>
+        </View>
       </Animated.View>
     );
   }
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 478be8c066..686f0f5986 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -89,19 +89,17 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 504,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
@@ -763,19 +761,17 @@ exports[`hides labels in shifting bottom navigation 1`] = `
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 504,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
@@ -1457,19 +1453,17 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 504,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
@@ -2065,19 +2059,17 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 480,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 480,
+            },
+          ]
         }
       >
         <View
@@ -2945,19 +2937,17 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 504,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
@@ -3865,19 +3855,17 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 504,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
@@ -4691,19 +4679,17 @@ exports[`renders non-shifting bottom navigation 1`] = `
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 504,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
@@ -5611,19 +5597,17 @@ exports[`renders shifting bottom navigation 1`] = `
       }
     >
       <View
-        forwardedRef={[Function]}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
-          Object {
-            "flexDirection": "row",
-            "maxWidth": 480,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+              "width": "100%",
+            },
+            Object {
+              "marginBottom": 0,
+              "maxWidth": 480,
+            },
+          ]
         }
       >
         <View
diff --git a/yarn.lock b/yarn.lock
index 69e6f396ff..180a382751 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6486,11 +6486,6 @@ hermes-engine@~0.4.0:
   resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.4.1.tgz#2d02b295596298643c4d24b86687eb554db9e950"
   integrity sha512-Y3JFC8PD7eN3KpnrzrmvMAqp0IwnZrmP/oGOptvaSu33d7Zq/8b/2lHlZZkNvRl7/I1Q0umTX8TByK7zzLfTXA==
 
-hoist-non-react-statics@^2.3.1:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
-  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
-
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -9682,12 +9677,10 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-safe-area-view@^0.14.9:
-  version "0.14.9"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d"
-  integrity sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==
-  dependencies:
-    hoist-non-react-statics "^2.3.1"
+react-native-iphone-x-helper@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
 react-native-testing-library@^1.5.0:
   version "1.14.0"