react-native-biometric-verifier/src/components/StepIndicator.js

A React Native module for biometric verification with face recognition and QR code scanning

// components/StepIndicator.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Global } from '../utils/Global';

const StepIndicator = ({ currentStep, qrscan }) => {
  return (
    <View style={styles.statusContainer}>
      {/* Identity Step */}
      <View style={styles.statusItem}>
        <Icon
          name="face"
          size={20}
          color={
            currentStep === "Identity Verification" ||
            currentStep === "Location Verification" ||
            currentStep === "Complete"
              ? Global.AppTheme.primary
              : Global.AppTheme.light
          }
          style={styles.statusIcon}
        />
        <Text
          style={[
            styles.statusText,
            (currentStep === "Identity Verification" ||
              currentStep === "Location Verification" ||
              currentStep === "Complete") && styles.statusTextActive,
          ]}
        >
          Identity
        </Text>
      </View>

      {/* Show Location only if qrscan = true */}
      {qrscan && (
        <>
          <View style={styles.statusSeparator} />
          <View style={styles.statusItem}>
            <Icon
              name="location-on"
              size={20}
              color={
                currentStep === "Location Verification" ||
                currentStep === "Complete"
                  ? Global.AppTheme.primary
                  : Global.AppTheme.light
              }
              style={styles.statusIcon}
            />
            <Text
              style={[
                styles.statusText,
                (currentStep === "Location Verification" ||
                  currentStep === "Complete") && styles.statusTextActive,
              ]}
            >
              Location
            </Text>
          </View>
        </>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  statusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
    paddingHorizontal: 20,
  },
  statusItem: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  statusIcon: {
    marginBottom: 5,
  },
  statusText: {
    fontSize: 12,
    color: Global.AppTheme.light,
    opacity: 0.6,
  },
  statusTextActive: {
    opacity: 1,
    fontWeight: '600',
  },
  statusSeparator: {
    width: 40,
    height: 1,
    backgroundColor: Global.AppTheme.light,
    opacity: 0.3,
    marginHorizontal: 15,
  },
});

export default StepIndicator;