Add actionButton

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

src/app.tsx

@@ -7,6 +7,7 @@ import { lightTheme, darkTheme } from './theme';
 import { Meme, Tag } from './database';
 import NavigationContainer from './navigation';
 import { SettingsProvider } from './contexts/settings';
+import ActionButton from './components/actionButton';
 
 function App(): JSX.Element {
   const colorScheme = Appearance.getColorScheme();
@@ -19,12 +20,11 @@ function App(): JSX.Element {
         <SettingsProvider>
           <SafeAreaProvider>
             <StatusBar
-              barStyle={
+              barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-                isDarkMode ? 'light-content' : 'dark-content'
-              }
               backgroundColor={theme.colors.background}
             />
             <NavigationContainer />
+            <ActionButton />
           </SafeAreaProvider>
         </SettingsProvider>
       </PaperProvider>

src/components/actionButton.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { FAB, Portal } from 'react-native-paper';
+import { noOp } from '../constants';
+
+const styles = StyleSheet.create({
+  fab: {
+    marginBottom: 100,
+  },
+});
+
+const ActionButton = () => {
+  const [state, setState] = React.useState(false);
+
+  return (
+    <Portal>
+      <FAB.Group
+        open={state}
+        visible
+        icon={state ? 'image' : 'plus'}
+        actions={[
+          {
+            icon: 'tag',
+            label: 'Tag',
+            onPress: () => noOp,
+          },
+          {
+            icon: 'note-text',
+            label: 'Text',
+            onPress: () => noOp,
+          },
+          {
+            icon: 'microphone',
+            label: 'Audio',
+            onPress: () => noOp,
+          },
+          {
+            icon: 'image-album',
+            label: 'Album',
+            onPress: () => noOp,
+          },
+        ]}
+        onStateChange={({ open }) => setState(open)}
+        onPress={() => {
+          if (state) noOp;
+        }}
+        style={styles.fab}
+      />
+    </Portal>
+  );
+};
+
+export default ActionButton;