Refactor buttons

1 files changed, 29 insertions, 0 deletions

diff --git a/src/components/camera/FlipButton.tsx b/src/components/camera/FlipButton.tsx
new file mode 100644
index 00000000..c6f710a9
--- /dev/null
+++ b/src/components/camera/FlipButton.tsx
@@ -0,0 +1,29 @@
+import React, {Dispatch, SetStateAction} from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import {CameraType} from 'react-native-camera';
+import FlipIcon from '../../assets/icons/camera/flip.svg';
+import {styles} from './styles';
+
+interface FlipButtonProps {
+  setCameraType: Dispatch<SetStateAction<keyof CameraType>>;
+  cameraType: keyof CameraType;
+}
+
+/*
+ * Toggles between back camera and front camera
+ * Appears only when user has not taken a picture yet
+ * Once user takes a picture, this button disappears to reveal the save button
+ */
+export const FlipButton: React.FC<FlipButtonProps> = ({
+  setCameraType,
+  cameraType,
+}) => (
+  <TouchableOpacity
+    onPress={() => setCameraType(cameraType === 'front' ? 'back' : 'front')}
+    style={styles.saveButton}>
+    <FlipIcon width={40} height={40} />
+    <Text style={styles.saveButtonLabel}>Flip</Text>
+  </TouchableOpacity>
+);
+
+export default FlipButton;