feat: support iPhone X (#707)

machour · Houssein Djirdeh · commit 15d4dd467adf · 2018-02-11T14:31:05.000-05:00
* feat: support iPhone X notch

* chore: some ui adjustments to demo

* fix: remove unwanted code

* feat: add isIphoneX() and use it

* test: mock react-native-device-info

* chore: cleaner 3x image
diff --git a/ios/GitPoint/Images.xcassets/Contents.json b/ios/GitPoint/Images.xcassets/Contents.json
@@ -3,4 +3,4 @@
     "version" : 1,
     "author" : "xcode"
   }
-}
+}
diff --git a/ios/GitPoint/Images.xcassets/LaunchImage-2.launchimage/Contents.json b/ios/GitPoint/Images.xcassets/LaunchImage-2.launchimage/Contents.json
diff --git a/ios/GitPoint/Images.xcassets/LaunchImage-3.launchimage/Contents.json b/ios/GitPoint/Images.xcassets/LaunchImage-3.launchimage/Contents.json
diff --git a/ios/GitPoint/Images.xcassets/LaunchImage-4.launchimage/Contents.json b/ios/GitPoint/Images.xcassets/LaunchImage-4.launchimage/Contents.json
diff --git a/ios/GitPoint/Images.xcassets/LaunchImage.launchimage/Contents.json b/ios/GitPoint/Images.xcassets/LaunchImage.launchimage/Contents.json
@@ -36,6 +36,15 @@
       "scale": "3x",
       "subtype": "736h"
     },
+    {
+      "extent": "full-screen",
+      "idiom": "iphone",
+      "filename": "Default-Portrait-2436h@3x.png",
+      "minimum-system-version": "11.0",
+      "orientation": "portrait",
+      "scale": "3x",
+      "subtype": "2436h"
+    },
     {
       "extent": "full-screen",
       "idiom": "iphone",
diff --git a/ios/GitPoint/Images.xcassets/LaunchImage.launchimage/Default-Portrait-2436h@3x.png b/ios/GitPoint/Images.xcassets/LaunchImage.launchimage/Default-Portrait-2436h@3x.png
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "react-native-communications": "^2.2.1",
     "react-native-config": "^0.6.0",
     "react-native-cookies": "^3.2.0",
-    "react-native-device-info": "^0.11.0",
+    "react-native-device-info": "^0.15.1",
     "react-native-elements": "^0.18.2",
     "react-native-htmlview": "^0.12.0",
     "react-native-i18n": "^2.0.4",
@@ -87,7 +87,7 @@
     "react-native-syntax-highlighter": "^1.2.1",
     "react-native-table-component": "^1.1.0",
     "react-native-vector-icons": "^4.4.0",
-    "react-navigation": "^1.0.0-beta.11",
+    "react-navigation": "^1.0.0-beta.27",
     "react-redux": "^5.0.2",
     "react-syntax-highlighter": "^5.6.2",
     "redux": "^3.6.0",
diff --git a/src/components/parallax-scroll.component.js b/src/components/parallax-scroll.component.js
@@ -5,8 +5,9 @@ import { Icon } from 'react-native-elements';
 import styled from 'styled-components';
 
 import { colors, normalize, fonts } from 'config';
+import { isIphoneX } from 'utils';
 
-const STICKY_HEADER_HEIGHT = 62;
+const STICKY_HEADER_HEIGHT = isIphoneX() ? 76 : 62;
 
 type Props = {
   renderContent: any,
diff --git a/src/notifications/screens/notifications.screen.js b/src/notifications/screens/notifications.screen.js
@@ -15,7 +15,7 @@ import {
   NotificationListItem,
 } from 'components';
 import { colors, fonts, normalize } from 'config';
-import { translate } from 'utils';
+import { isIphoneX, translate } from 'utils';
 import {
   getUnreadNotifications,
   getParticipatingNotifications,
@@ -55,7 +55,7 @@ const mapDispatchToProps = dispatch =>
 
 const ButtonGroupWrapper = styled.View`
   background-color: ${colors.greyLight};
-  padding-top: ${Platform.OS === 'ios' ? 30 : 10};
+  padding-top: ${Platform.OS === 'ios' ? (isIphoneX() ? 40 : 30) : 10};
   padding-bottom: 10;
   margin-bottom: 15;
 `;
diff --git a/src/search/screens/search.screen.js b/src/search/screens/search.screen.js
@@ -20,7 +20,7 @@ import {
   SearchBar,
 } from 'components';
 import { colors, fonts, normalize } from 'config';
-import { translate } from 'utils';
+import { isIphoneX, translate } from 'utils';
 import { searchRepos, searchUsers } from '../index';
 
 const mapStateToProps = state => ({
@@ -43,7 +43,14 @@ const mapDispatchToProps = dispatch =>
 const styles = StyleSheet.create({
   searchBarWrapper: {
     flexDirection: 'row',
-    marginTop: Platform.OS === 'ios' ? 20 : 5,
+    ...Platform.select({
+      ios: {
+        marginTop: isIphoneX() ? 30 : 20,
+      },
+      android: {
+        marginTop: 5,
+      },
+    }),
   },
   searchContainer: {
     width: Dimensions.get('window').width,
@@ -217,7 +224,8 @@ class Search extends Component {
                 showsCancelButton={this.state.searchFocus}
                 onFocus={() => this.setState({ searchFocus: true })}
                 onCancelButtonPress={() =>
-                  this.setState({ searchStart: false, query: '' })}
+                  this.setState({ searchStart: false, query: '' })
+                }
                 onSearchButtonPress={text => {
                   this.search(text);
                 }}
diff --git a/src/utils/device-helpers.js b/src/utils/device-helpers.js
@@ -0,0 +1,3 @@
+import DeviceInfo from 'react-native-device-info';
+
+export const isIphoneX = () => DeviceInfo.getModel() === 'iPhone X';
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -3,5 +3,6 @@ export * from './loading-animation';
 export * from './text-helper';
 export * from './method-helpers';
 export * from './color-helpers';
+export * from './device-helpers';
 export * from './event-helpers';
 export * from './localization-helper';
diff --git a/testenv.js b/testenv.js
@@ -38,3 +38,9 @@ jest.mock('react-native-code-push', () => ({}));
 jest.mock('react-native-safari-view', () => ({}));
 
 jest.mock('react-native-linear-gradient', () => ({}));
+
+jest.mock('react-native-device-info', () => {
+  return {
+    getModel: jest.fn(),
+  };
+});
diff --git a/yarn.lock b/yarn.lock
@@ -6142,9 +6142,9 @@ react-native-cookies@^3.2.0:
   dependencies:
     invariant "^2.1.0"
 
-react-native-device-info@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-0.11.0.tgz#e96dd0e3f8a7d7e3022c1f441f51fa912fdc7444"
+react-native-device-info@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-0.15.1.tgz#abe2e4c005816dbf8e77445389a96e5e37ed34c6"
 
 react-native-dismiss-keyboard@1.0.0:
   version "1.0.0"
@@ -6326,7 +6326,7 @@ react-native@0.52.0:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
-react-navigation@^1.0.0-beta.11:
+react-navigation@^1.0.0-beta.27:
   version "1.0.0-beta.27"
   resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.0.0-beta.27.tgz#e6263b01975cd790e32b3711c2eb6cead96c102c"
   dependencies:

Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,4 @@`
`3`	`3`	`"version" : 1,`
`4`	`4`	`"author" : "xcode"`
`5`	`5`	`}`
`6`		`-}`
	`6`	`+}`