Use SafeAreaView for new iPhone models

* Use SafeAreaView for iPhone X
* Adds padding for camera notch and rounded bottom
* Closes #60

App.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from 'react'
+import { SafeAreaView, StyleSheet } from 'react-native'
 import {
   createStackNavigator,
   createDrawerNavigator,
@@ -10,7 +11,10 @@ import MapButton from './components/MapButton'
 import Support from './components/Support'
 import MenuButton from './components/MenuButton'
 import TrainButton from './components/TrainButton'
-import { COLOR_PRIMARY } from './constants/styles'
+import {
+  COLOR_PRIMARY,
+  HEADER_COLOR_BACKGROUND,
+} from './constants/styles'
 
 const RootStack = createStackNavigator(
   {
@@ -29,7 +33,11 @@ const RootStack = createStackNavigator(
       headerTitleStyle: {
         color: COLOR_PRIMARY,
       },
+      headerStyle: {
+        backgroundColor: HEADER_COLOR_BACKGROUND,
+      },
       headerRight: <MapButton />,
+      headerForceInset: { top: 'never', bottom: 'never' },
     },
   },
 )
@@ -48,8 +56,12 @@ const MapStack = createStackNavigator(
       headerTitleStyle: {
         color: COLOR_PRIMARY,
       },
+      headerStyle: {
+        backgroundColor: HEADER_COLOR_BACKGROUND,
+      },
       headerLeft: <MenuButton />,
       headerRight: <TrainButton />,
+      headerForceInset: { top: 'never', bottom: 'never' },
     },
   },
 )
@@ -68,12 +80,16 @@ const SupportStack = createStackNavigator(
       headerTitleStyle: {
         color: COLOR_PRIMARY,
       },
+      headerStyle: {
+        backgroundColor: HEADER_COLOR_BACKGROUND,
+      },
       headerLeft: <MenuButton />,
       headerRight: <TrainButton />,
+      headerForceInset: { top: 'never', bottom: 'never' },
     },
   },
 )
-const App = createDrawerNavigator({
+const Main = createDrawerNavigator({
   Home: {
     screen: RootStack,
   },
@@ -85,4 +101,18 @@ const App = createDrawerNavigator({
   },
 });
 
+
+const App = () => (
+  <SafeAreaView style={styles.safeArea}>
+    <Main />
+  </SafeAreaView>
+)
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: HEADER_COLOR_BACKGROUND,
+  },
+})
+
 export default App

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.0
+
+* Add padding for iPhone X notch & rounded corners
+
 ## 1.2.0
 
 * Add icons and style to stations and trains

app.json

@@ -4,7 +4,7 @@
     "sdkVersion": "27.0.0",
     "icon": "./assets/metroAppIcon.png",
     "description": "Simple app to access WMATA train status",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "orientation": "portrait",
     "ios": {
       "bundleIdentifier": "com.axelclark2.metroapp"

constants/styles.js

@@ -5,3 +5,5 @@ export const COLOR_BORDER = 'rgba(23, 31, 61, .2)'
 export const COLOR_BACKGROUND = '#ffffff'
 
 export const BAR_STYLE = 'dark-content'
+
+export const HEADER_COLOR_BACKGROUND = '#f7f7f7'