Refactor dimension handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/navigation.tsx

@@ -6,91 +6,87 @@ import {
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { BottomNavigation, Portal, useTheme } from 'react-native-paper';
+import { BottomNavigation, useTheme } from 'react-native-paper';
 import { Home, Tags, Settings, AddMeme, AddTag } from './screens';
-import { horizontalScale } from './styles';
-import { FloatingActionButton } from './components';
 import { darkNavigationTheme, lightNavigationTheme } from './theme';
+import { useDimensions } from './contexts';
+import { FloatingActionButton } from './components';
 
 const TabNavigator = () => {
+  const dimensions = useDimensions();
+
   const TabNavigatorBase = createBottomTabNavigator();
-  const [fabVisible, setFabVisible] = React.useState(true);
 
   return (
     <>
-      <Portal.Host>
-        <TabNavigatorBase.Navigator
-          screenOptions={{
-            headerShown: false,
-          }}
-          tabBar={({ navigation, state, descriptors, insets }) => (
-            <BottomNavigation.Bar
-              navigationState={state}
-              safeAreaInsets={insets}
-              onTabPress={({ route, preventDefault }) => {
-                const event = navigation.emit({
-                  type: 'tabPress',
-                  target: route.key,
-                  canPreventDefault: true,
+      <TabNavigatorBase.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}
+        tabBar={({ navigation, state, descriptors, insets }) => (
+          <BottomNavigation.Bar
+            navigationState={state}
+            safeAreaInsets={insets}
+            onTabPress={({ route, preventDefault }) => {
+              const event = navigation.emit({
+                type: 'tabPress',
+                target: route.key,
+                canPreventDefault: true,
+              });
+              if (event.defaultPrevented) {
+                preventDefault();
+              } else {
+                navigation.dispatch({
+                  ...CommonActions.navigate(route.name, route.params),
+                  target: state.key,
                 });
-                if (event.defaultPrevented) {
-                  preventDefault();
-                } else {
-                  navigation.dispatch({
-                    ...CommonActions.navigate(route.name, route.params),
-                    target: state.key,
-                  });
-                }
-                route.name === 'Settings'
-                  ? setFabVisible(false)
-                  : setFabVisible(true);
-              }}
-              renderIcon={({ route, focused, color }) => {
-                const { options } = descriptors[route.key];
-                if (options.tabBarIcon) {
-                  return options.tabBarIcon({
-                    focused,
-                    color,
-                    size: horizontalScale(20),
-                  });
-                }
-              }}
-              getLabelText={({ route }) => {
-                const { options } = descriptors[route.key];
-                return options.title ?? route.name;
-              }}
-            />
-          )}>
-          <TabNavigatorBase.Screen
-            name="Home"
-            component={Home}
-            options={{
-              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="home" color={color} size={size} />
-              ),
+              }
+            }}
+            renderIcon={({ route, focused, color }) => {
+              const { options } = descriptors[route.key];
+              if (options.tabBarIcon) {
+                return options.tabBarIcon({
+                  focused,
+                  color,
+                  size: dimensions.static.horizontalScale(20),
+                });
+              }
+            }}
+            getLabelText={({ route }) => {
+              const { options } = descriptors[route.key];
+              return options.title ?? route.name;
             }}
           />
-          <TabNavigatorBase.Screen
-            name="Tags"
-            component={Tags}
-            options={{
-              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="tags" color={color} size={size} />
-              ),
-            }}
-          />
-          <TabNavigatorBase.Screen
-            name="Settings"
-            component={Settings}
-            options={{
-              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="cog" color={color} size={size} />
-              ),
-            }}
-          />
-        </TabNavigatorBase.Navigator>
-        <FloatingActionButton visible={fabVisible} />
-      </Portal.Host>
+        )}>
+        <TabNavigatorBase.Screen
+          name="Home"
+          component={Home}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <FontAwesome5 name="home" color={color} size={size} />
+            ),
+          }}
+        />
+        <TabNavigatorBase.Screen
+          name="Tags"
+          component={Tags}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <FontAwesome5 name="tags" color={color} size={size} />
+            ),
+          }}
+        />
+        <TabNavigatorBase.Screen
+          name="Settings"
+          component={Settings}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <FontAwesome5 name="cog" color={color} size={size} />
+            ),
+          }}
+        />
+      </TabNavigatorBase.Navigator>
+      <FloatingActionButton />
     </>
   );
 };