Add actionButton conditional hiding

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

src/app.tsx

@@ -7,7 +7,6 @@ import { lightTheme, darkTheme } from './theme';
 import { Meme, Tag } from './database';
 import NavigationContainer from './navigation';
 import { SettingsProvider } from './contexts/settings';
-import ActionButton from './components/actionButton';
 
 function App(): JSX.Element {
   const colorScheme = useColorScheme();
@@ -24,7 +23,6 @@ function App(): JSX.Element {
               backgroundColor={theme.colors.background}
             />
             <NavigationContainer />
-            <ActionButton />
           </SafeAreaProvider>
         </SettingsProvider>
       </PaperProvider>

src/components/actionButton.tsx

@@ -5,7 +5,7 @@ import { noOp } from '../constants';
 
 const styles = StyleSheet.create({
   fab: {
-    marginBottom: 100,
+    paddingBottom: 90,
   },
 });
 

src/navigation.tsx

@@ -7,12 +7,16 @@ import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { BottomNavigation, useTheme } from 'react-native-paper';
 import { Home, Search, Tags, Settings } from './screens';
+import ActionButton from './components/actionButton';
 
 function NavigationContainer() {
   const TabNavigator = createBottomTabNavigator();
   const theme = useTheme();
 
+  const [showFab, setShowFab] = React.useState(true);
+
   return (
+    <>
       <NavigationContainerBase
         theme={{
           dark: theme.dark,
@@ -47,6 +51,7 @@ function NavigationContainer() {
                     target: state.key,
                   });
                 }
+                setShowFab(route.name !== 'Settings');
               }}
               renderIcon={({ route, focused, color }) => {
                 const { options } = descriptors[route.key];
@@ -98,6 +103,8 @@ function NavigationContainer() {
           />
         </TabNavigator.Navigator>
       </NavigationContainerBase>
+      {showFab && <ActionButton />}
+    </>
   );
 }