fixed iphone formatting

package-lock.json

@@ -80,6 +80,7 @@
         "react-native-svg": "^12.1.1",
         "react-native-svg-transformer": "^1.0.0",
         "react-native-toast-message": "^2.1.3",
+        "react-native-view-shot": "3.1.2",
         "react-native-web": "^0.13",
         "react-native-windows": "0.64.2",
         "react-query": "^3.19.0",
@@ -25310,6 +25311,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-view-shot": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.1.2.tgz",
+      "integrity": "sha512-9u9fPtp6a52UMoZ/UCPrCjKZk8tnkI9To0Eh6yYnLKFEGkRZ7Chm6DqwDJbYJHeZrheCCopaD5oEOnRqhF4L2Q==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
@@ -51334,6 +51344,12 @@
         }
       }
     },
+    "react-native-view-shot": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.1.2.tgz",
+      "integrity": "sha512-9u9fPtp6a52UMoZ/UCPrCjKZk8tnkI9To0Eh6yYnLKFEGkRZ7Chm6DqwDJbYJHeZrheCCopaD5oEOnRqhF4L2Q==",
+      "requires": {}
+    },
     "react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",

src/components/Atlas.tsx

@@ -8,14 +8,14 @@
 import {
   RacingSansOne_400Regular
 } from '@expo-google-fonts/racing-sans-one';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native'
 import { MenuProvider } from 'react-native-popup-menu'
 import axios, { AxiosRequestConfig } from 'axios';
 import { useFonts } from 'expo-font';
 import { getItemAsync } from 'expo-secure-store';
 import { observer } from 'mobx-react';
 import React, { useEffect, useRef, useState } from 'react';
-import { AppState, SafeAreaView, StatusBar, Platform, Alert } from 'react-native';
+import { AppState, StatusBar, Platform, Alert } from 'react-native';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Splash } from '../components/Splash';
 import { colors, SECURESTORE_ACCESSTOKEN, SECURESTORE_REFRESHTOKEN } from '../utils/GlobalUtils';
@@ -27,6 +27,7 @@ import { API_URL } from '../utils/RequestUtils';
 import {reportAxiosError} from '../libs/auth/core'
 import * as Updates from 'expo-updates'
 import { Manifest, UpdateCheckResult } from 'expo-updates';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export enum TokenState {
   CheckingToken,
@@ -187,15 +188,15 @@ const Atlas : React.FC = () => {
 
   return (
     <MenuProvider>
-        <SafeAreaView style={{height: '100%', backgroundColor: colors.red}}>
-        <StatusBar barStyle='light-content' backgroundColor={colors.red}/>
-        <NavigationContainer>  
-          {checkingToken ? <Splash/> :
-          <QueryClientProvider client={queryClient}>
-            {authStore.accessToken ? <AuthorizedNavigator  /> : <UnauthorizedNavigator /> } 
-          </QueryClientProvider> }
-        </NavigationContainer>  
-      </SafeAreaView>
+      <StatusBar barStyle='light-content' backgroundColor={colors.red}/>
+      <NavigationContainer>  
+      <SafeAreaView style={{backgroundColor: colors.red, height: '100%'}} edges={['top', 'left', 'right']}>
+        {checkingToken ? <Splash/> :
+        <QueryClientProvider client={queryClient}>
+          {authStore.accessToken ? <AuthorizedNavigator  /> : <UnauthorizedNavigator /> } 
+        </QueryClientProvider> }
+        </SafeAreaView>
+      </NavigationContainer>  
     </MenuProvider>
   );
 }

src/navigation/AuthorizedNavigator.tsx

@@ -5,11 +5,11 @@
  * <dev@clicknpush.ca>, January 2022
  */
 
-import { FontAwesome } from '@expo/vector-icons';
+import { FontAwesome, SimpleLineIcons } from '@expo/vector-icons';
 import { BottomTabNavigationOptions, BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { observer } from "mobx-react";
 import React, { useEffect } from "react";
-import { AppState, Platform, SafeAreaView, View, Text, Alert } from 'react-native';
+import { AppState, Platform, SafeAreaView, View, Text, Alert, OpaqueColorValue, ViewStyle } from 'react-native';
 import OutdoorMap from "../components/Map/MainMapComponent/OutdoorMap";
 import Profile from "../components/Profile/Profile";
 import { colors, SECURESTORE_NOTIFTOKEN } from "../utils/GlobalUtils";
@@ -40,11 +40,9 @@ const MainTabs = createBottomTabNavigator();
 const tabBarOptions: BottomTabNavigationOptions = {
     //keyboardHidesTabBar: true,
     tabBarActiveTintColor: 'white',
-    tabBarActiveBackgroundColor: '#e35555',
     tabBarInactiveTintColor: "lightgray",
     headerShown:false,
-
-    tabBarStyle: {backgroundColor: colors.red, height: 60, justifyContent: 'center'},
+    tabBarStyle: {height: 90, backgroundColor: colors.red, justifyContent: 'center'},
     tabBarLabelStyle: {marginBottom: 7},
     tabBarIconStyle: {marginBottom: 7}
 } 
@@ -214,25 +212,37 @@ const AuthorizedNavigator: React.FC = () => {
         return newNotifAmount > 0 ? <Badge positioning={{top: 8, left: 13,}} value={newNotifAmount}/> : null
     }
 
+    // const IconView: React.FC<{iconType: Icone, focused: boolean, color: string}>  = ({iconType, color, focused, children}) => {
+    //     const activeBorderStyles: ViewStyle = {borderTopWidth: 1, borderTopColor: color}
+
+    //     return (
+    //         <View style={[{position: 'absolute', top: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}, focused ? activeBorderStyles : null  ]}>
+    //             <FontAwesome name={focused ? 'bell' : 'bell-o'} size={getIconSize(focused)} color={color} />
+    //             <FontAwesome name={focused ? iconType : iconType + '-o'} size={getIconSize(focused)} color={color} />
+    //             {children}
+    //         </View>
+    //     )
+    // }
+
     return(
-        <SafeAreaView style={{height: '100%'}}>
+        <View style={{height: '100%'}}>
             {/* <AdMobBanner adUnitID="ca-app-pub-3940256099942544/6300978111" /> */}
             <MainTabs.Navigator 
                 sceneContainerStyle={{flex:1}}     
                 initialRouteName="Map"
                 screenOptions={tabBarOptions}>
-                <MainTabs.Screen name="Map" component={MapNavigator} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'map' : 'map-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 10}}/>)}}/>
+                <MainTabs.Screen name="Map" component={MapNavigator} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'map' : 'map-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 15}}/>)}}/>
                 <MainTabs.Screen name="Feed" options={{tabBarIcon: ({color, focused}) => (
-                    <View style={{position: 'absolute', top: 10}}>
+                    <View style={{position: 'absolute', top: 15}}>
                         <FontAwesome name={focused ? 'bell' : 'bell-o'} size={getIconSize(focused)} color={color} />
                         {renderFeedBadge()}
                     </View>
                 )}}>
                     {() => <Feed notifications={notifications} handleNotifInteraction={handleNotificationInteraction} />}
                 </MainTabs.Screen>
-                <MainTabs.Screen name="Profile" component={Profile} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'user' : 'user-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 10}}/>)}} />
+                <MainTabs.Screen name="Profile" component={Profile} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'user' : 'user-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 15}}/>)}} />
             </MainTabs.Navigator>
-        </SafeAreaView>
+        </View>
         
     )
 }