Add searchbar to home screen

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

src/components/floatingActionButton.tsx

@@ -1,26 +1,46 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Keyboard } from 'react-native';
 import { FAB, Portal } from 'react-native-paper';
-import { verticalScale } from '../styles';
+import { horizontalScale, verticalScale } from '../styles';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useEffect, useState } from 'react';
 
 const styles = StyleSheet.create({
   fab: {
-    paddingBottom: verticalScale(75),
+    position: 'absolute',
+    right: horizontalScale(10),
+    bottom: verticalScale(75),
   },
 });
 
-const FloatingActionButton = ({ visible }: { visible?: boolean }) => {
-  const [state, setState] = React.useState(false);
+const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
+  const [state, setState] = useState(false);
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
 
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setKeyboardOpen(true),
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setKeyboardOpen(false),
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
   return (
     <Portal>
       <FAB.Group
         open={state}
-        visible={visible ?? true}
+        visible={visible && !keyboardOpen}
         icon={state ? 'image' : 'plus'}
         actions={[
           {