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;