(fix): Android Arrow (#324)

* fix: arrow at android

* chore: remove console.log

Author: Duduzera1997

src/components/CopilotModal.tsx

@@ -69,9 +69,9 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
       stopOnOutsideClick = false,
       arrowColor = "#fff",
       arrowSize = ARROW_SIZE,
-      margin = MARGIN
+      margin = MARGIN,
     },
-    ref
+    ref,
   ) {
     const { stop, currentStep, visible } = useCopilot();
     const [tooltipStyles, setTooltipStyles] = useState({});
@@ -82,7 +82,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
     });
     const layoutRef = useRef(makeDefaultLayout());
     const [layout, setLayout] = useState<LayoutRectangle | undefined>(
-      undefined
+      undefined,
     );
     const [maskRect, setMaskRect] = useState<LayoutRectangle | undefined>();
 
@@ -155,20 +155,28 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
         const tooltip: ViewStyle = {};
         const arrow: ViewStyle = {};
 
+        arrow.position = "absolute";
+
         if (verticalPosition === "bottom") {
           tooltip.top = rect.y + rect.height + margin;
           arrow.borderBottomColor = arrowColor;
+          arrow.borderTopColor = "transparent";
+          arrow.borderLeftColor = "transparent";
+          arrow.borderRightColor = "transparent";
           arrow.top = tooltip.top - arrowSize * 2;
         } else {
           tooltip.bottom = newMeasuredLayout.height - (rect.y - margin);
           arrow.borderTopColor = arrowColor;
+          arrow.borderLeftColor = "transparent";
+          arrow.borderRightColor = "transparent";
+          arrow.borderBottomColor = "transparent";
           arrow.bottom = tooltip.bottom - arrowSize * 2;
         }
 
         if (horizontalPosition === "left") {
           tooltip.right = Math.max(
             newMeasuredLayout.width - (rect.x + rect.width),
-            0
+            0,
           );
           tooltip.right =
             tooltip.right === 0 ? tooltip.right + margin : tooltip.right;
@@ -182,9 +190,9 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
           arrow.left = tooltip.left + margin;
         }
 
-        sanitize(arrow)
-        sanitize(tooltip)
-        sanitize(rect)
+        sanitize(arrow);
+        sanitize(tooltip);
+        sanitize(rect);
 
         const animate = [
           ["top", rect.y],
@@ -200,7 +208,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
                 easing,
                 useNativeDriver: false,
               });
-            })
+            }),
           ).start();
         } else {
           animate.forEach(([key, value]) => {
@@ -227,7 +235,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
         isAnimated,
         arrowSize,
         margin,
-      ]
+      ],
     );
 
     const animateMove = useCallback<CopilotModalHandle["animateMove"]>(
@@ -244,7 +252,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
           });
         });
       },
-      [_animateMove]
+      [_animateMove],
     );
 
     const reset = () => {
@@ -271,7 +279,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
           animateMove,
         };
       },
-      [animateMove]
+      [animateMove],
     );
 
     const modalVisible = containerVisible || visible;
@@ -346,7 +354,6 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
           >
             <StepNumberComponent />
           </Animated.View>
-
           {!!arrowSize && (
             <Animated.View key="arrow" style={[styles.arrow, arrowStyles]} />
           )}
@@ -359,7 +366,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
         </>
       );
     }
-  }
+  },
 );
 
 const floorify = (obj: Record<string, any>) => {
@@ -382,4 +389,4 @@ const removeNan = (obj: Record<string, any>) => {
 const sanitize = (obj: Record<any, any>) => {
   floorify(obj);
   removeNan(obj);
-}
+};

src/components/style.ts

@@ -18,7 +18,6 @@ export const styles = StyleSheet.create({
   },
   arrow: {
     position: "absolute",
-    borderColor: "transparent",
     borderWidth: ARROW_SIZE,
   },
   tooltip: {