diff --git a/app/products/calls/components/__snapshots__/floating_call_container.test.js.snap b/app/products/calls/components/__snapshots__/floating_call_container.test.js.snap
index f1450109e..31e9b18d9 100644
--- a/app/products/calls/components/__snapshots__/floating_call_container.test.js.snap
+++ b/app/products/calls/components/__snapshots__/floating_call_container.test.js.snap
@@ -1,21 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FloatingCallContainer should match snapshot 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "position": "absolute",
-        "top": 91,
-        "width": "100%",
-        "zIndex": 9,
+        "flex": 1,
       },
       undefined,
     ]
   }
 >
-  <Text>
-    test
-  </Text>
-</View>
+  <Context.Provider
+    value={
+      Object {
+        "height": 0,
+        "width": 0,
+        "x": 0,
+        "y": 0,
+      }
+    }
+  >
+    <Context.Provider
+      value={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <FloatingCallContainer>
+        <Text>
+          test
+        </Text>
+      </FloatingCallContainer>
+    </Context.Provider>
+  </Context.Provider>
+</RNCSafeAreaProvider>
 `;
diff --git a/app/products/calls/components/floating_call_container.test.js b/app/products/calls/components/floating_call_container.test.js
index be9eaae21..3704216dd 100644
--- a/app/products/calls/components/floating_call_container.test.js
+++ b/app/products/calls/components/floating_call_container.test.js
@@ -4,12 +4,28 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 import {Text} from 'react-native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 import FloatingCallContainer from './floating_call_container';
 
+function testSafeAreaProvider(children) {
+    return (
+        <SafeAreaProvider
+            initialMetrics={{
+                frame: {x: 0, y: 0, width: 0, height: 0},
+                insets: {top: 0, left: 0, right: 0, bottom: 0},
+            }}
+        >
+            {children}
+        </SafeAreaProvider>
+    );
+}
+
 describe('FloatingCallContainer', () => {
     test('should match snapshot', () => {
-        const wrapper = shallow(<FloatingCallContainer><Text>{'test'}</Text></FloatingCallContainer>);
+        const wrapper = shallow(testSafeAreaProvider(
+            <FloatingCallContainer><Text>{'test'}</Text></FloatingCallContainer>,
+        ));
 
         expect(wrapper.getElement()).toMatchSnapshot();
     });
diff --git a/app/products/calls/components/floating_call_container.tsx b/app/products/calls/components/floating_call_container.tsx
index 1aa5de5c4..8f8e9f007 100644
--- a/app/products/calls/components/floating_call_container.tsx
+++ b/app/products/calls/components/floating_call_container.tsx
@@ -3,6 +3,7 @@
 
 import React, {useState, useEffect} from 'react';
 import {View, Platform} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {ViewTypes} from '@constants';
 import EventEmitter from '@mm-redux/utils/event_emitter';
@@ -11,15 +12,20 @@ import {makeStyleSheetFromTheme} from '@utils/theme';
 const {
     IOS_TOP_PORTRAIT,
     STATUS_BAR_HEIGHT,
+    ANDROID_TOP_PORTRAIT,
 } = ViewTypes;
 
 const getStyleSheet = makeStyleSheetFromTheme(() => {
-    const topBarHeight = Platform.select({android: 9, ios: IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT}) || 0;
+    const insets = useSafeAreaInsets();
+    let topBarHeight = ANDROID_TOP_PORTRAIT;
+    if (Platform.OS === 'ios') {
+        topBarHeight = (IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT) + insets.top;
+    }
 
     return {
         wrapper: {
             position: 'absolute',
-            top: topBarHeight + ViewTypes.STATUS_BAR_HEIGHT + 27,
+            top: topBarHeight,
             width: '100%',
             ...Platform.select({
                 android: {
@@ -31,7 +37,7 @@ const getStyleSheet = makeStyleSheetFromTheme(() => {
             }),
         },
         withIndicatorBar: {
-            top: topBarHeight + ViewTypes.STATUS_BAR_HEIGHT + 27 + ViewTypes.INDICATOR_BAR_HEIGHT,
+            top: topBarHeight + ViewTypes.INDICATOR_BAR_HEIGHT,
         },
     };
 });