Fanchen/fix positioning issue with android (#2)

FanchenBao · web-flow · commit 4b4406a26aa3 · 2022-05-29T15:41:12.000-07:00
* fix: include device brand to fix positioning issue within android

* fix: fix examples to add brand as prop for SlidingDrawer

* docs: update readme to add 'brand' as a prop

* chore: prep the source code at root
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ The example app is running from [`./example/App.tsx`](./example/App.tsx)
 | `peekSize`                 | `number`                                 | (required) | The height of the visible section of the drawer after it is closed. This is also referred to as the peek section. If set to 0, the drawer completely disappears after it is closed.            |
 | `openSize`                 | `number`                                 | (required) | The height of the entire visible drawer's after it is opened. Note that this is **NOT** the height of the drawer's open section, but the sum of the heights of the peek and open sections.         |
 | `fixedLoc`                 | `'top' \| 'bottom' \| 'left' \| 'right'` | (required) | The location where the sliding drawer is located. Can only be one of the four allowed strings.                                                                                                 |
+| `brand`                 | `string` | `''` | Brand of the device. Android only. Use [`react-native-device-info`](https://www.npmjs.com/package/react-native-device-info) to obtain brand name. Brand name is necessary for Android devices because different brands might have different ways to configure drawer positions. Currently supported brand: `'google'`, `'samsung'`. For an unsupported brand, the behavior defaults to that of a Samsung device. If the UI looks wanky, raise an issue or open a pull request to add support for that brand.|
 | `drawerWidth`              | `number`                                 | `-1`       | Manual override of the drawer's width. Applicable only when `fixedLoc` is `top` or `bottom`. Default to -1, meaning no manual override is present.                                             |
 | `drawerHeight`             | `number`                                 | `-1`       | Manual override of the drawer's height. Applicable only when `fixedLoc` is `left` or `right`. Default to -1, meaning no manual override is present.                                            |
 | `screenWidth`              | `number`                                 | `-1`       | Manual override of the screen's width. Generally speaking, this prop does not need to be set as screen width is obtained automatically. But in case the automatic screen width is inaccurate, use this prop to override it. Applicable only when `fixedLoc` is `left` or `right`. Default to -1, meaning no manual override is present.                                             |
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -337,6 +337,8 @@ PODS:
     - React-jsi (= 0.66.4)
     - React-logger (= 0.66.4)
     - React-perflogger (= 0.66.4)
+  - RNDeviceInfo (8.7.1):
+    - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -394,6 +396,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -472,6 +475,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -518,9 +523,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: e3ffca672dd3772536cb844274094b0e2c31b187
   React-runtimeexecutor: dec32ee6f2e2a26e13e58152271535fadff5455a
   ReactCommon: 57b69f6383eafcbd7da625bfa6003810332313c4
+  RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa
   Yoga: e7dc4e71caba6472ff48ad7d234389b91dadc280
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 9af65361d8a000b8f3b07171fd9cfcc3632878eb
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -10,9 +10,10 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@fanchenbao/react-native-sliding-drawer": "file:../fanchenbao-react-native-sliding-drawer-0.4.1.tgz",
+    "@fanchenbao/react-native-sliding-drawer": "file:../fanchenbao-react-native-sliding-drawer-0.4.2.tgz",
     "react": "17.0.2",
-    "react-native": "0.66.4"
+    "react-native": "0.66.4",
+    "react-native-device-info": "^8.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/example/src/FadeBgNonSlideOpenNotTappable/Drawers/BottomDrawer.tsx b/example/src/FadeBgNonSlideOpenNotTappable/Drawers/BottomDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {BottomDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 type PropsT = {
   onDrawerPeek: () => void;
@@ -37,6 +38,7 @@ export const BottomDrawer: React.FC<PropsT> = props => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="bottom"
+      brand={getBrand()}
       onDrawerPeek={onDrawerPeek}
       enableNonSlideOpen={true}
       nonSlideOpen={nonSlideOpen}
diff --git a/example/src/FadeBgNonSlideOpenNotTappable/Drawers/TopDrawer.tsx b/example/src/FadeBgNonSlideOpenNotTappable/Drawers/TopDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {TopDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 type PropsT = {
   onDrawerPeek: () => void;
@@ -37,6 +38,7 @@ export const TopDrawer: React.FC<PropsT> = props => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="top"
+      brand={getBrand()}
       onDrawerPeek={onDrawerPeek}
       enableNonSlideOpen={true}
       nonSlideOpen={nonSlideOpen}
diff --git a/example/src/FadeBgPeekableNotTappable/Drawers/BottomDrawer.tsx b/example/src/FadeBgPeekableNotTappable/Drawers/BottomDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {BottomDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 /**
  * Example for a bottom drawer
@@ -24,6 +25,7 @@ export const BottomDrawer: React.FC = () => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="bottom"
+      brand={getBrand()}
       enableFadeBackground={true}>
       <BottomDrawerContent peekSize={peekSize} />
     </SlidingDrawer>
diff --git a/example/src/FadeBgPeekableNotTappable/Drawers/TopDrawer.tsx b/example/src/FadeBgPeekableNotTappable/Drawers/TopDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {TopDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 /**
  * Example for a top drawer
@@ -24,6 +25,7 @@ export const TopDrawer: React.FC = () => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="top"
+      brand={getBrand()}
       enableFadeBackground={true}>
       <TopDrawerContent peekSize={peekSize} />
     </SlidingDrawer>
diff --git a/example/src/FadeBgTappable/Drawers/BottomDrawer.tsx b/example/src/FadeBgTappable/Drawers/BottomDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {BottomDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 type PropsT = {
   isInitialPeek: boolean;
@@ -47,6 +48,7 @@ export const BottomDrawer: React.FC<PropsT> = props => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="bottom"
+      brand={getBrand()}
       onDrawerOpen={onDrawerOpen}
       onDrawerPeek={onDrawerPeek}
       isInitialPeek={isInitialPeek}
diff --git a/example/src/FadeBgTappable/Drawers/TopDrawer.tsx b/example/src/FadeBgTappable/Drawers/TopDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {TopDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 type PropsT = {
   isInitialPeek: boolean;
@@ -47,6 +48,7 @@ export const TopDrawer: React.FC<PropsT> = props => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="top"
+      brand={getBrand()}
       onDrawerOpen={onDrawerOpen}
       onDrawerPeek={onDrawerPeek}
       isInitialPeek={isInitialPeek}
diff --git a/example/src/NonSlideOpen/Drawers/BottomDrawer.tsx b/example/src/NonSlideOpen/Drawers/BottomDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {BottomDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 type PropsT = {
   isInitialPeek: boolean;
@@ -40,6 +41,7 @@ export const BottomDrawer: React.FC<PropsT> = props => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="bottom"
+      brand={getBrand()}
       onDrawerOpen={onDrawerOpen}
       onDrawerPeek={onDrawerPeek}
       isInitialPeek={isInitialPeek}
diff --git a/example/src/NonSlideOpen/Drawers/TopDrawer.tsx b/example/src/NonSlideOpen/Drawers/TopDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {TopDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 type PropsT = {
   isInitialPeek: boolean;
@@ -40,6 +41,7 @@ export const TopDrawer: React.FC<PropsT> = props => {
       peekSize={peekSize}
       openSize={openSize}
       fixedLoc="top"
+      brand={getBrand()}
       onDrawerOpen={onDrawerOpen}
       onDrawerPeek={onDrawerPeek}
       isInitialPeek={isInitialPeek}
diff --git a/example/src/Peekable/Drawers/BottomDrawer.tsx b/example/src/Peekable/Drawers/BottomDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {BottomDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 /**
  * Example for a bottom drawer
@@ -20,7 +21,11 @@ export const BottomDrawer: React.FC = () => {
   const openSize = 240;
 
   return (
-    <SlidingDrawer peekSize={peekSize} openSize={openSize} fixedLoc="bottom">
+    <SlidingDrawer
+      peekSize={peekSize}
+      openSize={openSize}
+      fixedLoc="bottom"
+      brand={getBrand()}>
       <BottomDrawerContent peekSize={peekSize} />
     </SlidingDrawer>
   );
diff --git a/example/src/Peekable/Drawers/TopDrawer.tsx b/example/src/Peekable/Drawers/TopDrawer.tsx
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {SlidingDrawer} from '../../react-native-sliding-drawer';
 import {TopDrawerContent} from '../../DrawerContent/index';
+import {getBrand} from 'react-native-device-info';
 
 /**
  * Example for a top drawer
@@ -20,7 +21,11 @@ export const TopDrawer: React.FC = () => {
   const openSize = 240;
 
   return (
-    <SlidingDrawer peekSize={peekSize} openSize={openSize} fixedLoc="top">
+    <SlidingDrawer
+      peekSize={peekSize}
+      openSize={openSize}
+      fixedLoc="top"
+      brand={getBrand()}>
       <TopDrawerContent peekSize={peekSize} />
     </SlidingDrawer>
   );
diff --git a/example/src/react-native-sliding-drawer/index.tsx b/example/src/react-native-sliding-drawer/index.tsx
@@ -15,6 +15,7 @@ type PropsT = {
   peekSize: number; // peek state width or height.
   openSize: number; // open state width or height.
   fixedLoc: 'top' | 'bottom' | 'left' | 'right'; // Where the drawer is fixed at. Top drawer means sliding downwards, bottom upwards, left rightwards, right leftwards.
+  brand?: string; // brand name of the device. Android only
   drawerWidth?: number; // manual override of drawer width, applicable when fixedLoc === 'top' | 'bottom'
   drawerHeight?: number; // manual override of drawer height, applicable when fixedLoc === 'right' | 'left'
   screenWidth?: number; // width of the screen. Default to -1, i.e. using the value in react native's useWindowDimensions
@@ -45,6 +46,7 @@ export const SlidingDrawer: React.FC<PropsT> = props => {
     peekSize,
     openSize,
     fixedLoc,
+    brand = '',
     drawerWidth = -1,
     drawerHeight = -1,
     screenWidth = -1,
@@ -87,14 +89,25 @@ export const SlidingDrawer: React.FC<PropsT> = props => {
   const isVertical = ['top', 'bottom'].includes(fixedLoc);
   const size = isVertical ? height : width;
   // NOTE: bottomBarCorrection are needed specifically to handle
-  // Android devices, where the bottomBarCorrection must be deducted when computing
-  // the positioning of the drawer using `top` or `bottom` prop. iOS does not
-  // seem to suffer from this problem. Hence for iOS, bottomBarCorrection is 0
-  // (because in iOS StatusBar.currentHeight returns null)
-  const bottomBarCorrection =
-    Dimensions.get('screen').height -
-    height -
-    (StatusBar.currentHeight ? StatusBar.currentHeight : 0);
+  // different Android devices. bottomBarCorrection must be computed when
+  // computing the positioning of the drawer using `top` or `bottom` prop.
+  // iOS does not seem to suffer from this problem. Hence for iOS,
+  // bottomBarCorrection is 0.
+  let bottomBarCorrection: number;
+  switch (brand) {
+    case 'samsung':
+      bottomBarCorrection = 0;
+      break;
+    case 'google':
+      bottomBarCorrection =
+        Dimensions.get('screen').height -
+        height -
+        (StatusBar.currentHeight ? StatusBar.currentHeight : 0);
+      break;
+    default:
+      bottomBarCorrection = 0;
+      break;
+  }
 
   if (maxPct * size < openSize || openSize < peekSize) {
     throw new Error(
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1062,10 +1062,10 @@
     "minimatch" "^3.0.4"
     "strip-json-comments" "^3.1.1"
 
-"@fanchenbao/react-native-sliding-drawer@file:../fanchenbao-react-native-sliding-drawer-0.4.1.tgz":
-  "integrity" "sha512-W+EfcTamPcNC1IMDCrOWn5KGfnp4NUUK2oAY6PuCDOaM1OwwG+wktYUgdoOEUfleQ9PKkJBfLw06HtLIXEIyYg=="
-  "resolved" "file:../fanchenbao-react-native-sliding-drawer-0.4.1.tgz"
-  "version" "0.4.1"
+"@fanchenbao/react-native-sliding-drawer@file:../fanchenbao-react-native-sliding-drawer-0.4.2.tgz":
+  "integrity" "sha512-2ZHEHwSDK/45vdhVXC5jrFa8cssAVHp6EEIm9rqjm5DkHZ7u1uwNXPo4bMOPi/y6ysHQAJlbZhS3g0h2Vk5ZIg=="
+  "resolved" "file:../fanchenbao-react-native-sliding-drawer-0.4.2.tgz"
+  "version" "0.4.2"
 
 "@hapi/hoek@^9.0.0":
   "integrity" "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw=="
@@ -5880,6 +5880,11 @@
     "jscodeshift" "^0.11.0"
     "nullthrows" "^1.1.1"
 
+"react-native-device-info@^8.7.1":
+  "integrity" "sha512-cVMZztFa2Qn6qpQa601W61CtUwZQ1KXfqCOeltejAWEXmgIWivC692WGSdtGudj4upSi1UgMSaGcvKjfcpdGjg=="
+  "resolved" "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-8.7.1.tgz"
+  "version" "8.7.1"
+
 "react-native@*", "react-native@0.66.4":
   "integrity" "sha512-9vx5dlSfQlKbbDtr8+xMon6qsmSu7jvjdXWZpEKh3XVKpUidbbODv7048gwVKX8YAel1egeR7hN8vzSeI6ssTw=="
   "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.66.4.tgz"
diff --git a/src/index.tsx b/src/index.tsx
