Add tag datatable

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

src/screens/settings.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import {
   Button,
   List,
@@ -12,18 +12,20 @@ import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootScrollView } from '../components';
 import styles from '../styles';
-import {
-  RootState,
-  updateNoMedia,
-  updateStorageUri,
-} from '../state';
+import { RootState, updateNoMedia, updateStorageUri } from '../state';
 import type {} from 'redux-thunk/extend-redux';
 import { useDimensions } from '../contexts';
 
+const settingsScreenStyles = StyleSheet.create({
+  snackbar: {
+    marginBottom: 90,
+  },
+});
+
 const SettingsScreen = () => {
   const noMedia = useSelector((state: RootState) => state.settings.noMedia);
   const dispatch = useDispatch();
-  const dimensions = useDimensions();
+  const { responsive } = useDimensions();
 
   const [optimizingDatabase, setOptimizingDatabase] = useState(false);
   const [snackbarVisible, setSnackbarVisible] = useState(false);
@@ -46,7 +48,7 @@ const SettingsScreen = () => {
             <Button
               mode="elevated"
               style={{
-                marginBottom: dimensions.responsive.verticalScale(15),
+                marginBottom: responsive.verticalScale(15),
               }}
               loading={optimizingDatabase}
               onPress={optimizeDatabase}>
@@ -58,7 +60,7 @@ const SettingsScreen = () => {
             <Button
               mode="elevated"
               style={{
-                marginBottom: dimensions.responsive.verticalScale(15),
+                marginBottom: responsive.verticalScale(15),
               }}
               onPress={async () => {
                 const { uri } = await openDocumentTree(true);
@@ -71,7 +73,7 @@ const SettingsScreen = () => {
                 styles.flexRowSpaceBetween,
                 styles.smallPaddingHorizontal,
                 {
-                  marginBottom: dimensions.responsive.verticalScale(15),
+                  marginBottom: responsive.verticalScale(15),
                 },
               ]}>
               <Text>Hide media from gallery</Text>
@@ -89,7 +91,7 @@ const SettingsScreen = () => {
         <Snackbar
           visible={snackbarVisible}
           onDismiss={() => setSnackbarVisible(false)}
-          style={{ marginBottom: dimensions.static.verticalScale(75) }}
+          style={settingsScreenStyles.snackbar}
           action={{
             label: 'Dismiss',
             onPress: () => setSnackbarVisible(false),