From 5552875c9101275a847c03826ca5d0140ea72453 Mon Sep 17 00:00:00 2001
From: Samy Ouyahia <103439265+souyahia-monk@users.noreply.github.com>
Date: Fri, 26 May 2023 14:15:29 +0200
Subject: [PATCH] Fixed bad logic for custom overlay styles (#497)

* Fixed bad logic for custom overlay styles

* lint fix

---------

Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>
---
 .../camera/src/components/Capture/capture.js  | 27 +++++++++----------
 .../components/Overlay/SVGElementMapper.js    |  9 +++----
 src/screens/InspectionCapture/index.js        |  1 +
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/camera/src/components/Capture/capture.js b/packages/camera/src/components/Capture/capture.js
index 056a1da8f..eecd6700c 100644
--- a/packages/camera/src/components/Capture/capture.js
+++ b/packages/camera/src/components/Capture/capture.js
@@ -65,10 +65,11 @@ const styles = StyleSheet.create({
     width: '100%',
     backgroundColor: 'rgba(0,0,0,0.5)',
   },
-  overlay: {
-    flex: 1,
-    position: 'absolute',
-    justifyContent: 'center',
+  overlayContainer: {
+    position: 'fixed',
+    height: '95vh',
+    top: '2.5vh',
+    zIndex: 99,
   },
   addDamageOverlay: {
     fontSize: 14,
@@ -81,7 +82,6 @@ const styles = StyleSheet.create({
   removePosition: {
     position: 'relative',
   },
-
 });
 
 const defaultNavigationOptions = {
@@ -572,16 +572,13 @@ const Capture = forwardRef(({
     <>
       {(isReady && overlay && loading === false
         && addDamageStatus !== AddDamageStatus.TAKE_PICTURE) ? (
-          <Overlay
-            svg={overlay}
-            style={[styles.overlay, overlaySize]}
-            rootStyles={{
-              position: 'fixed',
-              height: '95vh',
-              top: '2.5vh',
-            }}
-            pathStyles={overlayPathStyles}
-          />
+          <View style={[styles.overlayContainer]}>
+            <Overlay
+              svg={overlay}
+              pathStyles={overlayPathStyles}
+              rootStyles={{ height: '100%' }}
+            />
+          </View>
         ) : null}
       {(isReady && overlay && loading === false
         && addDamageStatus === AddDamageStatus.TAKE_PICTURE) ? (
diff --git a/packages/camera/src/components/Overlay/SVGElementMapper.js b/packages/camera/src/components/Overlay/SVGElementMapper.js
index f08d7c63e..2dfff3bee 100644
--- a/packages/camera/src/components/Overlay/SVGElementMapper.js
+++ b/packages/camera/src/components/Overlay/SVGElementMapper.js
@@ -1,8 +1,7 @@
-/* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 
-import { useInnerHTML, useJSXTransformAttributes, useCustomSVGAttributes } from './hooks';
+import { useCustomSVGAttributes, useInnerHTML, useJSXTransformAttributes } from './hooks';
 
 export default function SVGElementMapper({
   element,
@@ -24,15 +23,15 @@ export default function SVGElementMapper({
       ...transformedAttributes?.style ?? {},
       ...customAttributes?.style ?? {},
     },
-  }), []);
+  }), [transformedAttributes, customAttributes]);
   const children = useMemo(() => [...element.children], [element]);
 
   return (
     <Tag {...attributes}>
       {innerHTML}
-      {children.map((child, id) => (
+      {children.map((child) => (
         <SVGElementMapper
-          key={id.toString()}
+          key={child.outerHTML}
           element={child}
           rootStyles={rootStyles}
           pathStyles={pathStyles}
diff --git a/src/screens/InspectionCapture/index.js b/src/screens/InspectionCapture/index.js
index db85da1fa..c1b1840c6 100644
--- a/src/screens/InspectionCapture/index.js
+++ b/src/screens/InspectionCapture/index.js
@@ -191,6 +191,7 @@ export default function InspectionCapture() {
         colors={colors}
         vehicleType={vehicleType}
         selectedMode={selectedMode}
+        // overlayPathStyles={{ strokeWidth: 8 }}
       />
       <Notice />
     </View>