Fix layout bugs

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

src/components/floatingActionButton.tsx

@@ -1,17 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import { Keyboard } from 'react-native';
+import { Keyboard, StyleSheet } from 'react-native';
 import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { pick } from 'react-native-document-picker';
-import { useDimensions } from '../contexts';
+import { ORIENTATION, useDimensions } from '../contexts';
 import { ROUTE } from '../types';
 import { allowedMimeTypes, noOp } from '../utilities';
 
+const floatingActionButtonStyles = StyleSheet.create({
+  fab: {
+    paddingBottom: 90,
+    paddingRight: 10,
+  },
+  fabLandscape: {
+    paddingBottom: 40,
+    paddingRight: 12,
+  },
+});
+
 const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
-  const { responsive } = useDimensions();
+  const { orientation } = useDimensions();
 
   const [state, setState] = useState(false);
   const [keyboardOpen, setKeyboardOpen] = useState(false);
@@ -50,18 +61,6 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
             throw new Error('Not yet implemented');
           },
         },
-        {
-          icon: 'image-album',
-          label: 'Album',
-          onPress: async () => {
-            const res = await pick({
-              allowMultiSelection: true,
-              type: allowedMimeTypes,
-            }).catch(noOp);
-            if (!res) return;
-            navigate(ROUTE.ADD_MEME, { uri: res });
-          },
-        },
       ]}
       onStateChange={({ open }) => setState(open)}
       onPress={async () => {
@@ -70,10 +69,11 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
         if (!res) return;
         navigate(ROUTE.ADD_MEME, { uri: res });
       }}
-      style={{
-        paddingBottom: responsive.verticalScale(75),
-        paddingRight: responsive.horizontalScale(10),
-      }}
+      style={
+        orientation === ORIENTATION.PORTRAIT
+          ? floatingActionButtonStyles.fab
+          : floatingActionButtonStyles.fabLandscape
+      }
     />
   );
 };