fix container top position for iphone12-13 (#47)

* fix margin top for iphone12-13

* import statusbar

Author: duckSern1108

src/utils/index.js

@@ -1,12 +1,57 @@
-import { Dimensions, Platform } from 'react-native';
-
-// Code borrowed from https://github.com/ptelad/react-native-iphone-x-helper
-export function isIphoneX() {
-  const dimen = Dimensions.get('window');
-  return (
-    Platform.OS === 'ios' &&
-        !Platform.isPad &&
-        !Platform.isTVOS &&
-        ((dimen.height === 812 || dimen.width === 812) || (dimen.height === 896 || dimen.width === 896))
-  );
-}
+import { Dimensions, Platform, StatusBar } from 'react-native';
+
+// Code borrowed from https://github.com/ovr/react-native-status-bar-height
+const STATUSBAR_DEFAULT_HEIGHT = 20;
+const STATUSBAR_X_HEIGHT = 44;
+const STATUSBAR_IP12_HEIGHT = 47;
+const STATUSBAR_IP12MAX_HEIGHT = 47;
+
+const X_WIDTH = 375;
+const X_HEIGHT = 812;
+
+const XSMAX_WIDTH = 414;
+const XSMAX_HEIGHT = 896;
+
+const IP12_WIDTH = 390;
+const IP12_HEIGHT = 844;
+
+const IP12MAX_WIDTH = 428;
+const IP12MAX_HEIGHT = 926;
+
+const { height: W_HEIGHT, width: W_WIDTH } = Dimensions.get("window");
+
+let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;
+let isIPhoneX_v = false;
+let isIPhoneXMax_v = false;
+let isIPhone12_v = false;
+let isIPhone12Max_v = false;
+let isIPhoneWithMonobrow_v = false;
+
+if (Platform.OS === "ios" && !Platform.isPad && !Platform.isTVOS) {
+    if (W_WIDTH === X_WIDTH && W_HEIGHT === X_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhoneX_v = true;
+        statusBarHeight = STATUSBAR_X_HEIGHT;
+    } else if (W_WIDTH === XSMAX_WIDTH && W_HEIGHT === XSMAX_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhoneXMax_v = true;
+        statusBarHeight = STATUSBAR_X_HEIGHT;
+    } else if (W_WIDTH === IP12_WIDTH && W_HEIGHT === IP12_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone12_v = true;
+        statusBarHeight = STATUSBAR_IP12_HEIGHT;
+    } else if (W_WIDTH === IP12MAX_WIDTH && W_HEIGHT === IP12MAX_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone12Max_v = true;
+        statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
+    }
+}
+
+export function getStatusBarHeight() {
+    return Platform.select({
+        ios: statusBarHeight,
+        android: StatusBar.currentHeight,
+        default: 0,
+    });
+}
+

src/views/DefaultPopup.js

@@ -2,16 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, View, Text, Image, Dimensions, Platform, StatusBar, StyleSheet, PanResponder, TouchableWithoutFeedback } from 'react-native';
 
-import { isIphoneX } from '../utils';
+import { getStatusBarHeight } from '../utils';
 
 const { width: deviceWidth } = Dimensions.get('window');
 
-const CONTAINER_MARGIN_TOP = (
-  Platform.OS === 'ios'
-    ?
-    isIphoneX() ? 44 : 20
-    :
-    StatusBar.currentHeight + 10);  // Just to add a bit more padding
+const CONTAINER_MARGIN_TOP = getStatusBarHeight() + 10;  // Just to add a bit more padding
 
 const slideOffsetYToTranslatePixelMapping = {
   inputRange: [0, 1],