Implemented offline authentication functionality with PIN setup and login.

src/screen/Home.tsx

@@ -2,138 +2,105 @@ import React, { useEffect, useState } from 'react';
 import {
     View,
     Text,
+    TextInput,
+    Button,
+    Alert,
     StyleSheet,
-    FlatList,
-    TouchableOpacity,
-    Image,
-    SafeAreaView,
-    ActivityIndicator,
 } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-interface Item {
+const PIN_KEY = 'USER_PIN';
-    id: string;
-    title: string;
-    subtitle: string;
-    image: string;
-}
 
-const DATA: Item[] = [
+const App: React.FC = () => {
-    {
+    const [pin, setPin] = useState<string>('');
-        id: '1',
+    const [savedPin, setSavedPin] = useState<string | null>(null);
-        title: 'Food Delivery',
+    const [loggedIn, setLoggedIn] = useState<boolean>(false);
-        subtitle: 'Fast & fresh food',
-        image: 'https://via.placeholder.com/150',
-    },
-    {
-        id: '2',
-        title: 'Groceries',
-        subtitle: 'Daily essentials',
-        image: 'https://via.placeholder.com/150',
-    },
-    {
-        id: '3',
-        title: 'Medicines',
-        subtitle: 'Health care items',
-        image: 'https://via.placeholder.com/150',
-    },
-];
-
-const Home: React.FC = () => {
-    const [loading, setLoading] = useState<boolean>(true);
-    const [list, setList] = useState<Item[]>([]);
 
     useEffect(() => {
-        // Simulate API call
+        loadPin();
-        setTimeout(() => {
-            setList(DATA);
-            setLoading(false);
-        }, 1000);
     }, []);
 
-    const renderItem = ({ item }: { item: Item }) => (
+    const loadPin = async (): Promise<void> => {
-        <TouchableOpacity style={styles.card} activeOpacity={0.8}>
+        const storedPin = await AsyncStorage.getItem(PIN_KEY);
-            <Image source={{ uri: item.image }} style={styles.image} />
+        setSavedPin(storedPin);
-            <View style={styles.textContainer}>
+    };
-                <Text style={styles.title}>{item.title}</Text>
-                <Text style={styles.subtitle}>{item.subtitle}</Text>
-            </View>
-        </TouchableOpacity>
-    );
 
-    if (loading) {
+    const setUserPin = async (): Promise<void> => {
+        if (pin.length !== 4) {
+            Alert.alert('PIN must be 4 digits');
+            return;
+        }
+        await AsyncStorage.setItem(PIN_KEY, pin);
+        setSavedPin(pin);
+        setPin('');
+        Alert.alert('PIN set successfully');
+    };
+
+    const loginWithPin = (): void => {
+        if (pin === savedPin) {
+            setLoggedIn(true);
+            setPin('');
+        } else {
+            Alert.alert('Incorrect PIN');
+        }
+    };
+
+    const logout = (): void => {
+        setLoggedIn(false);
+    };
+
+    if (loggedIn) {
         return (
-            <View style={styles.loader}>
+            <View style={styles.container}>
-                <ActivityIndicator size="large" color="#000" />
+                <Text style={styles.title}>Hi Dude!</Text>
+                <Button title="Logout" onPress={logout} />
             </View>
         );
     }
 
     return (
-        <SafeAreaView style={styles.container}>
+        <View style={styles.container}>
-            <Text style={styles.header}>Home</Text>
+            <Text style={styles.title}>
+                {savedPin ? 'Enter PIN' : 'Set PIN'}
+            </Text>
 
-            <FlatList
+            <TextInput
-                data={list}
+                style={styles.input}
-                keyExtractor={(item) => item.id}
+                keyboardType="numeric"
-                renderItem={renderItem}
+                secureTextEntry
-                contentContainerStyle={styles.list}
+                maxLength={4}
-                showsVerticalScrollIndicator={false}
+                value={pin}
+                onChangeText={setPin}
+                placeholder="Enter 4-digit PIN"
             />
-        </SafeAreaView>
+
+            <Button
+                title={savedPin ? 'Login' : 'Save PIN'}
+                onPress={savedPin ? loginWithPin : setUserPin}
+            />
+        </View>
     );
 };
 
-export default Home;
+export default App;
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#F5F5F5',
+        justifyContent: 'center',
-    },
+        padding: 20,
-    header: {
-        fontSize: 22,
-        fontWeight: '700',
-        margin: 16,
-        color: '#111',
-    },
-    list: {
-        paddingHorizontal: 16,
-        paddingBottom: 20,
-    },
-    card: {
-        flexDirection: 'row',
-        backgroundColor: '#FFF',
-        borderRadius: 12,
-        marginBottom: 12,
-        padding: 12,
-        alignItems: 'center',
-        shadowColor: '#000',
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-        elevation: 3,
-    },
-    image: {
-        width: 60,
-        height: 60,
-        borderRadius: 10,
-        marginRight: 12,
-    },
-    textContainer: {
-        flex: 1,
     },
     title: {
-        fontSize: 16,
+        fontSize: 22,
-        fontWeight: '600',
+        marginBottom: 20,
-        color: '#000',
+        textAlign: 'center',
     },
-    subtitle: {
+    input: {
-        fontSize: 13,
+        borderWidth: 1,
-        color: '#666',
+        padding: 12,
-        marginTop: 4,
+        marginBottom: 20,
-    },
+        borderRadius: 5,
-    loader: {
+        fontSize: 18,
-        flex: 1,
+        textAlign: 'center',
-        justifyContent: 'center',
-        alignItems: 'center',
     },
 });