Added a new authentication screen with PIN, Fingerprint, and Face ID options.

Improved UI design and usability using a clean keypad layout and Ionicons.

App.tsx

@@ -1,45 +1,166 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import { NewAppScreen } from '@react-native/new-app-screen';
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import React, { useState } from 'react';
 import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+} from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
 
-function App() {
-  const isDarkMode = useColorScheme() === 'dark';
+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 (
-    <SafeAreaProvider>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
-    </SafeAreaProvider>
+    <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>
   );
-}
-
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
-
-  return (
-    <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
-      />
-    </View>
-  );
-}
 
+};
 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;