Fix iOS React Native implementation

packages/camera/package.json

@@ -44,11 +44,8 @@
   },
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@expo/vector-icons": "^12.0.5",
-    "@unimodules/core": "^7.1.2",
-    "@unimodules/react-native-adapter": "^6.3.9",
     "axios": "^0.24.0",
-    "expo-image-manipulator": "^10.2.1",
+    "expo-image-manipulator": "~11.1.1",
     "expo-screen-orientation": "^4.1.1",
     "i18next": "^21.8.13",
     "image-conversion": "^2.1.1",

packages/camera/src/components/AddDamageModal/AddDamageHelpModal.js

@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
     padding: 20,
     paddingBottom: 5,
     maxWidth: 400,
+    maxHeight: 235,
   },
   header: {
     alignSelf: 'stretch',

packages/camera/src/components/AddDamageModal/PartSelector.js

@@ -1,7 +1,7 @@
 import { CarView360 } from '@monkvision/inspection-report';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 
 const PART_SELECTOR_CONTAINER_WIDTH = 420;
 const PART_SELECTOR_CONTAINER_HEIGHT_DIMENSION = [
@@ -10,9 +10,9 @@ const PART_SELECTOR_CONTAINER_HEIGHT_DIMENSION = [
   { screenHeightSpan: [310, 99999], partSelectorHeight: 235 },
 ];
 
-const selectedPartAttributes = {
+const selectedPartAttributes = (Platform.OS === 'web') ? {
   style: { fill: '#ADE0FFB3' },
-};
+} : { fill: '#ADE0FFB3' };
 
 export default function PartSelector({ orientation, togglePart, isPartSelected, vehicleType }) {
   const { height } = useWindowDimensions();

packages/camera/src/components/AddDamageModal/assets/RotateLeft.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Svg, { Path } from 'react-native-svg';
 import PropTypes from 'prop-types';
+import { Platform } from 'react-native';
 
 export default function RotateLeft({ width, height }) {
   return (
@@ -11,7 +12,7 @@ export default function RotateLeft({ width, height }) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 10 21"
       preserveAspectRatio="xMidYMid slice"
-      pointerEvents="box-none"
+      pointerEvents={Platform.OS === 'web' ? 'box-none' : undefined}
     >
       <Path
         d="M3.87 3.87c-1.61 1.85-2.6 4.25-2.6 6.9 0 4.65 3.03 8.58 7.22 9.96l.78-2.36a8.002 8.002 0 0 1-5.5-7.6c0-1.95.72-3.73 1.88-5.12l3.62 3.62v-9h-9l3.6 3.6Z"

packages/camera/src/components/AddDamageModal/assets/RotateRight.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Svg, { Path } from 'react-native-svg';
 import PropTypes from 'prop-types';
+import { Platform } from 'react-native';
 
 export default function RotateRight({ width, height }) {
   return (
@@ -11,7 +12,7 @@ export default function RotateRight({ width, height }) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 37"
       preserveAspectRatio="xMidYMid slice"
-      pointerEvents="box-none"
+      pointerEvents={Platform.OS === 'web' ? 'box-none' : undefined}
     >
       <Path
         d="M9.64 6.117c2.684 3.083 4.334 7.083 4.334 11.5 0 7.75-5.05 14.3-12.034 16.6l-1.3-3.934c5.317-1.75 9.167-6.75 9.167-12.666 0-3.25-1.2-6.217-3.133-8.534L.64 15.117v-15h15l-6 6Z"

packages/camera/src/components/AddDamageModal/index.js

@@ -20,6 +20,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: CONTAINER_PADDING,
     paddingBottom: 5,
+    maxHeight: 400,
   },
   header: {
     alignSelf: 'stretch',

packages/camera/src/components/AddDamageOverlay/index.js

@@ -1,10 +1,17 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, View, Platform } from 'react-native';
 
 const styles = StyleSheet.create({
   overlay: {
-    position: 'fixed',
+    ...Platform.select({
+      web: {
+        position: 'fixed'
+      },
+      native: {
+        position: 'static'
+      }
+    }),
     margin: 'auto',
     left: 0,
     right: 0,

packages/camera/src/components/Camera/index.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 
@@ -22,6 +22,19 @@ function Camera({
 }, ref) {
   const { t } = useTranslation();
   const permissions = usePermissions();
+  const [cameraRef, setCameraRef] = useState(null);
+
+  useImperativeHandle(ref, () => ({
+    async takePictureAsync(options) {
+      return cameraRef?.takePictureAsync(options);
+    },
+    resumePreview() {
+      cameraRef?.resumePreview();
+    },
+    pausePreview() {
+      cameraRef?.pausePreview();
+    },
+  }));
 
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
   const size = getSize(ratio, { windowHeight, windowWidth });
@@ -33,7 +46,9 @@ function Camera({
   if (permissions.granted && permissions.status === PermissionStatus.GRANTED) {
     return (
       <ExpoCamera
-        ref={ref}
+        ref={(reference) => {
+          setCameraRef(reference);
+        }}
         ratio={ratio}
         onMountError={handleError}
         {...passThroughProps}

packages/camera/src/components/Camera/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 
 export default StyleSheet.create({
   container: {
@@ -12,7 +12,11 @@ export default StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.75)',
     borderRadius: 18,
     color: 'white',
-    fontFamily: 'monospace',
+    ...Platform.select({
+      web: {
+        fontFamily: 'monospace',
+      },
+    }),
     fontSize: 14,
     lineHeight: 9,
     marginTop: 4,

packages/camera/src/components/Capture/capture.js

@@ -68,14 +68,24 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.5)',
   },
   overlayContainer: {
-    position: 'fixed',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    width: '100vw',
-    height: '95vh',
-    top: '2.5vh',
     zIndex: 99,
+    ...Platform.select({
+      web: {
+        position: 'fixed',
+        height: '95vh',
+        width: '100vw',
+        top: '2.5vh',
+      },
+      native: {
+        position: 'static',
+        height: '95%',
+        width: '100%',
+        top: '2.5%',
+      },
+    }),
   },
   addDamageOverlay: {
     fontSize: 14,
@@ -280,7 +290,9 @@ const Capture = forwardRef(({
     endTour,
   };
   const startUploadAsync = useStartUploadAsync(startUploadAsyncParams);
-  const uploadAdditionalDamage = useUploadAdditionalDamage({ inspectionId, addDamageParts });
+  const uploadAdditionalDamage = useUploadAdditionalDamage({
+    inspectionId, addDamageParts, onPictureUploaded,
+  });
 
   const [goPrevSight, goNextSight] = useNavigationBetweenSights({ sights });
 
@@ -317,7 +329,8 @@ const Capture = forwardRef(({
 
   const windowDimensions = useWindowDimensions();
   const tourHasFinished = useMemo(
-    () => Object.values(uploads.state).every(({ status, uploadCount }) => (status === 'rejected' || status === 'fulfilled') && uploadCount >= 1),
+    () => Object.values(uploads.state)
+      .every(({ status, uploadCount }) => (status === 'rejected' || status === 'fulfilled') && uploadCount >= 1),
     [uploads.state],
   );
   const overlaySize = useMemo(
@@ -371,7 +384,7 @@ const Capture = forwardRef(({
   const handlePartSelectorConfirm = useCallback((selectedParts) => {
     setAddDamageParts(selectedParts);
     setAddDamageStatus(AddDamageStatus.TAKE_PICTURE);
-  }, [setAddDamageStatus]);
+  }, [setAddDamageParts, setAddDamageStatus]);
 
   const handleCloseCaptureEarly = useCallback(() => {
     if (typeof onCloseEarly === 'function') {
@@ -715,7 +728,8 @@ const Capture = forwardRef(({
           {children}
         </Camera>
       </Layout>
-      {[AddDamageStatus.HELP, AddDamageStatus.PART_SELECTOR].includes(addDamageStatus) ? (
+      {
+      [AddDamageStatus.HELP, AddDamageStatus.PART_SELECTOR].includes(addDamageStatus) ? (
         <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
           {addDamageStatus === AddDamageStatus.HELP ? (
             <AddDamageHelpModal
@@ -732,7 +746,8 @@ const Capture = forwardRef(({
             />
           ) : null}
         </View>
-      ) : null}
+      ) : null
+      }
       {closeEarlyModalState.show ? (
         <CloseEarlyConfirmModal
           confirmationMessage={closeEarlyModalState.message}