correct SafeAreaView usage again to fix #1

components/common/BottomTabBar.js

@@ -4,7 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function BottomTabBar({ navigation, state }) {
   return (
-    <SafeAreaView>
+    <SafeAreaView edges={['bottom']}>
       <BottomNavigation
         selectedIndex={state.index}
         onSelect={index => navigation.navigate(state.routeNames[index])}
@@ -14,4 +14,4 @@ export default function BottomTabBar({ navigation, state }) {
       </BottomNavigation>
     </SafeAreaView>
   );
-};
+}

locales/en_US.json

@@ -34,6 +34,7 @@
   "home": {
     "title": "Expo Fire Kitten - %{name}",
     "logout": "Sign Out",
-    "test": "Test Button"
+    "test": "Test Button",
+    "test2": "Test Message"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-fire-kitten",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Expo boilerplate with Login/Register ready (Firebase + UI Kitten)",
   "keywords": [
     "expo",
@@ -105,7 +105,7 @@
   "lint-staged": {
     "*.{js,jsx}": [
       "eslint --cache --fix",
-      "jest --bail --findRelatedTests"
+      "jest --coverage=false --bail --findRelatedTests"
     ]
   }
 }

screens/Screen.js

@@ -1,41 +1,42 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import PropTypes from 'prop-types';
-import { Layout } from '@ui-kitten/components';
+import { Layout, StyleService, useStyleSheet } from '@ui-kitten/components';
 import TopNavigationBar from '../components/common/TopNavigationBar';
 
 Screen.propTypes = {
   title: PropTypes.string,
   showBackIcon: PropTypes.bool,
   style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  dark: PropTypes.bool,
 };
 
 Screen.defaultProps = {
   title: undefined,
   showBackIcon: false,
   style: undefined,
+  dark: false,
 };
 
-export default function Screen({ title, showBackIcon, style, children }) {
+export default function Screen({ title, showBackIcon, style, dark, children }) {
+  const styles = useStyleSheet(themedStyles);
   return (
-    <Layout style={styles.root}>
-      {title && (
-        <SafeAreaView>
-          <TopNavigationBar title={title} showBackIcon={showBackIcon} />
-        </SafeAreaView>
-      )}
-      <Layout style={[styles.container, style]}>{children}</Layout>
-    </Layout>
+    <SafeAreaView edges={['left', 'top', 'right']} style={styles.root}>
+      {title && <TopNavigationBar title={title} showBackIcon={showBackIcon} />}
+      <Layout style={[styles.container, style]} level={dark ? '4' : '1'}>
+        {children}
+      </Layout>
+    </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   root: {
     flex: 1,
+    backgroundColor: 'background-basic-color-1',
   },
   container: {
     flex: 1,
-    paddingHorizontal: 16,
+    padding: 16,
   },
 });

screens/TestScreen.js

@@ -8,8 +8,9 @@ export default function TestScreen() {
     <Screen
       title={t('home.title', { name: 'Test' })}
       style={{ justifyContent: 'center', alignItems: 'center' }}
+      dark
     >
-      <Text category="h1">{t('home.test')}</Text>
+      <Text category="h1">{t('home.test2')}</Text>
     </Screen>
   );
 }