updated screens

added keyboard avoiding view to avoid blocking keyboard

src/components/layout/Screen.js

@@ -1,9 +1,9 @@
-import {StatusBar} from 'expo-status-bar';
-import {StyleSheet, View} from 'react-native';
-import {useNavigation, useRoute} from '@react-navigation/native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import TopNavbar from './TopNavbar';
-import BottomNavbar from './BottomNavbar';
+import { StatusBar } from "expo-status-bar";
+import { KeyboardAvoidingView, Platform, StyleSheet, View } from "react-native";
+import { useNavigation, useRoute } from "@react-navigation/native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import TopNavbar from "./TopNavbar";
+import BottomNavbar from "./BottomNavbar";
 
 const Screen = ({ children, style, showBack = false }) => {
   //   Initialisation -------------
@@ -13,33 +13,34 @@ const Screen = ({children, style, showBack = false}) => {
   const insets = useSafeAreaInsets();
 
   const titleMap = {
-    LeaderboardScreen: 'Leaderboard',
-    TeamScreen: 'Current Team',
-    MapScreen: 'Map',
-    GameSettingsScreen: 'Game Settings',
-    GameSelectionScreen: 'Games',
-    DepartmentSettingsScreen: 'Department Settings',
-    PlayersScreen: 'Players',
-    ExpandedMapScreen: 'Map View',
-    GlobalEventsScreen: 'Global Events',
-    GlobalMapScreen: 'Global Map',
-    GlobalCacheViewScreen: 'Cache Details',
-    GlobalLeaderboardScreen: 'Global Leaderboard',
-    GlobalProfileScreen: 'Global Profile',
+    LeaderboardScreen: "Leaderboard",
+    TeamScreen: "Current Team",
+    MapScreen: "Map",
+    GameSettingsScreen: "Game Settings",
+    GameSelectionScreen: "Games",
+    DepartmentSettingsScreen: "Department Settings",
+    PlayersScreen: "Players",
+    ExpandedMapScreen: "Map View",
+    GlobalEventsScreen: "Global Events",
+    GlobalMapScreen: "Global Map",
+    GlobalCacheViewScreen: "Cache Details",
+    GlobalLeaderboardScreen: "Global Leaderboard",
+    GlobalProfileScreen: "Global Profile",
   };
 
   //   State ----------------------
 
   const routeName = route.name;
-  const isAuthScreen = routeName === 'LoginScreen' || routeName === 'RegisterScreen';
-  const isGlobalRoute = routeName.startsWith('Global');
-  const pageTitle = titleMap[routeName] || 'Treasure Hunt';
+  const isAuthScreen =
+    routeName === "LoginScreen" || routeName === "RegisterScreen";
+  const isGlobalRoute = routeName.startsWith("Global");
+  const pageTitle = titleMap[routeName] || "Treasure Hunt";
 
   //   Handlers -------------------
   //   View -----------------------
 
   return (
-    <View
+    <KeyboardAvoidingView
       style={[
         styles.screen,
         isAuthScreen && {
@@ -47,6 +48,7 @@ const Screen = ({children, style, showBack = false}) => {
           paddingBottom: insets.bottom,
         },
       ]}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
     >
       {!isAuthScreen && (
         <TopNavbar
@@ -65,20 +67,20 @@ const Screen = ({children, style, showBack = false}) => {
         />
       )}
       <StatusBar style="light" />
-    </View>
+    </KeyboardAvoidingView>
   );
 };
 
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    backgroundColor: '#1e1e2e',
+    backgroundColor: "#1e1e2e",
   },
   content: {
     flex: 1,
     padding: 15,
     zIndex: 1,
-    overflow: 'hidden',
+    overflow: "hidden",
   },
 });