Refactor dimension handling

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

src/components/floatingActionButton.tsx

@@ -1,24 +1,22 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, Keyboard } from 'react-native';
-import { FAB, Portal } from 'react-native-paper';
-import { horizontalScale, verticalScale } from '../styles';
+import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useEffect, useState } from 'react';
+import { useDimensions } from '../contexts';
 
 const styles = StyleSheet.create({
   fab: {
     position: 'absolute',
-    right: horizontalScale(10),
-    bottom: verticalScale(75),
   },
 });
 
 const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
-  const [state, setState] = useState(false);
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
+  const dimensions = useDimensions();
 
+  const [state, setState] = useState(false);
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
@@ -37,35 +35,39 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
   }, []);
 
   return (
-    <Portal>
-      <FAB.Group
-        open={state}
-        visible={visible && !keyboardOpen}
-        icon={state ? 'image' : 'plus'}
-        actions={[
-          {
-            icon: 'tag',
-            label: 'Tag',
-            onPress: () => navigate('Add Tag'),
-          },
-          {
-            icon: 'note-text',
-            label: 'Text',
-            onPress: () => navigate('Add Meme'),
-          },
-          {
-            icon: 'image-album',
-            label: 'Album',
-            onPress: () => navigate('Add Meme'),
-          },
-        ]}
-        onStateChange={({ open }) => setState(open)}
-        onPress={() => {
-          if (state) navigate('Add Meme');
-        }}
-        style={styles.fab}
-      />
-    </Portal>
+    <FAB.Group
+      open={state}
+      visible={visible && !keyboardOpen}
+      icon={state ? 'image' : 'plus'}
+      actions={[
+        {
+          icon: 'tag',
+          label: 'Tag',
+          onPress: () => navigate('Add Tag'),
+        },
+        {
+          icon: 'note-text',
+          label: 'Text',
+          onPress: () => navigate('Add Meme'),
+        },
+        {
+          icon: 'image-album',
+          label: 'Album',
+          onPress: () => navigate('Add Meme'),
+        },
+      ]}
+      onStateChange={({ open }) => setState(open)}
+      onPress={() => {
+        if (state) navigate('Add Meme');
+      }}
+      style={[
+        styles.fab,
+        {
+          paddingRight: dimensions.responsive.horizontalScale(10),
+          paddingBottom: dimensions.responsive.verticalScale(75),
+        },
+      ]}
+    />
   );
 };