Add actionButton

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-07-09 19:35:29 +03:00
parent 5c6d26e5a0
commit f483bf4430
2 changed files with 56 additions and 3 deletions
--- a/src/components/actionButton.tsx
+++ b/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;