@zezosoft/zezo-ott-react-native-ui-kit 1.0.3 → 1.0.5

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

@@ -0,0 +1,306 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  ActivityIndicator,
+  StatusBar,
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Text } from '../../Text';
+import AppHeader from '../../Headers/AppHeader';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+  type Code as BaseCode,
+} from 'react-native-vision-camera';
+import QrViewArea from './components/QrViewArea';
+
+const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
+const HEADER_HEIGHT = 25;
+
+export interface Code extends BaseCode {
+  bounds?: {
+    origin: { x: number; y: number };
+    size: { width: number; height: number };
+  };
+}
+
+export type QrLoginProps = {
+  title?: string;
+  description?: string;
+  scanButtonText?: string;
+  onBackPress?: () => void;
+  onScanSuccess?: (value: string) => void;
+  theme?: AppTheme;
+  cameraType?: 'back' | 'front';
+  layout?: 'one' | 'two';
+};
+
+const DEFAULTS = {
+  title: 'QR Login',
+  description: 'Please move your camera over the QR Code',
+  scanButtonText: 'Scan QR Code',
+  cameraType: 'back' as const,
+};
+
+export const QrLogin: React.FC<QrLoginProps> = ({
+  title = DEFAULTS.title,
+  description = DEFAULTS.description,
+  scanButtonText = DEFAULTS.scanButtonText,
+  onBackPress,
+  onScanSuccess,
+  theme,
+  cameraType = DEFAULTS.cameraType,
+  layout = 'one',
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const [scanActive, setScanActive] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+
+  const device = useCameraDevice(cameraType);
+  const { hasPermission, requestPermission } = useCameraPermission();
+
+  const scanTimer = useRef<NodeJS.Timeout | null>(null);
+  const lastValueRef = useRef<string | null>(null);
+  const isScanning = useRef(false);
+
+  // ---- Check if QR inside scan box ----
+  const isCodeInsideBox = (code: Code): boolean => {
+    if (!code.bounds) return true;
+    const { origin, size } = code.bounds;
+    if (!origin || !size) return true;
+
+    const defaultBoxW = Math.min(SCREEN_W * 0.7, 320);
+    const boxW = defaultBoxW * 0.9;
+    const boxH = boxW;
+    const availableHeight = SCREEN_H - HEADER_HEIGHT;
+    const boxTop = Math.floor(
+      HEADER_HEIGHT + (availableHeight - boxH) / 2 - scale(40)
+    );
+    const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+
+    return (
+      origin.x >= sideOverlayWidth &&
+      origin.y >= boxTop &&
+      origin.x + size.width <= sideOverlayWidth + boxW &&
+      origin.y + size.height <= boxTop + boxH
+    );
+  };
+
+  // ---- Code Scanner ----
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned: (codes) => {
+      if (isScanning.current) return;
+      for (const c of codes) {
+        const code = c as Code;
+        const value = code?.value;
+        if (!value || !isCodeInsideBox(code)) continue;
+
+        if (lastValueRef.current === value) return;
+        lastValueRef.current = value;
+
+        if (scanTimer.current) clearTimeout(scanTimer.current);
+
+        scanTimer.current = setTimeout(() => {
+          isScanning.current = true;
+          setScanActive(false);
+          onScanSuccess?.(value);
+
+          setTimeout(() => {
+            isScanning.current = false;
+            lastValueRef.current = null;
+          }, 1000);
+        }, 1000);
+
+        break;
+      }
+    },
+  });
+
+  const startScan = async () => {
+    if (!hasPermission) {
+      setRequesting(true);
+      const granted = await requestPermission();
+      setRequesting(false);
+      if (!granted) return;
+    }
+    setScanActive(true);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={appliedTheme.dark ? 'light-content' : 'dark-content'}
+      />
+
+      <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
+        <AppHeader
+          title={title}
+          onBackPress={onBackPress}
+          theme={appliedTheme}
+          titleAlign="left"
+        />
+      </View>
+
+      <View style={styles.cameraWrapper}>
+        {scanActive ? (
+          device ? (
+            <>
+              <Camera
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={true}
+                codeScanner={codeScanner}
+              />
+              <QrViewArea
+                theme={appliedTheme}
+                layout={layout}
+                headerHeight={HEADER_HEIGHT}
+              />
+            </>
+          ) : (
+            <View
+              style={[styles.center, { backgroundColor: colors.background }]}
+            >
+              <Text
+                style={{ color: colors.textPrimary, fontSize: RFValue(16) }}
+              >
+                No camera available
+              </Text>
+            </View>
+          )
+        ) : (
+          <View style={styles.content}>
+            <View style={styles.card}>
+              <CameraIcon
+                size={scale(50)}
+                color={colors.button}
+                strokeWidth={1.6}
+                style={{ marginBottom: scale(12) }}
+              />
+
+              <Text style={[styles.descText, { color: colors.textPrimary }]}>
+                {description}
+              </Text>
+
+              <View
+                style={[
+                  styles.qrBox,
+                  {
+                    borderColor: colors.primary,
+                    backgroundColor: colors.skeletonBaseColor,
+                  },
+                ]}
+              >
+                <QrCode
+                  size={scale(180)}
+                  color={colors.button}
+                  strokeWidth={1.6}
+                />
+              </View>
+
+              <TouchableOpacity
+                style={[styles.scanBtn, { borderColor: colors.button }]}
+                onPress={startScan}
+                activeOpacity={0.85}
+              >
+                <CameraIcon
+                  size={scale(22)}
+                  color={colors.button}
+                  strokeWidth={2}
+                  style={{ marginRight: 10 }}
+                />
+                <Text style={[styles.scanText, { color: colors.button }]}>
+                  {scanButtonText}
+                </Text>
+              </TouchableOpacity>
+
+              {requesting && (
+                <ActivityIndicator
+                  style={{ marginTop: scale(12) }}
+                  color={colors.primary}
+                />
+              )}
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  headerWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 20,
+    elevation: 20,
+  },
+  cameraWrapper: {
+    flex: 1,
+    top: HEADER_HEIGHT,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: scale(14),
+    marginBottom: scale(50),
+  },
+  card: {
+    width: SCREEN_W - scale(40),
+    minHeight: SCREEN_H / 2.5,
+    alignItems: 'center',
+    padding: scale(20),
+  },
+  descText: {
+    fontSize: RFValue(15),
+    textAlign: 'center',
+    marginVertical: scale(12),
+  },
+  qrBox: {
+    marginVertical: scale(20),
+    padding: scale(20),
+    borderWidth: 2,
+    borderRadius: scale(12),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scanBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: scale(2),
+    borderRadius: scale(12),
+    paddingVertical: scale(10),
+    paddingHorizontal: scale(25),
+    marginTop: scale(20),
+  },
+  scanText: { fontWeight: '600', fontSize: RFValue(14) },
+});
+
+export default QrLogin;

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

@@ -0,0 +1,213 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+import Svg, { Rect } from 'react-native-svg';
+import type { AppTheme } from '../../../../theme/themes';
+import { useTheme } from '../../../../theme/hook/useTheme';
+
+const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
+
+type QrViewAreaProps = {
+  scanBoxWidth?: number;
+  layout?: 'one' | 'two';
+  headerHeight?: number;
+  theme?: AppTheme;
+};
+
+const QrViewArea: React.FC<QrViewAreaProps> = ({
+  scanBoxWidth,
+  layout = 'one',
+  headerHeight = 60,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(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,
+        }),
+      ])
+    );
+    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,
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlayTB: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  overlayLR: {
+    position: 'absolute',
+  },
+  scanBox: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 10,
+  },
+  corner: {
+    position: 'absolute',
+  },
+  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;