Add navigation element animations

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

src/navigation.tsx

@@ -1,20 +1,26 @@
 import React from 'react';
-import {
-  CommonActions,
-  NavigationContainer as NavigationContainerBase,
-} from '@react-navigation/native';
+import { NavigationContainer as NavigationContainerBase } from '@react-navigation/native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { BottomNavigation, useTheme } from 'react-native-paper';
+import { useTheme } from 'react-native-paper';
+import { useSelector } from 'react-redux';
 import { Home, Tags, Settings, AddMeme, AddTag } from './screens';
 import { darkNavigationTheme, lightNavigationTheme } from './theme';
-import { FloatingActionButton } from './components';
+import {
+  FloatingActionButton,
+  HideableBottomNavigationBar,
+} from './components';
 import { ROUTE } from './types';
+import { RootState } from './state';
 
 const TabNavigator = () => {
+  const navVisible = useSelector(
+    (state: RootState) => state.navigation.navVisible,
+  );
+
+  const [route, setRoute] = React.useState(ROUTE.HOME);
   const TabNavigatorBase = createBottomTabNavigator();
-  const [showFab, setShowFab] = React.useState(true);
 
   return (
     <>
@@ -23,39 +29,13 @@ const TabNavigator = () => {
           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,
-                });
-              }
-              setShowFab((route.name as ROUTE) !== ROUTE.SETTINGS);
-            }}
-            renderIcon={({ route, focused, color }) => {
-              const { options } = descriptors[route.key];
-              if (options.tabBarIcon) {
-                return options.tabBarIcon({
-                  focused,
-                  color,
-                  size: 22,
-                });
-              }
-            }}
-            getLabelText={({ route }) => {
-              const { options } = descriptors[route.key];
-              return options.title ?? route.name;
-            }}
+          <HideableBottomNavigationBar
+            navigation={navigation}
+            state={state}
+            descriptors={descriptors}
+            insets={insets}
+            visible={!!navVisible}
+            routeCallback={newRoute => setRoute(newRoute)}
           />
         )}>
         <TabNavigatorBase.Screen
@@ -86,14 +66,14 @@ const TabNavigator = () => {
           }}
         />
       </TabNavigatorBase.Navigator>
-      <FloatingActionButton visible={showFab} />
+      <FloatingActionButton visible={navVisible && route !== ROUTE.SETTINGS} />
     </>
   );
 };
 
 const NavigationContainer = () => {
-  const StackNavigatorBase = createNativeStackNavigator();
   const theme = useTheme();
+  const StackNavigatorBase = createNativeStackNavigator();
 
   return (
     <NavigationContainerBase