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

@@ -32,7 +32,12 @@ export default function PartSelector({ orientation, togglePart, isPartSelected,
     [height],
   );
   const svgElement = useMemo(() => {
-    const svg = doc.children[0];
+    let svg;
+    if (Platform.OS === 'web') {
+      svg = doc.children[0];
+    } else {
+      svg = doc.childNodes[1];
+    }
     if (svg.tagName !== 'svg') {
       throw new Error('Invalid part selector SVG format: expected <svg> tag as the first children of XML document');
     }

packages/camera/src/components/AddDamageModal/SVGComponentMapper.native.js

@@ -0,0 +1,129 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import Svg, { Path, G, } from "react-native-svg";
+import CAR_PARTS from './hooks/carParts';
+
+const SELECTED_FILL_COLOR = '#ADE0FFB3';
+const UNSELECTED_FILL_COLOR = 'none';
+
+const jsxSpecialAttributes = {
+  class: 'className',
+};
+
+export default function SVGComponentMapper({ element, togglePart, isPartSelected, groupName }) {
+  function getAttribute(element, name) {
+    for (let i = 0; i < element.attributes.length; i++) {
+      if (element.attributes[i].name === name) {
+        return element.attributes[i].nodeValue;
+      }
+    }
+    return undefined;
+  }
+
+  let names = [];
+  for (let i = 0; i < element.attributes.length; i++) {
+    names.push(element.attributes[i].name);
+  }
+
+  const attributes = useMemo(() => names.reduce((prev, attr) => ({
+      ...prev,
+      [jsxSpecialAttributes[attr] ?? attr]: getAttribute(element, attr),
+    }), {}), [element]);
+
+  const elementClass = getAttribute(element, 'class');
+  const elementId = getAttribute(element, 'id');
+
+  let partKey = null;
+  if (groupName && CAR_PARTS.includes(groupName)) {
+    partKey = groupName;
+  }
+  if (elementClass && elementClass.includes('selectable') && CAR_PARTS.includes(elementId)) {
+    partKey = elementId;
+  }
+
+  const color = isPartSelected(partKey) ? SELECTED_FILL_COLOR : UNSELECTED_FILL_COLOR;
+  const onPress = () => {
+    togglePart(partKey);
+  };
+
+  let elementChildren;
+  elementChildren =  [];
+  if (element.childNodes) {
+    for (let i = 0; i < element.childNodes.length; i++) {
+        elementChildren.push(element.childNodes[i]);
+    }
+  }
+  const children = useMemo(() => [...elementChildren], [element]);
+  const passThroughGroupName = useMemo(
+    () => {
+      if (element.tagName === 'g') {
+        return elementId;
+      } else {
+        return null;
+      }
+    },
+    [element],
+  );
+
+  if (element.tagName === 'svg') {
+    return (
+      <Svg {...attributes}>
+        {children.map((child, id) => (
+          <SVGComponentMapper
+            key={id.toString()}
+            element={child}
+            togglePart={togglePart}
+            isPartSelected={isPartSelected}
+            groupName={passThroughGroupName}
+          />
+        ))}
+         <Path style={{ fill: '#ffffff' }} />
+      </Svg>
+    );
+  } else if (element.tagName === 'path') {
+      return (
+        <Path {...attributes} onPress={partKey ? onPress : null} fill={color}>
+          {children.map((child, id) => (
+            <SVGComponentMapper
+              key={id.toString()}
+              element={child}
+              togglePart={togglePart}
+              isPartSelected={isPartSelected}
+              groupName={passThroughGroupName}
+            />
+          ))}
+           <Path style={{ fill: '#ffffff' }} />
+        </Path>
+      );
+  } else if (element.tagName === 'g') {
+      return (
+        <G {...attributes} onPress={partKey ? onPress : null} fill={color}>
+          {children.map((child, id) => (
+            <SVGComponentMapper
+              key={id.toString()}
+              element={child}
+              togglePart={togglePart}
+              isPartSelected={isPartSelected}
+              groupName={passThroughGroupName}
+            />
+          ))}
+           <Path style={{ fill: '#ffffff' }} />
+        </G>
+      );
+  } else {
+    return null;
+  }
+}
+
+SVGComponentMapper.propTypes = {
+  element: PropTypes.any.isRequired,
+  groupName: PropTypes.string,
+  isPartSelected: PropTypes.func.isRequired,
+  togglePart: PropTypes.func.isRequired,
+};
+
+SVGComponentMapper.defaultProps = {
+  groupName: undefined,
+};

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/hooks/useXMLParser.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+const { DOMParser } = require('xmldom')
 
 export default function useXMLParser(xml) {
   return useMemo(() => new DOMParser().parseFromString(xml, 'text/xml'), [xml]);

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

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

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,7 +22,20 @@ function Camera({
 }, ref) {
   const { t } = useTranslation();
   const permissions = usePermissions();
+  const [cameraRef, setCameraRef] = useState(null);
 
+  useImperativeHandle(ref, () => ({
+    async takePictureAsync(options) { 
+      return await 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={ref => {
+          setCameraRef(ref) ;
+        }}
         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

@@ -268,7 +268,7 @@ const Capture = forwardRef(({
     endTour,
   };
   const startUploadAsync = useStartUploadAsync(startUploadAsyncParams);
-  const uploadAdditionalDamage = useUploadAdditionalDamage({ inspectionId });
+  const uploadAdditionalDamage = useUploadAdditionalDamage({inspectionId, onPictureUploaded});
 
   const [goPrevSight, goNextSight] = useNavigationBetweenSights({ sights });
 
@@ -359,7 +359,7 @@ const Capture = forwardRef(({
   const handlePartSelectorConfirm = useCallback((selectedParts) => {
     setAddDamageParts(selectedParts);
     setAddDamageStatus(AddDamageStatus.TAKE_PICTURE);
-  }, [setAddDamageStatus]);
+  }, [setAddDamageParts, setAddDamageStatus]);
 
   const handleCloseCaptureEarly = useCallback(() => {
     if (typeof onCloseEarly === 'function') {