R&D on PIN setup for authentication flow.

Worked on managing local storage

package-lock.json

@@ -8,6 +8,7 @@
       "name": "authenticationsdk",
       "version": "0.0.1",
       "dependencies": {
+        "@react-native-async-storage/async-storage": "^2.2.0",
         "@react-native-vector-icons/ionicons": "^12.3.0",
         "@react-native/new-app-screen": "0.83.1",
         "react": "19.2.0",
@@ -2692,6 +2693,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
+      "integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
+      "license": "MIT",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || >=0.65 <1.0"
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "20.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-20.0.0.tgz",
@@ -7398,6 +7411,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -8774,6 +8796,18 @@
       "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
       "license": "MIT"
     },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-vector-icons/ionicons": "^12.3.0",
     "@react-native/new-app-screen": "0.83.1",
     "react": "19.2.0",

src/screen/Home.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    FlatList,
+    TouchableOpacity,
+    Image,
+    SafeAreaView,
+    ActivityIndicator,
+} from 'react-native';
+
+interface Item {
+    id: string;
+    title: string;
+    subtitle: string;
+    image: string;
+}
+
+const DATA: Item[] = [
+    {
+        id: '1',
+        title: 'Food Delivery',
+        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
+        setTimeout(() => {
+            setList(DATA);
+            setLoading(false);
+        }, 1000);
+    }, []);
+
+    const renderItem = ({ item }: { item: Item }) => (
+        <TouchableOpacity style={styles.card} activeOpacity={0.8}>
+            <Image source={{ uri: item.image }} style={styles.image} />
+            <View style={styles.textContainer}>
+                <Text style={styles.title}>{item.title}</Text>
+                <Text style={styles.subtitle}>{item.subtitle}</Text>
+            </View>
+        </TouchableOpacity>
+    );
+
+    if (loading) {
+        return (
+            <View style={styles.loader}>
+                <ActivityIndicator size="large" color="#000" />
+            </View>
+        );
+    }
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <Text style={styles.header}>Home</Text>
+
+            <FlatList
+                data={list}
+                keyExtractor={(item) => item.id}
+                renderItem={renderItem}
+                contentContainerStyle={styles.list}
+                showsVerticalScrollIndicator={false}
+            />
+        </SafeAreaView>
+    );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F5F5F5',
+    },
+    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,
+        fontWeight: '600',
+        color: '#000',
+    },
+    subtitle: {
+        fontSize: 13,
+        color: '#666',
+        marginTop: 4,
+    },
+    loader: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});