added camera controls component and updated camera ui

components/camera-controls/camera-controls.component.jsx

@@ -0,0 +1,102 @@
+// src/toolbar.component.js file
+import { Ionicons } from "@expo/vector-icons";
+import { Camera } from "expo-camera";
+import React from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  alignCenter: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  bottomToolbar: {
+    marginTop: "auto",
+    height: 100,
+    display: "flex",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  captureBtn: {
+    width: 60,
+    height: 60,
+    borderWidth: 2,
+    borderRadius: 60,
+    borderColor: "#FFFFFF",
+  },
+  captureBtnActive: {
+    width: 80,
+    height: 80,
+  },
+  captureBtnInternal: {
+    width: 76,
+    height: 76,
+    borderWidth: 2,
+    borderRadius: 76,
+    backgroundColor: "red",
+    borderColor: "transparent",
+  },
+});
+
+const { FlashMode: CameraFlashModes, Type: CameraTypes } = Camera.Constants;
+
+export default function CameraControls({
+  capturing = false,
+  cameraType = CameraTypes.back,
+  flashMode = CameraFlashModes.off,
+  setFlashMode,
+  setCameraType,
+  onCaptureIn,
+  onCaptureOut,
+  onLongCapture,
+  onShortCapture,
+}) {
+  return (
+    <View style={styles.bottomToolbar}>
+      <TouchableOpacity
+        onPress={() =>
+          setFlashMode(
+            flashMode === CameraFlashModes.on
+              ? CameraFlashModes.off
+              : CameraFlashModes.on
+          )
+        }
+      >
+        <Ionicons
+          name={flashMode == CameraFlashModes.on ? "md-flash" : "md-flash-off"}
+          color="white"
+          size={30}
+        />
+      </TouchableOpacity>
+
+      <TouchableWithoutFeedback
+        onPressIn={onCaptureIn}
+        onPressOut={onCaptureOut}
+        onLongPress={onLongCapture}
+        onPress={onShortCapture}
+      >
+        <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
+          {capturing && <View style={styles.captureBtnInternal} />}
+        </View>
+      </TouchableWithoutFeedback>
+
+      <TouchableOpacity
+        onPress={() =>
+          setCameraType(
+            cameraType === CameraTypes.back
+              ? CameraTypes.front
+              : CameraTypes.back
+          )
+        }
+      >
+        <Ionicons name="md-reverse-camera" color="white" size={30} />
+      </TouchableOpacity>
+    </View>
+  );
+}