AuthenticationSdk/App.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import Ionicons from '@react-native-vector-icons/ionicons';

const PIN_LENGTH = 4;

const App: React.FC = () => {
  const [pin, setPin] = useState('');

  const handlePress = (value: string) => {
    if (pin.length < PIN_LENGTH) {
      setPin(pin + value);
    }
  };

  const handleDelete = () => {
    setPin(pin.slice(0, -1));
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Verify Identity</Text>
      <Text style={styles.subtitle}>
        Use PIN, Fingerprint or Face ID
      </Text>

      {/* PIN DOTS */}
      <View style={styles.pinRow}>
        {Array.from({ length: PIN_LENGTH }).map((_, i) => (
          <View
            key={i}
            style={[
              styles.pinDot,
              pin.length > i && styles.pinDotFilled,
            ]}
          />
        ))}
      </View>

      {/* BIOMETRIC OPTIONS */}
      <View style={styles.bioRow}>
        <TouchableOpacity style={styles.bioBtn}>
          <Ionicons name="finger-print" size={36} color="#2563EB" />
          <Text style={styles.bioText}>Fingerprint</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.bioBtn}>
          <Ionicons name="happy-outline" size={36} color="#2563EB" />
          <Text style={styles.bioText}>Face ID</Text>
        </TouchableOpacity>
      </View>

      {/* KEYPAD */}
      <View style={styles.keypad}>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'del'].map((item, index) => {
          if (item === '') {
            return <View key={index} style={styles.key} />;
          }

          if (item === 'del') {
            return (
              <TouchableOpacity
                key={index}
                style={styles.key}
                onPress={handleDelete}
              >
                <Ionicons
                  name="backspace-outline"
                  size={26}
                  color="#333"
                />
              </TouchableOpacity>
            );
          }

          return (
            <TouchableOpacity
              key={index}
              style={styles.key}
              onPress={() => handlePress(item.toString())}
            >
              <Text style={styles.keyText}>{item}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    </SafeAreaView>
  );

};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8FAFF',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    marginTop: 40,
    color: '#111827',
  },
  subtitle: {
    fontSize: 14,
    color: '#6B7280',
    marginTop: 6,
  },

  pinRow: {
    flexDirection: 'row',
    marginVertical: 28,
  },
  pinDot: {
    width: 14,
    height: 14,
    borderRadius: 7,
    borderWidth: 1.5,
    borderColor: '#2563EB',
    marginHorizontal: 8,
  },
  pinDotFilled: {
    backgroundColor: '#2563EB',
  },

  bioRow: {
    flexDirection: 'row',
    marginBottom: 30,
  },
  bioBtn: {
    alignItems: 'center',
    marginHorizontal: 30,
  },
  bioText: {
    marginTop: 6,
    fontSize: 12,
    color: '#374151',
  },

  keypad: {
    width: '80%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  key: {
    width: '33%',
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
  },
  keyText: {
    fontSize: 26,
    fontWeight: '500',
    color: '#111827',
  },
});


export default App;