@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

package/src/components/Auth/QrLogin/components/QrViewArea.tsx

@@ -2,7 +2,7 @@
  * @author Ashok Desai
  * @lastModified oct 02 Oct 2025 at 10:30 AM
  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -12,202 +12,318 @@ import {
   Platform,
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
-import Svg, { Rect } from 'react-native-svg';
 import type { ThemeOverride } from '../../../../theme/themes';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
+// Constants
+const ANIMATION_DURATION = 2000;
+const CORNER_SIZE = 18;
+const CORNER_BORDER_WIDTH = 3;
+const SCAN_LINE_HEIGHT = 3;
+const SCAN_LINE_MARGIN = 12;
+
 type QrViewAreaProps = {
   scanBoxWidth?: number;
-  layout?: 'one' | 'two';
   headerHeight?: number;
   theme?: ThemeOverride;
 };
 
-const QrViewArea: React.FC<QrViewAreaProps> = ({
-  scanBoxWidth,
-  layout = 'one',
-  headerHeight = 60,
-  theme,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const { colors } = appliedTheme;
-
-  const anim = useRef(new Animated.Value(0)).current;
-
-  const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
-  const boxW = defaultBoxW * 0.9;
-  const boxH = boxW;
-
-  const availableHeight = SCREEN_H - headerHeight;
-  const boxTop = Math.floor(
-    headerHeight + (availableHeight - boxH) / 2 - scale(40)
-  );
-
-  const topOverlayHeight = Math.floor(boxTop - headerHeight);
-  const bottomOverlayHeight = Math.floor(SCREEN_H - (boxTop + boxH));
-  const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
-
-  const margin = scale(12);
-  const lineTravel = boxH - margin * 2 - scale(3);
-
-  const translateY = anim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, lineTravel],
-  });
-
-  useEffect(() => {
-    const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(anim, {
-          toValue: 1,
-          duration: 2000,
-          easing: Easing.linear,
-          useNativeDriver: true,
-        }),
-        Animated.timing(anim, {
-          toValue: 0,
-          duration: 2000,
-          easing: Easing.linear,
-          useNativeDriver: true,
+const QrViewArea: React.FC<QrViewAreaProps> = React.memo(
+  ({ scanBoxWidth, headerHeight = 60, theme }) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
+    const { colors } = appliedTheme;
+
+    const anim = useRef(new Animated.Value(0)).current;
+
+    // Memoize box dimensions with better calculations (fix gap on right side)
+    const boxDimensions = useMemo(() => {
+      const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
+      const boxW = defaultBoxW * 0.9;
+      const boxH = boxW;
+      const availableHeight = SCREEN_H - headerHeight;
+      const boxTop = Math.max(
+        headerHeight,
+        Math.floor(headerHeight + (availableHeight - boxH) / 2 - scale(40))
+      );
+      const topOverlayHeight = Math.max(0, Math.floor(boxTop - headerHeight));
+      const bottomOverlayHeight = Math.max(
+        0,
+        Math.floor(SCREEN_H - (boxTop + boxH))
+      );
+      // Calculate left overlay width
+      const leftOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+      // Calculate right overlay width to fill remaining space (fix gap)
+      const scanBoxLeft = leftOverlayWidth;
+      const scanBoxRight = scanBoxLeft + boxW;
+      const rightOverlayWidth = Math.max(0, SCREEN_W - scanBoxRight);
+      return {
+        boxW,
+        boxH,
+        boxTop,
+        topOverlayHeight,
+        bottomOverlayHeight,
+        sideOverlayWidth: leftOverlayWidth,
+        rightOverlayWidth,
+      };
+    }, [scanBoxWidth, headerHeight]);
+
+    const margin = useMemo(() => scale(SCAN_LINE_MARGIN), []);
+    const lineTravel = useMemo(
+      () =>
+        Math.max(0, boxDimensions.boxH - margin * 2 - scale(SCAN_LINE_HEIGHT)),
+      [boxDimensions.boxH, margin]
+    );
+
+    const translateY = useMemo(
+      () =>
+        anim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, lineTravel],
         }),
-      ])
+      [anim, lineTravel]
+    );
+
+    // Memoize animation config
+    const animationConfig = useMemo(
+      () => ({
+        duration: ANIMATION_DURATION,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const animation = Animated.loop(
+        Animated.sequence([
+          Animated.timing(anim, {
+            toValue: 1,
+            ...animationConfig,
+          }),
+          Animated.timing(anim, {
+            toValue: 0,
+            ...animationConfig,
+          }),
+        ])
+      );
+      animation.start();
+      return () => animation.stop();
+    }, [anim, animationConfig]);
+
+    // Memoize corner positions
+    const cornerPositions = useMemo(() => ['tl', 'tr', 'bl', 'br'], []);
+
+    // Memoize overlay color
+    const overlayColor = useMemo(
+      () => colors.overlay || 'rgba(0, 0, 0, 0.6)',
+      [colors.overlay]
+    );
+
+    // Memoize all overlay components in one array (optimized - created once)
+    const overlayComponents = useMemo(
+      () => [
+        {
+          key: 'top',
+          style: [
+            styles.overlayTop,
+            {
+              top: headerHeight,
+              height: Math.max(0, boxDimensions.topOverlayHeight),
+              backgroundColor: overlayColor,
+            },
+          ],
+        },
+        {
+          key: 'bottom',
+          style: [
+            styles.overlayBottom,
+            {
+              top: boxDimensions.boxTop + boxDimensions.boxH,
+              height: Math.max(0, boxDimensions.bottomOverlayHeight),
+              backgroundColor: overlayColor,
+            },
+          ],
+        },
+        {
+          key: 'left',
+          style: [
+            styles.overlaySide,
+            {
+              left: 0,
+              top: boxDimensions.boxTop,
+              height: boxDimensions.boxH,
+              width: Math.max(0, boxDimensions.sideOverlayWidth),
+              backgroundColor: overlayColor,
+            },
+          ],
+        },
+        {
+          key: 'right',
+          style: [
+            styles.overlaySide,
+            {
+              right: 0,
+              top: boxDimensions.boxTop,
+              height: boxDimensions.boxH,
+              width: Math.max(0, boxDimensions.rightOverlayWidth),
+              backgroundColor: overlayColor,
+            },
+          ],
+        },
+      ],
+      [
+        headerHeight,
+        boxDimensions.topOverlayHeight,
+        boxDimensions.boxTop,
+        boxDimensions.boxH,
+        boxDimensions.bottomOverlayHeight,
+        boxDimensions.sideOverlayWidth,
+        boxDimensions.rightOverlayWidth,
+        overlayColor,
+      ]
+    );
+
+    // Memoize scan box style with proper positioning (ensure no gap on right)
+    const scanBoxStyle = useMemo(
+      () => [
+        styles.scanBox,
+        {
+          top: boxDimensions.boxTop,
+          left: boxDimensions.sideOverlayWidth,
+          width: boxDimensions.boxW,
+          height: boxDimensions.boxH,
+        },
+      ],
+      [
+        boxDimensions.boxTop,
+        boxDimensions.sideOverlayWidth,
+        boxDimensions.boxW,
+        boxDimensions.boxH,
+      ]
+    );
+
+    // Memoize corner styles for better performance
+    const cornerSize = useMemo(() => scale(CORNER_SIZE), []);
+    const cornerBorderWidth = useMemo(() => scale(CORNER_BORDER_WIDTH), []);
+
+    const getCornerStyle = useCallback(
+      (c: string) => {
+        const baseStyle = [
+          styles.corner,
+          styles[`corner_${c}` as keyof typeof styles],
+        ];
+        const dynamicStyle = {
+          borderColor: colors.button,
+          width: cornerSize,
+          height: cornerSize,
+          borderTopWidth: c.startsWith('t') ? cornerBorderWidth : 0,
+          borderBottomWidth: c.startsWith('b') ? cornerBorderWidth : 0,
+          borderLeftWidth: c.endsWith('l') ? cornerBorderWidth : 0,
+          borderRightWidth: c.endsWith('r') ? cornerBorderWidth : 0,
+        };
+        return [...baseStyle, dynamicStyle];
+      },
+      [colors.button, cornerSize, cornerBorderWidth]
+    );
+
+    // Memoize animated line style
+    const scanLineHeight = useMemo(() => scale(SCAN_LINE_HEIGHT), []);
+    const animatedLineStyle = useMemo(
+      () => ({
+        position: 'absolute' as const,
+        top: margin,
+        left: margin,
+        right: margin,
+        height: scanLineHeight,
+        borderRadius: scanLineHeight / 2,
+        backgroundColor: colors.button,
+        transform: [{ translateY }],
+        shadowColor: colors.shadow || '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.4,
+        shadowRadius: 4,
+        elevation: Platform.OS === 'android' ? 5 : 0,
+      }),
+      [margin, scanLineHeight, colors.button, colors.shadow, translateY]
     );
-    animation.start();
-    return () => animation.stop();
-  }, [anim]);
-
-  return (
-    <>
-      <View
-        style={[
-          styles.overlayTB,
-          {
-            top: headerHeight,
-            height: topOverlayHeight,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.overlayTB,
-          {
-            top: boxTop + boxH,
-            height: bottomOverlayHeight,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.overlayLR,
-          {
-            top: boxTop,
-            height: boxH,
-            width: sideOverlayWidth,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.overlayLR,
-          {
-            top: boxTop,
-            right: 0,
-            height: boxH,
-            width: sideOverlayWidth,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-
-      <View
-        style={[
-          styles.scanBox,
-          { top: boxTop, width: boxW, height: boxH, left: sideOverlayWidth },
-        ]}
-      >
-        {layout === 'two' ? (
-          <Svg width={boxW} height={boxH}>
-            <Rect
-              width={boxW}
-              height={boxH}
-              ry={scale(8)}
-              stroke={colors.button}
-              strokeWidth={scale(5)}
-              strokeDasharray={[scale(12), scale(6)]}
-              fill="none"
-            />
-          </Svg>
-        ) : (
-          ['tl', 'tr', 'bl', 'br'].map((c) => (
-            <View
-              key={c}
-              style={[
-                styles.corner,
-                styles[`corner_${c}` as keyof typeof styles],
-                {
-                  borderColor: colors.button,
-                  width: scale(18),
-                  height: scale(18),
-                  borderTopWidth: c.startsWith('t') ? scale(3) : 0,
-                  borderBottomWidth: c.startsWith('b') ? scale(3) : 0,
-                  borderLeftWidth: c.endsWith('l') ? scale(3) : 0,
-                  borderRightWidth: c.endsWith('r') ? scale(3) : 0,
-                },
-              ]}
-            />
-          ))
-        )}
-
-        <Animated.View
-          style={{
-            position: 'absolute',
-            top: margin,
-            left: margin,
-            right: margin,
-            height: scale(3),
-            borderRadius: scale(1.5),
-            backgroundColor: colors.button,
-            transform: [{ translateY }],
-            shadowColor: colors.shadow,
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 5,
-            elevation: Platform.OS === 'android' ? 4 : 0,
-          }}
-        />
+
+    // Memoize corner components for better performance (used in both layouts)
+    const cornerComponents = useMemo(
+      () =>
+        cornerPositions.map((c) => <View key={c} style={getCornerStyle(c)} />),
+      [cornerPositions, getCornerStyle]
+    );
+
+    return (
+      <View style={styles.container} pointerEvents="box-none">
+        {/* Overlay sections - optimized single render */}
+        {overlayComponents.map((overlay) => (
+          <View key={overlay.key} style={overlay.style} />
+        ))}
+
+        {/* Scan box */}
+        <View style={scanBoxStyle} pointerEvents="none">
+          {/* Corner components - shown in both layouts */}
+          {cornerComponents}
+
+          {/* Animated scan line */}
+          <Animated.View style={animatedLineStyle} />
+        </View>
       </View>
-    </>
-  );
-};
+    );
+  }
+);
 
 const styles = StyleSheet.create({
-  overlayTB: {
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+  },
+  overlayTop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  overlayBottom: {
     position: 'absolute',
     left: 0,
     right: 0,
+    zIndex: 1,
   },
-  overlayLR: {
+  overlaySide: {
     position: 'absolute',
+    zIndex: 1,
   },
   scanBox: {
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
-    zIndex: 10,
+    zIndex: 2,
   },
   corner: {
     position: 'absolute',
+    zIndex: 3,
+  },
+  corner_tl: {
+    top: 0,
+    left: 0,
+  },
+  corner_tr: {
+    top: 0,
+    right: 0,
+  },
+  corner_bl: {
+    bottom: 0,
+    left: 0,
+  },
+  corner_br: {
+    bottom: 0,
+    right: 0,
   },
-  corner_tl: { top: 0, left: 0 },
-  corner_tr: { top: 0, right: 0 },
-  corner_bl: { bottom: 0, left: 0 },
-  corner_br: { bottom: 0, right: 0 },
 });
 
 export default QrViewArea;