styling to handle the notch on iphonex

index.ios.js

@@ -1,70 +1,5 @@
-// /**
-//  * Sample React Native App
-//  * https://github.com/facebook/react-native
-//  * @flow
-//  */
-
-// import React, { Component } from 'react';
-// import {
-//   AppRegistry,
-//   StyleSheet,
-//   Text,
-//   View
-// } from 'react-native';
-
-// export default class AreThereCookies extends Component {
-//   render() {
-//     return (
-//       <View style={styles.container}>
-//         <Text style={styles.welcome}>
-//           Welcome to React Native!
-//         </Text>
-//         <Text style={styles.instructions}>
-//           To get started, edit index.ios.js
-//         </Text>
-//         <Text style={styles.instructions}>
-//           Press Cmd+R to reload,{'\n'}
-//           Cmd+D or shake for dev menu
-//         </Text>
-//       </View>
-//     );
-//   }
-// }
-
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//     backgroundColor: '#F5FCFF',
-//   },
-//   welcome: {
-//     fontSize: 20,
-//     textAlign: 'center',
-//     margin: 10,
-//   },
-//   instructions: {
-//     textAlign: 'center',
-//     color: '#333333',
-//     marginBottom: 5,
-//   },
-// });
-
-// AppRegistry.registerComponent('AreThereCookies', () => AreThereCookies);
-
 import React, { Component } from 'react';
 import { AppRegistry, UIManager, Text, View } from 'react-native';
-
-// UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
-
-// class Dummy extends Component {
-//   render() {
-//     return <Text>Aretherecookies?</Text>
-//   }
-// }
-
-// AppRegistry.registerComponent('AreThereCookies', () => Dummy);
-
 import App from './js/App';
 
 UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

js/components/TopToolbar.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { View, TextInput, TouchableOpacity } from 'react-native';
+import { View, TextInput, TouchableOpacity, SafeAreaView } from 'react-native';
 import { Toolbar, Icon } from 'react-native-material-ui';
 import { path } from 'ramda';
 import queryString from 'query-string';
@@ -69,6 +69,7 @@ class TopToolbar extends Component {
 
 		return (
 			<View style={{ backgroundColor: palette.primaryColor }}>
+				<SafeAreaView>
 				{!showSearch && (
 					<Toolbar
 						leftElement="arrow-back"
@@ -105,6 +106,7 @@ class TopToolbar extends Component {
 						)}
 					</View>
 				)}
+				</SafeAreaView>
 			</View>
 		);
 	}

js/pages/Nav.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { View } from 'react-native';
+import { View, SafeAreaView } from 'react-native';
 import Food from './Food';
 import Places from './Places';
 import { BottomNavigation } from 'react-native-material-ui';
@@ -26,27 +26,28 @@ const Nav = ({ activeTab, setRoute }: Props) => {
 				{activeTab === 'places' && <Places onRefresh={getLocation} />}
 				{activeTab === 'profile' && <ProfilePage isLoggedIn={AuthManager.isLoggedIn()} />}
 			</View>
-			<BottomNavigation active={activeTab}>
-				<BottomNavigation.Action
-					key="food"
-					icon="local-pizza"
-					label="Food"
-					onPress={setRoute('/list/food')}
-				/>
-				<BottomNavigation.Action
-					key="places"
-					icon="restaurant"
-					label="Places"
-					onPress={setRoute('/list/places')}
-				/>
-				{/* <BottomNavigation.Action key="favorites" icon="favorite" label="Favorites" /> */}
-				<BottomNavigation.Action
-					key="profile"
-					icon="person"
-					label="Profile"
-					onPress={setRoute('/list/profile')}
-				/>
-			</BottomNavigation>
+			<SafeAreaView>
+				<BottomNavigation active={activeTab}>
+					<BottomNavigation.Action
+						key="food"
+						icon="local-pizza"
+						label="Food"
+						onPress={setRoute('/list/food')}
+					/>
+					<BottomNavigation.Action
+						key="places"
+						icon="restaurant"
+						label="Places"
+						onPress={setRoute('/list/places')}
+					/>
+					<BottomNavigation.Action
+						key="profile"
+						icon="person"
+						label="Profile"
+						onPress={setRoute('/list/profile')}
+					/>
+				</BottomNavigation>
+			</SafeAreaView>
 		</View>
 	);
 };

js/ui-theme.js

@@ -138,6 +138,13 @@ export default {
 		container: {
 			justifyContent: 'space-around',
 			alignItems: 'baseline',
+			borderWidth: 0,
+			shadowOffset: {
+				height: -2,
+				width: 0,
+			},
+			shadowRadius: 2,
+			shadowColor: 'black',
 		},
 	},
 	bottomNavigationAction: {