diff --git a/package-lock.json b/package-lock.json index 0ab69b5..216e344 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2666c73..c1f3193 100644 --- a/package.json +++ b/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", diff --git a/src/screen/Home.tsx b/src/screen/Home.tsx new file mode 100644 index 0000000..5c34d27 --- /dev/null +++ b/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(true); + const [list, setList] = useState([]); + + useEffect(() => { + // Simulate API call + setTimeout(() => { + setList(DATA); + setLoading(false); + }, 1000); + }, []); + + const renderItem = ({ item }: { item: Item }) => ( + + + + {item.title} + {item.subtitle} + + + ); + + if (loading) { + return ( + + + + ); + } + + return ( + + Home + + item.id} + renderItem={renderItem} + contentContainerStyle={styles.list} + showsVerticalScrollIndicator={false} + /> + + ); +}; + +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', + }, +});