Merge pull request #98 from Wilsonator5000/iphone-x-padding

Fix padding for iPhone X
halilb · Oct 28, 2019 · 097f8ea · 097f8ea
2 parents 6d2bc2e + b34bdfd
commit 097f8ea
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/Example/yarn.lock b/Example/yarn.lock
@@ -3955,10 +3955,16 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
+react-native-iphone-x-helper@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
+  integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
+
 "react-native-photo-browser@file:..":
   version "0.5.0"
   dependencies:
     prop-types "15.5.10"
+    react-native-iphone-x-helper "^1.2.1"
     react-native-progress "^3.2.0"
 
 react-native-progress@^3.2.0:

diff --git a/lib/GridContainer.js b/lib/GridContainer.js
@@ -9,6 +9,8 @@ import {
   ViewPropTypes
 } from 'react-native';
 
+import { ifIphoneX } from 'react-native-iphone-x-helper';
+
 import Constants from './constants';
 import { Photo } from './media';
 
@@ -98,6 +100,7 @@ export default class GridContainer extends React.Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: ifIphoneX(18, 0),
     paddingBottom: Constants.TOOLBAR_HEIGHT,
   },
   row: {

diff --git a/lib/bar/BarContainer.js b/lib/bar/BarContainer.js
@@ -7,6 +7,8 @@ import {
   ViewPropTypes
 } from 'react-native';
 
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
 const BAR_POSITIONS = {
   TOP: 'top',
   BOTTOM: 'bottom',
@@ -53,7 +55,7 @@ class BarContainer extends Component {
           styles.container,
           isBottomBar ? styles.bottomBar : styles.topBar,
           {
-            height,
+            height: height + (isBottomBar ? getBottomSpace() : 0),
             opacity: this.state.animation,
             transform: [{
               translateY: this.state.animation.interpolate({
@@ -84,6 +86,7 @@ const styles = StyleSheet.create({
   },
   bottomBar: {
     bottom: 0,
+    paddingBottom: getBottomSpace(),
   },
 });
 

diff --git a/lib/bar/TopBar.js b/lib/bar/TopBar.js
@@ -8,6 +8,8 @@ import {
   Platform,
 } from 'react-native';
 
+import { ifIphoneX } from 'react-native-iphone-x-helper';
+
 import { BarContainer } from './BarContainer';
 
 export default class TopBar extends React.Component {
@@ -58,7 +60,7 @@ export default class TopBar extends React.Component {
       <BarContainer
         style={styles.container}
         displayed={displayed}
-        height={height}
+        height={height + ifIphoneX(18, 0)}
       >
         {this.renderBackButton()}
         <Text style={styles.text}>{title}</Text>
@@ -72,7 +74,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
-    paddingTop: 30,
+    paddingTop: ifIphoneX(48, 30),
   },
   text: {
     fontSize: 18,

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   "author": "Halil Bilir <hbilir@gmail.com>",
   "homepage": "https://github.com/halilb/react-native-photo-browser#readme",
   "dependencies": {
+    "react-native-iphone-x-helper": "^1.2.1",
     "react-native-progress": "^3.2.0",
     "prop-types": "15.5.10"
   }