diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 044eb03a..81fbba63 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/packages/react-native/src/assets/ChangeIcon.tsx b/packages/react-native/src/assets/ChangeIcon.tsx
new file mode 100644
index 00000000..a3e34708
--- /dev/null
+++ b/packages/react-native/src/assets/ChangeIcon.tsx
@@ -0,0 +1,19 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export default function ChangeIcon({ width, height, color }: SvgProps) {
+ return (
+
+ );
+}
diff --git a/packages/react-native/src/hooks/useCamera.ts b/packages/react-native/src/hooks/useCamera.ts
index 6569ba0a..c2fb4b5b 100644
--- a/packages/react-native/src/hooks/useCamera.ts
+++ b/packages/react-native/src/hooks/useCamera.ts
@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { Platform } from 'react-native';
import {
+ CameraPosition,
useCameraDevice,
useCameraPermission,
} from 'react-native-vision-camera';
@@ -14,7 +15,8 @@ import {
import useCameraPermissionAlert from './useCameraPermissionAlert';
export default function useCamera() {
- const device = useCameraDevice('back');
+ const [cameraPosition, setCameraPosition] = useState('back');
+ const device = useCameraDevice(cameraPosition);
const { hasPermission } = useCameraPermission();
const cameraPermissionAlert = useCameraPermissionAlert();
@@ -28,6 +30,10 @@ export default function useCamera() {
}
};
+ const changeCameraPosition = () => {
+ setCameraPosition((prev) => (prev === 'back' ? 'front' : 'back'));
+ };
+
useEffect(() => {
if (Platform.OS === 'ios') {
request(PERMISSIONS.IOS.CAMERA).then(() => {
@@ -40,5 +46,5 @@ export default function useCamera() {
}
}, []);
- return { device, hasPermission };
+ return { device, hasPermission, changeCameraPosition };
}
diff --git a/packages/react-native/src/hooks/useGallery.ts b/packages/react-native/src/hooks/useGallery.ts
index b1759ef6..083688b1 100644
--- a/packages/react-native/src/hooks/useGallery.ts
+++ b/packages/react-native/src/hooks/useGallery.ts
@@ -66,9 +66,7 @@ export default function useGallery() {
selectionLimit: 1,
});
- if (response.didCancel) {
- return null;
- }
+ if (response.didCancel) return null;
return response.assets?.[0]?.uri;
};
diff --git a/packages/react-native/src/pages/CameraPage.tsx b/packages/react-native/src/pages/CameraPage.tsx
index 6c4718e8..4adfcb9c 100644
--- a/packages/react-native/src/pages/CameraPage.tsx
+++ b/packages/react-native/src/pages/CameraPage.tsx
@@ -6,11 +6,12 @@ import { Camera, PhotoFile } from 'react-native-vision-camera';
import useCamera from '@/hooks/useCamera';
import DownloadIcon from '@/assets/DownloadIcon';
import useGallery from '@/hooks/useGallery';
+import ChangeIcon from '@/assets/ChangeIcon';
export default function CameraPage() {
const camera = useRef(null);
const captureRef = useRef(null);
- const { device, hasPermission } = useCamera();
+ const { device, hasPermission, changeCameraPosition } = useCamera();
const [Filter] = useState();
const [photo, setPhoto] = useState(null);
const { savePhoto: savePicture } = useGallery();
@@ -96,13 +97,22 @@ export default function CameraPage() {
audio={false}
/>
{Filter}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
)}