Add root snackbar

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

src/screens/settings.tsx

@@ -5,7 +5,6 @@ import {
   List,
   Portal,
   SegmentedButtons,
-  Snackbar,
   Switch,
   Text,
   useTheme,
@@ -17,6 +16,7 @@ import {
   setGridColumns,
   setMasonryColumns,
   setNoMedia,
+  setSnackbarMessage,
 } from '../state';
 import StorageLocationChangeDialog from '../components/storageLocationChangeDialog';
 import { useRealm } from '@realm/react';
@@ -27,9 +27,6 @@ const settingsStyles = StyleSheet.create({
   scrollView: {
     paddingHorizontal: '4%',
   },
-  snackbar: {
-    marginBottom: 90,
-  },
   marginBottom: {
     marginBottom: 15,
   },
@@ -60,8 +57,6 @@ const Settings = () => {
   const dispatch = useDispatch();
   const realm = useRealm();
 
-  const [snackbarMessage, setSnackbarMessage] = useState<string>();
-
   const [
     storageLocationChangeDialogVisible,
     setStorageLocationChangeDialogVisible,
@@ -82,7 +77,7 @@ const Settings = () => {
       });
     });
 
-    setSnackbarMessage('Meme metadata refreshed.');
+    dispatch(setSnackbarMessage('Meme metadata refreshed.'));
   };
 
   return (
@@ -156,25 +151,13 @@ const Settings = () => {
         </List.Section>
       </ScrollView>
       <Portal>
-        <Portal>
-          <StorageLocationChangeDialog
-            visible={storageLocationChangeDialogVisible}
-            setVisible={setStorageLocationChangeDialogVisible}
-            setSnackbarMessage={setSnackbarMessage}
-          />
-        </Portal>
-        <Snackbar
-          visible={!!snackbarMessage}
-          // eslint-disable-next-line unicorn/no-useless-undefined
-          onDismiss={() => setSnackbarMessage(undefined)}
-          style={settingsStyles.snackbar}
-          action={{
-            label: 'Dismiss',
-            // eslint-disable-next-line unicorn/no-useless-undefined
-            onPress: () => setSnackbarMessage(undefined),
-          }}>
-          {snackbarMessage}
-        </Snackbar>
+        <StorageLocationChangeDialog
+          visible={storageLocationChangeDialogVisible}
+          setVisible={setStorageLocationChangeDialogVisible}
+          setSnackbarMessage={message => {
+            dispatch(setSnackbarMessage(message));
+          }}
+        />
       </Portal>
     </>
   );