diff --git a/src/app.tsx b/src/app.tsx
index 4d72bcc..f9c3847 100644
--- a/src/app.tsx
+++ b/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 {
+
diff --git a/src/components/actionButton.tsx b/src/components/actionButton.tsx
new file mode 100644
index 0000000..5dafff0
--- /dev/null
+++ 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 (
+
+ 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}
+ />
+
+ );
+};
+
+export default ActionButton;