Squashed commit of the following:

commit 66c974161b59f1e3570e2a4a42334fabc16c2129
Merge: 53bdc94c d4b21051
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 17:06:19 2021 -0400

    Merge pull request #476 from shravyaramesh/tma937-tagg-camera

    [TMA-937] Tagg Camera

commit d4b210518eaffd3bf1320ca7ce7fa4a6d611528f
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 17:04:10 2021 -0400

    Cleanup code, Update camera options

commit 3f826ec0741d3f0d0c85a17e5d0a09eef402dbf2
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:45:45 2021 -0400

    Set to only allow photos

commit 9d30c0c211e6b0b1b87e5de93a043e6e9f06beb3
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:44:41 2021 -0400

    Cleanup code, Fix gallery icon bug

commit f6fdd5d913c29855644f226d09d6cba60faf6e21
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:32:19 2021 -0400

    Add error handling

commit 5fcffd40746b2074d523f53dc82c824d147444e5
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:29:06 2021 -0400

    Refactor buttons

commit f273a7aa1c2e27692c2a03ae1e2fc9b81360558d
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 17:18:47 2021 -0700

    Fix lint errors

commit 448e91ed0b6c7519c02bbe1ac32a9d51989679db
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 16:58:05 2021 -0700

    Fix lint errors

commit 6f94f0bb6dbe12e23f4222a0d0e3ffb09af965d7
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 16:50:13 2021 -0700

    Add missing description for permissions

commit 727c6384a2a07c42cd132d02da8c7dbb5757ea4f
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 16:50:00 2021 -0700

    Refactor code, Fix orientation bug

commit f596a0246a9b9453df3a93c8c3fc5c9137bb50fc
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:26:00 2021 -0700

    Create camera screen, Add to Navigator

commit 0646d38547319200f7f725cdd76b1ed9b531a188
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:24:54 2021 -0700

    Navigate to camera screen, Move image picker funct

commit f0762b7a3171f99833eb3c3f5e723c472dbc4879
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:23:56 2021 -0700

    Add assets for camera screen

commit 3c4676b7646fbddc43bf5d9796b7cbac185b6664
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:23:33 2021 -0700

    Add package, install for camera lib

6 files changed, 197 insertions, 0 deletions

diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
new file mode 100644
index 00000000..06a4e44e
--- /dev/null
+++ b/src/components/camera/FlashButton.tsx
@@ -0,0 +1,42 @@
+import React, {Dispatch, SetStateAction} from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import {FlashMode} from 'react-native-camera';
+import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
+import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import {styles} from './styles';
+
+interface FlashButtonProps {
+  flashMode: keyof FlashMode;
+  setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
+}
+
+/*
+ * Toggles between flash on/off modes
+ */
+export const FlashButton: React.FC<FlashButtonProps> = ({
+  flashMode,
+  setFlashMode,
+}) => (
+  <TouchableOpacity
+    onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+    style={styles.flashButtonContainer}>
+    {flashMode === 'on' ? (
+      <FlashOnIcon
+        height={30}
+        width={20}
+        color={'white'}
+        style={styles.flashIcon}
+      />
+    ) : (
+      <FlashOffIcon
+        height={30}
+        width={20}
+        color={'white'}
+        style={styles.flashIcon}
+      />
+    )}
+    <Text style={styles.saveButtonLabel}>Flash</Text>
+  </TouchableOpacity>
+);
+
+export default FlashButton;
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;
diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
new file mode 100644
index 00000000..c49ace7d
--- /dev/null
+++ b/src/components/camera/GalleryIcon.tsx
@@ -0,0 +1,43 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Image, Text, TouchableOpacity, View} from 'react-native';
+import {ScreenType} from '../../types';
+import {navigateToImagePicker} from '../../utils/camera';
+import {styles} from './styles';
+
+interface GalleryIconProps {
+  screenType: ScreenType;
+  title: string;
+  mostRecentPhotoUri: string;
+}
+
+/*
+ * Displays the most recent photo in the user's gallery
+ * On click, navigates to the image picker
+ */
+export const GalleryIcon: React.FC<GalleryIconProps> = ({
+  screenType,
+  title,
+  mostRecentPhotoUri,
+}) => {
+  const navigation = useNavigation();
+  return (
+    <TouchableOpacity
+      onPress={() => navigateToImagePicker(navigation, screenType, title)}
+      style={styles.saveButton}>
+      {mostRecentPhotoUri !== '' ? (
+        <Image
+          source={{uri: mostRecentPhotoUri}}
+          width={40}
+          height={40}
+          style={styles.galleryIcon}
+        />
+      ) : (
+        <View style={styles.galleryIconEmpty} />
+      )}
+      <Text style={styles.saveButtonLabel}>Gallery</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default GalleryIcon;
diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx
new file mode 100644
index 00000000..840cc804
--- /dev/null
+++ b/src/components/camera/SaveButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import SaveIcon from '../../assets/icons/camera/save.svg';
+import {downloadImage} from '../../utils/camera';
+import {styles} from './styles';
+
+interface SaveButtonProps {
+  capturedImageURI: string;
+}
+
+/*
+ * Appears when a picture has been taken,
+ * On click, saves the captured image to "Recents" album on device gallery
+ */
+export const SaveButton: React.FC<SaveButtonProps> = ({capturedImageURI}) => (
+  <TouchableOpacity
+    onPress={() => {
+      downloadImage(capturedImageURI);
+    }}
+    style={styles.saveButton}>
+    <SaveIcon width={40} height={40} />
+    <Text style={styles.saveButtonLabel}>Save</Text>
+  </TouchableOpacity>
+);
+
+export default SaveButton;
diff --git a/src/components/camera/index.ts b/src/components/camera/index.ts
new file mode 100644
index 00000000..d33d1e4a
--- /dev/null
+++ b/src/components/camera/index.ts
@@ -0,0 +1,4 @@
+export {default as GalleryIcon} from './GalleryIcon';
+export {default as FlashButton} from './FlashButton';
+export {default as FlipButton} from './FlipButton';
+export {default as SaveButton} from './SaveButton';
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
new file mode 100644
index 00000000..33b47cc4
--- /dev/null
+++ b/src/components/camera/styles.tsx
@@ -0,0 +1,53 @@
+import {StyleSheet} from 'react-native';
+import {normalize, SCREEN_WIDTH} from '../../utils/layouts';
+
+export const styles = StyleSheet.create({
+  saveButton: {
+    zIndex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: (SCREEN_WIDTH - 100) / 2,
+  },
+  saveButtonLabel: {
+    color: 'white',
+    fontWeight: '700',
+    fontSize: normalize(12),
+    lineHeight: normalize(14.32),
+    marginTop: 5,
+    zIndex: 999,
+  },
+  flashButtonContainer: {
+    position: 'absolute',
+    backgroundColor: '#808080',
+    opacity: 0.25,
+    zIndex: 1,
+    top: normalize(50),
+    right: 0,
+    marginRight: normalize(18),
+    height: 86,
+    width: 49,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 30,
+  },
+  galleryIcon: {
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    width: 40,
+    height: 40,
+  },
+  galleryIconEmpty: {
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    width: 40,
+    height: 40,
+    backgroundColor: 'grey',
+  },
+  flashIcon: {
+    zIndex: 2,
+  },
+});