\nnpx create-expo-app@latest\n<\/pre><\/div>\n\n\n\u05d0\u05d9\u05ea\u05d7\u05d5\u05dc \u05d4\u05e4\u05e8\u05d5\u05d9\u05d9\u05e7\u05d8<\/p>\n\n\n
\nnpm run reset-project\n<\/pre><\/div>\n\n\n\u05d4\u05e8\u05e6\u05ea \u05d4\u05e4\u05e8\u05d5\u05d9\u05d9\u05e7\u05d8<\/p>\n\n\n
\nnpx expo start\n<\/pre><\/div>\n\n\nTab Navigation<\/h2>\n\n\n\n
\u05d4\u05d3\u05d1\u05e8 \u05d4\u05e8\u05d0\u05e9\u05d5\u05df \u05e9\u05e0\u05e2\u05e9\u05d4 \u05d4\u05d5\u05d0 \u05dc\u05d4\u05e6\u05d9\u05d1 \u05d0\u05ea \u05d4\u05de\u05e1\u05db\u05d9\u05dd \u05dc\u05e0\u05d9\u05d5\u05d5\u05d8 \u05e2\u05dd \u05d4\u05e1\u05e8\u05d2\u05dc \u05d4\u05ea\u05d7\u05ea\u05d5\u05df. \u05e0\u05e2\u05e9\u05d4 \u05d0\u05ea \u05d6\u05d4 \u05e2\u05dd expo router<\/a>.<\/p>\n\n\n\n\u05e0\u05d1\u05d8\u05dc \u05d0\u05ea \u05e7\u05d5\u05d1\u05e5 index \u05d5\u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea (tabs) \u05d1\u05ea\u05d5\u05da \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea app. \u05e0\u05d5\u05e1\u05d9\u05e3 \u05d0\u05ea \u05d4\u05e7\u05d1\u05e6\u05d9\u05dd \u05d4\u05d1\u05d0\u05d9\u05dd: index.jsx, Profile.jsx, AddNew.jsx \u05d5\u05d0\u05ea layout.jsx_.<\/p>\n\n\n\n
\u05d4\u05e7\u05dc\u05d3\u05d4 \u05e9\u05dc \u05d4\u05d0\u05d5\u05ea\u05d9\u05d5\u05ea rnf \u05d5\u05d0\u05d9\u05e9\u05d5\u05e8 \u05ea\u05ea\u05df \u05de\u05d1\u05e0\u05d4 \u05d1\u05e1\u05d9\u05e1\u05d9 \u05e9\u05dc \u05e2\u05de\u05d5\u05d3.<\/p>\n\n\n\n
layout.jsx_<\/strong><\/p>\n\n\n\nimport React from 'react'\nimport { Tabs } from 'expo-router'\n\nexport default function TabLayout() {\n return (\n <Tabs>\n <Tabs.Screen name='index'\/>\n <Tabs.Screen name='AddNew'\/>\n <Tabs.Screen name='Profile'\/>\n <\/Tabs>\n )\n}\n<\/pre><\/div>\n\n\n\u05e0\u05e9\u05e0\u05d4 \u05d0\u05ea \u05ea\u05d5\u05db\u05df \u05e7\u05d5\u05d1\u05e5 layout.jsx_<\/strong> \u05e9\u05e0\u05de\u05e6\u05d0 \u05de\u05d7\u05d5\u05e5 \u05dc\u05ea\u05d9\u05e7\u05d9\u05d9\u05ea app \u05db\u05da \u05e9\u05d9\u05e0\u05d5\u05d5\u05d8 \u05d3\u05e8\u05da \u05d4-tabs \u05e9\u05dc\u05e0\u05d5.<\/p>\n\n\n\nimport { Stack } from "expo-router";\n\nexport default function RootLayout() {\n return (\n <Stack screenOptions={{\n headerShown: false\n }}>\n <Stack.Screen name="(tabs)" \/>\n <\/Stack>\n )\n}\n<\/pre><\/div>\n\n\n\u05d0\u05dd \u05e0\u05e6\u05d9\u05d2 \u05e2\u05db\u05e9\u05d9\u05d5 \u05d0\u05ea \u05d4\u05de\u05e1\u05da \u05e0\u05e8\u05d0\u05d4 \u05d0\u05ea \u05d4\u05d8\u05e7\u05e1\u05d8 \u05e9\u05d9\u05e9 \u05dc\u05e0\u05d5 \u05d1\u05de\u05e1\u05da \u05d4\u05d1\u05d9\u05ea \u05d5\u05dc\u05d7\u05d9\u05e6\u05d4 \u05e2\u05dc \u05db\u05dc tab \u05ea\u05e8\u05d0\u05d4 \u05d0\u05ea \u05d4\u05ea\u05d5\u05db\u05df \u05e9\u05dc\u05d5.<\/p>\n\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05d4\u05d5\u05e8\u05d9\u05d3 \u05d0\u05ea \u05db\u05d5\u05ea\u05e8\u05ea \u05d4\u05e2\u05de\u05d5\u05d3 \u05e9\u05db\u05ea\u05d5\u05d1 \u05d1\u05d4 tabs \u05d4\u05e9\u05ea\u05de\u05e9\u05e0\u05d5 \u05d1-headerShown. \u05d0\u05e4\u05e9\u05e8 \u05dc\u05e2\u05e9\u05d5\u05ea \u05d0\u05ea \u05d6\u05d4 \u05d2\u05dd \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05ea \u05d4-tabs.<\/p>\n\n\n\n
\u05d0\u05d7\u05e8\u05d9 \u05e9\u05d4\u05d8\u05d0\u05d1\u05d9\u05dd \u05e2\u05d5\u05d1\u05d3\u05d9\u05dd \u05e0\u05e2\u05d3\u05db\u05df \u05d0\u05ea \u05d4\u05d8\u05e7\u05e1\u05d8 \u05d5\u05d4\u05d0\u05d9\u05e7\u05d5\u05e0\u05d9\u05dd \u05e9\u05dc\u05d4\u05dd. \u05d0\u05d9\u05e7\u05d5\u05e0\u05d9\u05dd \u05d0\u05e4\u05e9\u05e8 \u05dc\u05de\u05e6\u05d5\u05d0 \u05d1\u05e1\u05e4\u05e8\u05d9\u05d9\u05ea \u05d4\u05d0\u05d9\u05d9\u05e7\u05d5\u05e0\u05d9\u05dd \u05e9\u05dc expo<\/a>.<\/p>\n\n\n\nlayout.jsx_<\/strong> (\u05e4\u05e0\u05d9\u05de\u05d9)<\/p>\n\n\n\nimport FontAwesome from '@expo\/vector-icons\/FontAwesome';\nimport React from 'react'\nimport { Tabs } from 'expo-router'\n\nexport default function TabLayout() {\n return (\n <Tabs\n screenOptions={{\n headerShown: false\n }}\n >\n <Tabs.Screen name='index'\n options={{\n tabBarLabel:"Home",\n tabBarIcon:({color, size}) => (\n <FontAwesome name="home" size={size} color={color} \/>\n )\n }} \n \/>\n <Tabs.Screen name='AddNew'\n options={{\n tabBarLabel:"Add New",\n tabBarIcon:({color, size}) => (\n <FontAwesome name="plus-square" size={size} color={color} \/>\n )\n }} \n \/>\n <Tabs.Screen name='Profile'\n options={{\n tabBarLabel:"Profile",\n tabBarIcon:({color, size}) => (\n <FontAwesome name="user" size={size} color={color} \/>\n )\n }} \n \/>\n <\/Tabs>\n )\n}\n<\/pre><\/div>\n\n\nWelcome Screen UI<\/h2>\n\n\n\n
\u05d1\u05db\u05e0\u05d9\u05e1\u05d4 \u05dc\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4, \u05d0\u05dd \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05dc\u05d0 \u05de\u05d6\u05d5\u05d4\u05d4, \u05d4\u05d5\u05d0 \u05d9\u05e2\u05d1\u05d5\u05e8 \u05dc\u05de\u05e1\u05da login, \u05d0\u05dd \u05d4\u05d5\u05d0 \u05de\u05d6\u05d5\u05d4\u05d4 \u05d4\u05d5\u05d0 \u05d9\u05d2\u05d9\u05e2 \u05dc\u05de\u05e1\u05da \u05d4\u05d1\u05d9\u05ea.<\/p>\n\n\n\n
\u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea login \u05d5\u05d1\u05ea\u05d5\u05db\u05d4 \u05e7\u05d5\u05d1\u05e5 index.jsx \u05e2\u05dd \u05de\u05d1\u05e0\u05d4 \u05d1\u05e1\u05d9\u05e1\u05d9 \u05e9\u05dc \u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4. \u05d1\u05e7\u05d5\u05d1\u05e5 layout.jsx_<\/strong> \u05d4\u05d7\u05d9\u05e6\u05d5\u05e0\u05d9 \u05e0\u05d9\u05e6\u05d5\u05e8 Stack.Screen \u05d7\u05d3\u05e9 \u05e2\u05dd \u05d4\u05e9\u05dd login.<\/p>\n\n\n\n\u05db\u05d3\u05d9 \u05dc\u05d4\u05d2\u05d9\u05e2 \u05dc\u05e2\u05de\u05d5\u05d3 \u05d4\u05d6\u05d4, \u05e0\u05d5\u05e1\u05d9\u05e3 <Redirect href={'login'} \/> \u05dc\u05e2\u05de\u05d5\u05d3 \u05d4\u05d1\u05d9\u05ea.<\/p>\n\n\n\n
\u05d1\u05e2\u05de\u05d5\u05d3 \u05d4\u05d1\u05d9\u05ea \u05e0\u05e6\u05d9\u05d2 \u05e6\u05d9\u05dc\u05d5\u05dd \u05de\u05e1\u05da \u05e9\u05dc \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4.<\/p>\n\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1\u05d0\u05d5\u05ea\u05dd \u05d4\u05e6\u05d1\u05e2\u05d9\u05dd \u05d1\u05db\u05dc \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4 \u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea constants \u05d1\u05ea\u05d9\u05e7\u05d9\u05d9\u05d4 \u05d4\u05e8\u05d0\u05e9\u05d9\u05ea \u05d5\u05d1\u05ea\u05d5\u05db\u05d4 \u05e7\u05d5\u05d1\u05e5 Colors.jsx.<\/p>\n\n\n
\nexport default{\n PRIMARY: '#16B8A7'\n}\n<\/pre><\/div>\n\n\n\u05d4\u05e7\u05d5\u05d3 \u05d4\u05de\u05dc\u05d0 \u05e9\u05dc \u05e7\u05d5\u05d1\u05e5 index.jsx \u05d1\u05ea\u05d9\u05e7\u05d9\u05d9\u05ea login:<\/p>\n\n\n
\nimport { View, Image, StyleSheet, Text, Button, \n TouchableOpacity } from 'react-native'\nimport React from 'react'\nimport Colors from '..\/..\/constants\/Colors'\n\nexport default function LoginScreen() {\n return (\n <View>\n <View style={styles.imageContainer}>\n <Image source={require('.\/..\/..\/assets\/images\/screenshot.png')} \n style={styles.image}\n \/>\n <\/View>\n\n <View style={styles.contentContainer}>\n <Text style={styles.headline}>Stay on Track!<\/Text>\n <Text style={styles.tagline}>Track you meds, take control on your health!<\/Text>\n\n <TouchableOpacity style={styles.buttonContainer}>\n <Text style={styles.button}>Continue<\/Text>\n <\/TouchableOpacity>\n <Text style={styles.terms}>Note: By clicking countinue \n button, you will agree to our terms and conditions.<\/Text>\n <\/View>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n imageContainer: {\n display: 'flex',\n alignItems: 'center',\n marginTop: 40\n },\n\n image: {\n width: 210,\n height: 450,\n borderRadius: 20\n },\n\n contentContainer: {\n padding: 35,\n backgroundColor: Colors.PRIMARY,\n height: '100%',\n marginTop: -20,\n \/\/ borderTopStartRadius: 20,\n \/\/ borderTopEndRadius: 20\n },\n\n headline: {\n fontSize: 30,\n fontWeight: 'bold',\n color: '#fff',\n textAlign: 'center'\n },\n\n tagline: {\n color: '#fff',\n textAlign: 'center',\n fontSize: 17,\n marginTop: 20\n },\n\n buttonContainer: {\n padding: 15,\n backgroundColor: '#fff',\n borderRadius: 99,\n marginTop: 20\n },\n\n button: {\n textAlign: 'center',\n fontSize: 18,\n fontWeight: 'bold',\n color: Colors.PRIMARY\n },\n\n terms: {\n marginTop: 20,\n lineHeight: 15,\n color: '#fff',\n textAlign: 'center'\n }\n})\n<\/pre><\/div>\n\n\n\u05d5\u05db\u05db\u05d4 \u05e0\u05e8\u05d0\u05d4 \u05d4\u05de\u05e1\u05da, \u05db\u05e8\u05d2\u05e2 \u05e2\u05dd \u05e1\u05ea\u05dd \u05ea\u05de\u05d5\u05e0\u05d4 \u05db\u05d9 \u05e2\u05d5\u05d3 \u05d0\u05d9\u05df \u05dc\u05d9 \u05d0\u05ea \u05d4\u05ea\u05de\u05d5\u05e0\u05d4 \u05e9\u05dc \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4…<\/p>\n\n\n
\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-04-120248.png\")
<\/figure>\n<\/div>\n\n\nSign In Screen UI<\/h2>\n\n\n\n
\u05d4\u05de\u05e1\u05da \u05d4\u05d1\u05d0 \u05d4\u05d5\u05d0 \u05de\u05e1\u05da \u05d4\u05d4\u05e8\u05e9\u05de\u05d4. \u05e0\u05d9\u05e6\u05d5\u05e8 \u05d1\u05e9\u05d1\u05d9\u05dc\u05d5 \u05e7\u05d5\u05d1\u05e5 \u05d1\u05e9\u05dd signin.jsx \u05d1\u05ea\u05d5\u05da \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea login.<\/p>\n\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05e2\u05d1\u05d5\u05e8 \u05dc\u05de\u05e1\u05da \u05d4\u05d1\u05d0 \u05e0\u05d5\u05e1\u05d9\u05e3 \u05dc\u05de\u05e1\u05da LoginScreen \u05d0\u05ea const router = useRouter(); \u05d5\u05dc\u05e8\u05db\u05d9\u05d1 TouchableOpacity \u05e0\u05d5\u05e1\u05d9\u05e3 \u05d0\u05ea \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea onPress.<\/p>\n\n\n
\nexport default function LoginScreen() {\n const router = useRouter();\n ...\n <TouchableOpacity style={styles.buttonContainer}\n onPress={() => router.push('login\/signin')}\n >\n<\/pre><\/div>\n\n\n\u05e7\u05d5\u05d1\u05e5 sign in \u05e2\u05dd \u05d8\u05d5\u05e4\u05e1 \u05d4\u05e8\u05e9\u05de\u05d4:<\/p>\n\n\n
\nimport { SafeAreaView, View, StyleSheet, Text,\n TextInput, TouchableOpacity\n } from 'react-native'\nimport { useRouter } from 'expo-router'\nimport Colors from '..\/..\/constants\/Colors'\nimport React from 'react'\n\nexport default function SignIn() {\n const router = useRouter();\n\n return (\n <View style={styles.mainContainer}>\n <View>\n <Text style={styles.header}>Sign In<\/Text>\n <Text style={styles.subheader}>Wecome Back<\/Text>\n <\/View>\n\n <View style={styles.formContainer}>\n <Text>Email:<\/Text>\n <TextInput style={styles.textInput}\n placeholder="Email"\n \/>\n\n <Text>Password:<\/Text>\n <TextInput style={styles.textInput}\n placeholder="Password"\n secureTextEntry={true}\n \/>\n\n <TouchableOpacity style={styles.buttonContainer}\n onPress={() => router.push('#')}\n >\n <Text style={styles.button}>Login<\/Text>\n <\/TouchableOpacity>\n\n <TouchableOpacity style={styles.linkContainer}\n onPress={() => router.push('#')}\n >\n <Text style={styles.link}>Create Account<\/Text>\n <\/TouchableOpacity>\n <\/View>\n \n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n mainContainer: {\n padding: 25\n },\n\n header: {\n fontSize: 25,\n fontWeight: 'bold',\n marginTop: 15\n },\n\n subheader:{\n fontSize: 18,\n marginTop: 10,\n color: "#b0b0b0"\n },\n\n formContainer: {\n marginTop: 25\n },\n\n textInput: {\n padding: 10,\n borderWidth: 1,\n fontSize: 16,\n borderRadius: 10,\n borderColor: "#c0c0c0",\n marginTop: 5,\n backgroundColor: '#fff',\n marginBottom: 15\n },\n\n buttonContainer: {\n padding: 10,\n backgroundColor: Colors.PRIMARY,\n borderRadius: 10,\n marginTop: 10\n },\n\n button: {\n textAlign: 'center',\n fontSize: 18,\n color: '#fff'\n },\n\n linkContainer: {\n marginTop: 20\n },\n\n link: {\n textAlign: "center",\n textDecorationLine: "underline"\n }\n})\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-04-170729.png\")
<\/figure>\n<\/div>\n\n\nSign Un Screen UI<\/h2>\n\n\n\n
\u05e0\u05d9\u05e6\u05d5\u05e8 \u05d0\u05ea \u05e2\u05de\u05d5\u05d3 \u05d4\u05d4\u05e8\u05e9\u05de\u05d4 signup.jsx. \u05e0\u05e0\u05d5\u05d5\u05d8 \u05d0\u05ea \u05e7\u05d9\u05e9\u05d5\u05e8 \u05d4\u05d4\u05e8\u05e9\u05de\u05d4 \u05dc\u05e2\u05de\u05d5\u05d3 \u05d4\u05de\u05ea\u05d0\u05d9\u05dd. \u05d4\u05e2\u05de\u05d5\u05d3 \u05e0\u05e8\u05d0\u05d4 \u05db\u05de\u05e2\u05d8 \u05db\u05de\u05d5 \u05e2\u05de\u05d5\u05d3 \u05d4-Sign In. \u05d9\u05e9 \u05d1\u05d5 \u05de\u05e7\u05d5\u05dd \u05dc\u05d4\u05db\u05e0\u05d9\u05e1 \u05e9\u05dd \u05d5\u05d4\u05d8\u05e7\u05e1\u05d8\u05d9\u05dd \u05e9\u05d5\u05e0\u05d5 \u05d1\u05d4\u05ea\u05d0\u05dd.<\/p>\n\n\n
\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-04-171806.png\")
<\/figure>\n<\/div>\n\n\nAuthentication<\/h2>\n\n\n\n
\u05dc\u05d1\u05e1\u05d9\u05e1 \u05d4\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-Firebase<\/a>. \u05d9\u05e9 \u05dc\u05d4\u05dd \u05ea\u05d5\u05db\u05e0\u05d9\u05ea \u05d7\u05d9\u05e0\u05de\u05d9\u05ea \u05d5\u05e7\u05dc \u05dc\u05d1\u05d3\u05d5\u05e7 \u05e9\u05dd \u05d0\u05ea \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4.<\/p>\n\n\n\n\u05d0\u05d7\u05e8\u05d9 \u05d4\u05e8\u05e9\u05de\u05d4 \u05e0\u05dc\u05d7\u05e5 Go to console \u05e0\u05d1\u05d7\u05e8 create a project. \u05e0\u05d9\u05ea\u05df \u05e9\u05dd \u05dc\u05e4\u05e8\u05d5\u05d9\u05d9\u05e7\u05d8 \u05d5\u05e0\u05de\u05e9\u05d9\u05da \u05d0\u05ea \u05ea\u05d4\u05dc\u05d9\u05da \u05d4\u05d4\u05ea\u05e7\u05e0\u05d4 \u05e2\u05d3 \u05dc\u05e1\u05d9\u05d5\u05dd.<\/p>\n\n\n\n
\u05e0\u05d1\u05d7\u05e8 \u05dc\u05d9\u05e6\u05d5\u05e8 \u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d9\u05ea web.<\/p>\n\n\n
\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-04-175502-1.png\")
<\/figure>\n<\/div>\n\n\n\u05d0\u05d7\u05e8\u05d9 \u05d4\u05e8\u05e9\u05de\u05ea \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4 \u05e0\u05e7\u05d1\u05dc \u05e7\u05d8\u05e2 \u05e7\u05d5\u05d3.<\/p>\n\n\n\n
\u05e0\u05e9\u05ea\u05de\u05e9 \u05d1:<\/p>\n\n\n
\nnpm install firebase\n<\/pre><\/div>\n\n\n\u05dc\u05d4\u05ea\u05e7\u05d9\u05df \u05d0\u05ea firebase \u05d1\u05e4\u05e8\u05d5\u05d9\u05d9\u05e7\u05d8.<\/p>\n\n\n\n
\u05d1\u05ea\u05d9\u05e7\u05d9\u05d9\u05ea \u05d4\u05d1\u05e1\u05d9\u05e1 \u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea config \u05d5\u05d1\u05ea\u05d5\u05db\u05d4 \u05e7\u05d5\u05d1\u05e5 FirebaseConfig.jsx. \u05dc\u05ea\u05d5\u05da \u05d4\u05e7\u05d5\u05d1\u05e5 \u05e0\u05e2\u05ea\u05d9\u05e7 \u05d0\u05ea \u05d4\u05e7\u05d5\u05d3 \u05e9\u05e0\u05ea\u05e0\u05d5 \u05dc\u05e0\u05d5 \u05d1\u05e2\u05de\u05d5\u05d3.<\/p>\n\n\n\n
\u05e0\u05d7\u05d6\u05d5\u05e8 \u05dc-console \u05d5\u05e0\u05d1\u05d7\u05e8 \u05d0\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea authentication. \u05d4\u05de\u05e1\u05da \u05de\u05e9\u05ea\u05e0\u05d4 \u05db\u05dc \u05d4\u05d6\u05de\u05df \u05d5\u05db\u05d3\u05d0\u05d9 \u05dc\u05e8\u05d0\u05d5\u05ea \u05d0\u05ea \u05d4\u05d4\u05d3\u05e8\u05db\u05d4 \u05d4\u05e2\u05d3\u05db\u05e0\u05d9\u05ea \u05e9\u05d4\u05dd \u05e0\u05d5\u05ea\u05e0\u05d9\u05dd \u05d1\u05e2\u05de\u05d5\u05d3.<\/p>\n\n\n\n
\u05e0\u05dc\u05d7\u05e5 \u05e2\u05dc Get started \u05db\u05d3\u05d9 \u05dc\u05d4\u05ea\u05d7\u05d9\u05dc \u05d1\u05ea\u05d4\u05dc\u05d9\u05da. \u05d1\u05ea\u05d5\u05e8 \u05d3\u05e8\u05da \u05d4\u05e8\u05e9\u05de\u05d4 \u05e0\u05d1\u05d7\u05e8 Email\/Password \u05de\u05d4\u05d0\u05e4\u05e9\u05e8\u05d5\u05d9\u05d5\u05ea \u05e9\u05d1\u05e2\u05de\u05d5\u05d3.<\/p>\n\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-04-181446-1024x436.png\")
<\/figure>\n\n\n\n\u05d1\u05e1\u05d5\u05e3 \u05e7\u05d5\u05d1\u05e5 FirebaseConfig \u05e0\u05d5\u05e1\u05d9\u05e3:<\/p>\n\n\n
\nexport const auth=getAuth(app)\n<\/pre><\/div>\n\n\n\u05d5\u05d1\u05e8\u05d0\u05e9 \u05d4\u05e7\u05d5\u05d1\u05e5 \u05d0\u05ea \u05d4-import:<\/p>\n\n\n
\nimport { getAuth } from "firebase\/auth"\n<\/pre><\/div>\n\n\n\u05d0\u05e4\u05e9\u05e8 \u05dc\u05e7\u05e8\u05d5\u05d0 \u05d0\u05ea \u05d4\u05ea\u05d9\u05e2\u05d5\u05d3<\/a> \u05e9\u05dc \u05ea\u05d4\u05dc\u05d9\u05da \u05d4\u05d4\u05e8\u05e9\u05de\u05d4 \u05e9\u05dc \u05de\u05e9\u05ea\u05de\u05e9.<\/p>\n\n\n\n\u05dc\u05e7\u05d5\u05d1\u05e5 signup \u05e0\u05d5\u05e1\u05d9\u05e3 \u05d0\u05ea \u05d4\u05e7\u05d5\u05d3 \u05dc\u05d4\u05e8\u05e9\u05de\u05ea \u05de\u05e9\u05ea\u05de\u05e9 \u05e2\u05dc \u05e4\u05d9 \u05d4\u05ea\u05d9\u05e2\u05d5\u05d3 \u05e9\u05dc firebase.<\/p>\n\n\n
\n...\nimport { createUserWithEmailAndPassword } from "firebase\/auth";\nimport { auth } from '..\/..\/config\/FirebaseConfig'\n\nexport default function SignUp() {\n const router = useRouter();\n const [email, setEmail] = useState();\n const [password, setPassword] = useState();\n const [userName, setUserName] = useState();\n\n const onCreateAccount = () => { \n if(!email || !password || !userName){\n notifyMessage('Please fill all details');\n return;\n }\n \n createUserWithEmailAndPassword(auth, email, password)\n .then(async(userCredential) => {\n \/\/ Signed up \n const user = userCredential.user;\n await updateProfile(user, {\n displayName: userName\n })\n router.push('(tabs)');\n \/\/ ...\n })\n .catch((error) => {\n const errorCode = error.code;\n const errorMessage = error.message;\n console.log(errorCode);\n if(errorCode == 'auth\/email-alreay-in-use'){\n notifyMessage('Email already exist.');\n }\n });\n }\n\n function notifyMessage(msg) {\n console.log(msg);\n if (Platform.OS === 'android') {\n ToastAndroid.show(msg, ToastAndroid.SHORT, ToastAndroid.BOTTOM)\n } else {\n Alert.alert(msg);\n }\n }\n\n return (\n ...\n )\n ...\n}\n<\/pre><\/div>\n\n\n\u05d0\u05ea \u05d4\u05e2\u05e8\u05db\u05d9\u05dd \u05e9\u05dc \u05d4\u05de\u05d9\u05d9\u05dc \u05d5\u05d4\u05e1\u05d9\u05e1\u05de\u05d0 \u05e0\u05e7\u05d1\u05dc \u05de\u05e9\u05d3\u05d5\u05ea \u05d4-input.<\/p>\n\n\n
\n<Text>Email:<\/Text>\n<TextInput style={styles.textInput}\n placeholder="Email"\n onChangeText={(value) => setEmail(value)}\n\/>\n\n<Text>Password:<\/Text>\n<TextInput style={styles.textInput}\n placeholder="Password"\n secureTextEntry={true}\n onChangeText={(value) => setPassword(value)}\n\/>\n\n<TouchableOpacity style={styles.buttonContainer}\n onPress={onCreateAccount}\n>\n <Text style={styles.button}>Create Account<\/Text>\n<\/TouchableOpacity>\n<\/pre><\/div>\n\n\n\u05d1\u05d4\u05db\u05e0\u05e1\u05ea \u05e4\u05e8\u05d8\u05d9 \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05dc\u05d4\u05e8\u05e9\u05de\u05d4, \u05e0\u05d5\u05e6\u05e8 \u05de\u05e9\u05ea\u05de\u05e9 \u05d7\u05d3\u05e9 \u05d1\u05d8\u05d1\u05dc\u05ea \u05d4\u05de\u05e9\u05ea\u05de\u05e9\u05d9\u05dd.<\/p>\n\n\n\n
\u05e0\u05e2\u05d1\u05d5\u05e8 \u05dc\u05e2\u05de\u05d5\u05d3 \u05d4-signin.<\/p>\n\n\n
\nimport { notifyMessage } from '..\/..\/Utils\/Utils'\n\nexport default function SignIn() {\n const router = useRouter();\n const [email, setEmail] = useState();\n const [password, setPassword] = useState();\n\n const onSignIn = () => { \n if(!email || !password){\n notifyMessage('Please fill all details');\n return;\n }\n\n signInWithEmailAndPassword(auth, email, password)\n .then((userCredential) => {\n \/\/ Signed in \n const user = userCredential.user;\n console.log(user);\n router.push('(tabs)');\n })\n .catch((error) => {\n const errorCode = error.code;\n const errorMessage = error.message;\n if(errorCode == 'auth\/invalid-credential'){\n notifyMessage('Invalid email or password.');\n }\n });\n }\n\n return (\n ...\n<\/pre><\/div>\n\n\n\u05d5\u05e0\u05d7\u05d1\u05e8 \u05d0\u05ea \u05d4\u05e9\u05d3\u05d5\u05ea \u05d5\u05d0\u05ea \u05d4\u05db\u05e4\u05ea\u05d5\u05e8 \u05db\u05de\u05d5 \u05d1-signup. \u05d0\u05ea notifyMessage \u05d4\u05d5\u05e6\u05d0\u05ea\u05d9 \u05dc\u05e7\u05d5\u05d1\u05e5 \u05d7\u05d9\u05e6\u05d5\u05e0\u05d9 \u05e9\u05dc utils \u05db\u05d3\u05d9 \u05dc\u05d0 \u05dc\u05d7\u05d6\u05d5\u05e8 \u05e2\u05dc \u05d4\u05e7\u05d5\u05d3.<\/p>\n\n\n\n
\u05dc\u05d0 \u05dc\u05e9\u05db\u05d5\u05d7 \u05dc\u05d4\u05d5\u05e8\u05d9\u05d3 \u05d0\u05ea \u05d4-redirect \u05d1\u05e2\u05de\u05d5\u05d3 \u05d4-index \u05e2\u05dc \u05de\u05e0\u05ea \u05e9\u05d9\u05d4\u05d9\u05d4 \u05e0\u05d9\u05d5\u05d5\u05d8 \u05dc\u05e2\u05de\u05d5\u05d3 \u05d4\u05d1\u05d9\u05ea.<\/p>\n\n\n\n
\u05de\u05d4 \u05e9\u05e0\u05e9\u05d0\u05e8 \u05d6\u05d4 \u05dc\u05d1\u05d3\u05d5\u05e7 \u05d1\u05e2\u05de\u05d5\u05d3\u05d9\u05dd \u05d4\u05e4\u05e0\u05d9\u05de\u05d9\u05d9\u05dd \u05d4\u05d0\u05dd \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05e9\u05dc\u05e0\u05d5 \u05e8\u05e9\u05d5\u05dd \u05d0\u05d5 \u05dc\u05d0. \u05d0\u05ea \u05d6\u05d4 \u05e0\u05e2\u05e9\u05d4 \u05d1\u05e2\u05de\u05d5\u05d3 \u05d4-layout <\/strong>\u05e9\u05d1\u05ea\u05d9\u05e7\u05d9\u05d9\u05ea app.<\/p>\n\n\n\nimport { auth } from '..\/..\/config\/FirebaseConfig'\nimport { onAuthStateChanged } from "firebase\/auth";\n\nexport default function TabLayout() {\n const router = useRouter();\n const [authenticated, setAuthenticated] = useState();\n\n onAuthStateChanged(auth, (user) => {\n if (user) {\n \/\/ User is signed in, see docs for a list of available properties\n \/\/ https:\/\/firebase.google.com\/docs\/reference\/js\/auth.user\n const uid = user.uid;\n setAuthenticated(true);\n } else {\n setAuthenticated(false);\n }\n });\n\n useEffect(() => {\n if(authenticated == false){\n router?.push('\/login');\n }\n }, [authenticated]);\n\n \/\/ for logout on menu\n \/\/ onPress={() => signOut(auth)}\n\n return (\n...\n<\/pre><\/div>\n\n\nAsyncStorage<\/h2>\n\n\n\n
\u05db\u05e9\u05d8\u05d5\u05e2\u05e0\u05d9\u05dd \u05de\u05d7\u05d3\u05e9 \u05d0\u05ea \u05d4\u05d3\u05e3, \u05d7\u05db\u05d5\u05dc \u05dc\u05e7\u05d7\u05ea \u05e7\u05e6\u05ea \u05d6\u05de\u05df \u05e2\u05d3 \u05e9-onAuthStateChanged \u05ea\u05d8\u05e2\u05df \u05d5\u05ea\u05d7\u05d6\u05d9\u05e8 \u05ea\u05e9\u05d5\u05d1\u05d4, \u05d5\u05d1\u05d9\u05e0\u05ea\u05d9\u05dd \u05d9\u05d4\u05d9\u05d4 \u05e0\u05d9\u05ea\u05d5\u05d1 \u05dc\u05de\u05e1\u05da \u05d4\u05db\u05e0\u05d9\u05e1\u05d4. \u05db\u05d3\u05d9 \u05dc\u05de\u05e0\u05d5\u05e2 \u05d0\u05ea \u05d6\u05d4 \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-AsyncStorage <\/a>\u05e9\u05de\u05e9\u05de\u05e9 \u05dc\u05d0\u05d7\u05e1\u05d5\u05df \u05de\u05e7\u05d5\u05de\u05d9 \u05e9\u05dc \u05d4\u05de\u05d9\u05d3\u05e2.<\/p>\n\n\n\n\u05d1\u05ea\u05d5\u05da \u05d4\u05ea\u05d9\u05e7\u05d9\u05d9\u05d4 \u05d4\u05e2\u05dc\u05d9\u05d5\u05e0\u05d4 \u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05d4 \u05e9\u05dc services. \u05d1\u05ea\u05d5\u05db\u05d4 \u05e7\u05d5\u05d1\u05e5 Storage.jsx.<\/p>\n\n\n\n
\u05e0\u05ea\u05e7\u05d9\u05df:<\/p>\n\n\n
\nnpx expo install @react-native-async-storage\/async-storage\n<\/pre><\/div>\n\n\n\u05d1\u05e7\u05d5\u05d1\u05e5 Storage \u05e0\u05e9\u05de\u05d5\u05e8 \u05d0\u05ea \u05e2\u05e8\u05da \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d5\u05e0\u05e9\u05dc\u05d5\u05e3 \u05d0\u05d5\u05ea\u05d5.<\/p>\n\n\n
\nimport AsyncStorage from "@react-native-async-storage\/async-storage"\n\nexport const setLocalStorage = async(key, value) => {\n await AsyncStorage.setItem(key, JSON.stringify(value));\n}\n\nexport const getLocalStorage = async(key) => {\n var result = await AsyncStorage.getItem(key);\n return JSON.parse(result);\n}\n\nexport const removeLocalStorage = async() => {\n await AsyncStorage.clear();\n}\n<\/pre><\/div>\n\n\n\u05e2\u05db\u05e9\u05d9\u05d5 \u05e6\u05e8\u05d9\u05da \u05dc\u05e9\u05de\u05d5\u05e8 \u05d0\u05ea \u05d4\u05e2\u05e8\u05da \u05db\u05e9\u05de\u05e9\u05ea\u05de\u05e9 \u05e0\u05db\u05e0\u05e1 \u05dc\u05de\u05e2\u05e8\u05db\u05ea \u05d5\u05dc\u05e9\u05dc\u05d5\u05e3 \u05d1\u05e2\u05ea \u05d4\u05e6\u05d5\u05e8\u05da.<\/p>\n\n\n\n
\u05d1\u05e7\u05d5\u05d1\u05e5 signin:<\/p>\n\n\n
\nconst onSignIn = () => { \nif(!email || !password){\n notifyMessage('Please fill all details');\n return;\n}\n\nsignInWithEmailAndPassword(auth, email, password)\n .then(async(userCredential) => {\n \/\/ Signed in \n const user = userCredential.user;\n await setLocalStorage('userDetails', user);\n router.push('(tabs)');\n })\n .catch((error) => {\n const errorCode = error.code;\n const errorMessage = error.message;\n if(errorCode == 'auth\/invalid-credential'){\n notifyMessage('Invalid email or password.');\n }\n });\n}\n<\/pre><\/div>\n\n\n\u05d1\u05e7\u05d5\u05d1\u05e5 signup:<\/p>\n\n\n
\nconst onCreateAccount = () => { \n if(!email || !password || !userName){\n notifyMessage('Please fill all details');\n return;\n }\n \n createUserWithEmailAndPassword(auth, email, password)\n .then(async(userCredential) => {\n \/\/ Signed up \n const user = userCredential.user;\n await updateProfile(user, {\n displayName: userName\n })\n setLocalStorage('userDetails', user);\n router.push('(tabs)');\n })\n .catch((error) => {\n const errorCode = error.code;\n const errorMessage = error.message;\n console.log(errorCode);\n if(errorCode == 'auth\/email-alreay-in-use'){\n notifyMessage('Email already exist.');\n }\n });\n}\n<\/pre><\/div>\n\n\n\u05e2\u05db\u05e9\u05d9\u05d5 \u05d1\u05de\u05e7\u05d5\u05dd onAuthStateChanged \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-getLocalStorage.<\/p>\n\n\n
\nexport default function TabLayout() {\n const router = useRouter();\n\n const getUserDetails = async() => {\n const userInfo = await getLocalStorage('userDetails');\n if(!userInfo)\n router.replace('\/login');\n }\n\n useEffect(() => {\n getUserDetails();\n }, []);\n<\/pre><\/div>\n\n\nValidation<\/p>\n\n\n\n
\u05d4\u05d5\u05e1\u05e4\u05ea\u05d9 \u05d5\u05dc\u05d9\u05d3\u05e6\u05d9\u05d4 \u05dc\u05e9\u05d3\u05d5\u05ea \u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05d4\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d4\u05e9\u05d2\u05d9\u05d0\u05d5\u05ea \u05d1\u05de\u05e7\u05d5\u05dd \u05d1\u05d5\u05dc\u05d8.<\/p>\n\n\n\n
\u05d4\u05e7\u05d5\u05d3 \u05e9\u05dc \u05d4\u05d5\u05dc\u05d9\u05d3\u05e6\u05d9\u05d4 \u05d1\u05e8\u05d0\u05e9 \u05d4\u05e7\u05d5\u05d1\u05e5:<\/p>\n\n\n
\nconst [errors, setErrors] = useState({email: '', password: ''});\n\nconst validateForm = () => {\n let errors = {email, password};\n \n if (!email) errors.email = "Email is required";\n if (!password) errors.password = "Password is required";\n \n setErrors(errors);\n \n return Object.keys(errors).length === 0;\n};\n<\/pre><\/div>\n\n\n\u05d4\u05e4\u05e2\u05dc\u05ea\u05d9 \u05d0\u05d5\u05ea\u05d5 \u05d1\u05ea\u05d5\u05da \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea \u05d4\u05d4\u05e8\u05e9\u05de\u05d4:<\/p>\n\n\n
\nconst onSignIn = () => { \n if(!email || !password){\n validateForm();\n notifyMessage('Please fill all details');\n return;\n } \n<\/pre><\/div>\n\n\n\u05d5\u05d4\u05d4\u05e6\u05d2\u05d4 \u05ea\u05d4\u05d9\u05d4 \u05de\u05ea\u05d7\u05ea \u05dc\u05e9\u05d3\u05d5\u05ea \u05d4\u05e7\u05dc\u05d8:<\/p>\n\n\n
\n{ errors.email ? (<Text style={styles.errorText}>{errors.email}<\/Text>) : null }\n<\/pre><\/div>\n\n\nAdd New<\/h2>\n\n\n\n
\u05d1\u05db\u05e0\u05d9\u05e1\u05d4 \u05d4\u05e8\u05d0\u05e9\u05d5\u05e0\u05d4 \u05e9\u05dc \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d4\u05d5\u05d0 \u05d9\u05e8\u05d0\u05d4 \u05d0\u05ea \u05de\u05e1\u05da \u05d4\u05d1\u05d9\u05ea \u05e2\u05dd \u05d4\u05d5\u05d3\u05e2\u05d4 \u05e9\u05db\u05e8\u05d2\u05e2 \u05d0\u05d9\u05df \u05dc\u05d5 \u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05e8\u05e9\u05d5\u05de\u05d5\u05ea.<\/p>\n\n\n\n
\u05d1\u05e8\u05de\u05d4 \u05d4\u05e8\u05d0\u05e9\u05d9\u05ea \u05e9\u05dc \u05d4\u05e7\u05d1\u05e6\u05d9\u05dd \u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea components \u05dc\u05d0\u05d7\u05e1\u05d5\u05df \u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea \u05db\u05dc\u05dc\u05d9\u05d5\u05ea \u05e9\u05e0\u05d9\u05e6\u05d5\u05e8.<\/p>\n\n\n\n
\u05d4\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05d4\u05e8\u05d0\u05e9\u05d5\u05e0\u05d4 \u05ea\u05d4\u05d9\u05d4 Header. \u05d9\u05e9 \u05dc\u05e0\u05d5 \u05d1\u05db\u05d5\u05ea\u05e8\u05ea \u05e9\u05dc\u05d5\u05dd: \u05e9\u05dd \u05de\u05e9\u05ea\u05de\u05e9, \u05d0\u05d9\u05de\u05d5\u05d2\u05d9 \u05d5\u05db\u05e4\u05ea\u05d5\u05e8 \u05dc\u05d4\u05d2\u05d3\u05e8\u05d5\u05ea.<\/p>\n\n\n\n
\u05e7\u05d5\u05d1\u05e5 Header.jsx<\/p>\n\n\n
\nimport FontAwesome from '@expo\/vector-icons\/FontAwesome';\nimport { View, StyleSheet, Text } from 'react-native'\nimport React, { useEffect, useState } from 'react'\nimport { getLocalStorage } from '..\/services\/Storage'\n\nexport default function Header() {\n const [user, setUser] = useState();\n\n useEffect(() => {\n getUserDetails();\n }, []);\n\n const getUserDetails = async () => {\n const userDetails = await getLocalStorage('userDetails'); \n setUser(userDetails); \n }\n\n return (\n <View style={styles.mainContainer}>\n <View style={styles.textContainer}>\n <Text style={styles.userName}>Hello {user?.displayName}<\/Text>\n <FontAwesome name="smile-o" size={24} color="black" \/>\n <\/View>\n <FontAwesome name="gear" size={24} color="#aaa" \/>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n mainContainer: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '100%'\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n\n userName: {\n fontSize: 20,\n fontWeight: 'bold',\n marginRight: 10\n }\n})\n<\/pre><\/div>\n\n\n\u05d0\u05d7\u05e8\u05d9 \u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05e0\u05e8\u05e6\u05d4 \u05dc\u05d4\u05e6\u05d9\u05d2 \u05d0\u05ea \u05ea\u05d5\u05db\u05df \u05d4\u05e2\u05de\u05d5\u05d3. \u05d4\u05de\u05e6\u05d1 \u05d4\u05e8\u05d0\u05e9\u05d5\u05df \u05d9\u05d4\u05d9\u05d4 \u05dc\u05dc\u05d0 \u05de\u05d9\u05d3\u05e2 \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05e2\u05d5\u05d3 \u05dc\u05d0 \u05d4\u05d5\u05db\u05e0\u05e1\u05d5 \u05ea\u05e8\u05d5\u05e4\u05d5\u05ea. \u05e0\u05d9\u05e6\u05d5\u05e8 \u05d1\u05ea\u05d9\u05e7\u05d9\u05d9\u05ea components \u05d0\u05ea EmptyState.jsx. \u05d1\u05dc\u05d7\u05d9\u05e6\u05d4 \u05e2\u05dc \u05db\u05e4\u05ea\u05d5\u05e8 \u05d4\u05d5\u05e1\u05e4\u05d4 \u05e0\u05e8\u05e6\u05d4 \u05dc\u05e2\u05d1\u05d5\u05e8 \u05dc\u05de\u05e1\u05da \u05d4\u05d5\u05e1\u05e4\u05ea \u05ea\u05e8\u05d5\u05e4\u05d4 \u05d7\u05d3\u05e9\u05d4.<\/p>\n\n\n
\nimport FontAwesome6 from '@expo\/vector-icons\/FontAwesome6';\nimport { StyleSheet, Text, View, TouchableOpacity } from 'react-native'\nimport Colors from '..\/constants\/Colors'\nimport React from 'react'\n\nexport default function EmptyState() {\n return (\n <View style={styles.mainContainer}>\n <FontAwesome6 name="prescription-bottle-medical" style={styles.mainIcon} \/>\n\n <Text style={styles.mainText}>No Medications!<\/Text>\n <Text style={styles.subText}>Please add a new one.<\/Text>\n\n <TouchableOpacity style={styles.buttonContainer}\n \/\/ onPress={() => router.push('add')}\n >\n <Text style={styles.button}>Add New<\/Text>\n <FontAwesome6 name="add" style={styles.buttonIcon} \/>\n <\/TouchableOpacity>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n mainContainer: {\n display: 'flex',\n alignItems: 'center',\n marginTop: 100\n },\n\n mainIcon:{\n fontSize: 100,\n marginTop: 10,\n color: Colors.PRIMARY\n },\n\n mainText: {\n fontSize: 25,\n fontWeight: 'bold',\n marginTop: 20\n },\n\n subText: {\n color: Colors.DARK_GRAY,\n fontSize: 15,\n marginTop: 6,\n marginBottom: 20\n },\n\n buttonContainer: {\n display: 'flex',\n flexDirection: 'row',\n padding: 10,\n paddingHorizontal: 20,\n backgroundColor: Colors.PRIMARY,\n borderRadius: 10,\n marginTop: 10,\n width: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 10\n },\n\n button: {\n fontSize: 18,\n color: '#fff'\n },\n\n buttonIcon: {\n fontSize: 14,\n color: '#fff'\n }\n})\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-09-091239.png\")
<\/figure>\n<\/div>\n\n\n\u05d6\u05d4 \u05d4\u05e7\u05d5\u05d3 \u05e9\u05dc \u05d4\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4:<\/p>\n\n\n
\nimport { View, Text, StyleSheet } from 'react-native'\nimport React from 'react'\nimport Header from '..\/..\/components\/Header'\nimport EmptyState from '..\/..\/components\/EmptyState'\n\nexport default function HomeScreen() {\n return (\n <View style={styles.pageContainer}>\n <Header \/>\n <EmptyState \/>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n pageContainer: {\n padding: 25,\n backgroundColor: '#fff',\n height: '100%'\n }\n})\n<\/pre><\/div>\n\n\n\u05db\u05d3\u05d9 \u05dc\u05d9\u05e6\u05d5\u05e8 \u05e7\u05d1\u05d5\u05e6\u05ea \u05e0\u05ea\u05d9\u05d1\u05d9\u05dd \u05d7\u05d3\u05e9\u05d4, \u05d1\u05ea\u05d5\u05da \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea app \u05e0\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d9\u05e7\u05d9\u05d9\u05ea addNewMed \u05d5\u05d1\u05ea\u05d5\u05db\u05d4 \u05e7\u05d5\u05d1\u05e5 index \u05e2\u05dd \u05e7\u05d5\u05d3 \u05d4\u05ea\u05d7\u05dc\u05ea\u05d9. \u05e0\u05d7\u05d1\u05e8 \u05d0\u05ea \u05d4\u05db\u05e4\u05ea\u05d5\u05e8 \u05e9\u05dc \u05d4\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05e9\u05de\u05e6\u05d9\u05d2\u05d4 \u05e1\u05dc \u05e8\u05d9\u05e7 \u05e2\u05dd \u05d4\u05e7\u05d5\u05d1\u05e5 \u05d4\u05d7\u05d3\u05e9 \u05e9\u05d9\u05e6\u05e8\u05e0\u05d5.<\/p>\n\n\n
\n...\nimport { useRouter } from 'expo-router';\n\nexport default function EmptyState() {\n const router = useRouter();\n ...\nreturn (\n <View style={styles.mainContainer}>\n ...\n <TouchableOpacity style={styles.buttonContainer}\n onPress={() => router.push('\/addNewMed')}\n >\n <Text style={styles.button}>Add New<\/Text>\n <FontAwesome6 name="add" style={styles.buttonIcon} \/>\n <\/TouchableOpacity>\n <\/View>\n )\n}\n<\/pre><\/div>\n\n\n\u05e0\u05e2\u05d1\u05d5\u05e8 \u05dc\u05e7\u05d5\u05d1\u05e5 addNewMed. \u05e0\u05ea\u05d7\u05d9\u05dc \u05d1\u05d4\u05d5\u05e1\u05e4\u05ea \u05e8\u05db\u05d9\u05d1\u05d9 \u05d4\u05d8\u05d5\u05e4\u05e1.<\/p>\n\n\n\n
\u05e9\u05d3\u05d4 \u05e7\u05dc\u05d8 \u05dc\u05e9\u05dd \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4.<\/p>\n\n\n
\n<View>\n <Text style={styles.label}>Medication Name:<\/Text>\n <View style={styles.inputGroup}>\n <FontAwesome6 style={styles.textIcon} name="briefcase-medical" size={24} color="black" \/>\n <TextInput style={styles.textInput}\n placeholder='Name'\n onChangeText={(value) => onHandleInputChange('name', value)}\n \/>\n <\/View>\n<\/View>\n<\/pre><\/div>\n\n\n\u05d1\u05e7\u05dc\u05d8 \u05e9\u05dc \u05d4\u05d8\u05d5\u05e4\u05e1 \u05e0\u05d8\u05e4\u05dc \u05d1\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea onHandleInputChange.<\/p>\n\n\n\n
\u05dc\u05d1\u05d7\u05d9\u05e8\u05ea \u05e2\u05e8\u05da \u05de\u05ea\u05d5\u05da \u05e8\u05e9\u05d9\u05de\u05ea \u05e1\u05d5\u05d2 \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4 \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-FlatList.<\/p>\n\n\n
\n<View>\n <Text style={styles.label}>Type:<\/Text>\n <FlatList \n data={MedicineOptions}\n horizontal\n showsHorizontalScrollIndicator={false}\n renderItem={({item, index}) => (\n <TouchableOpacity style={styles.inputTypeGroup}\n onPress={() => onHandleInputChange('type', item)}\n >\n <Text style={styles.typeText}>{item?.name}<\/Text>\n <\/TouchableOpacity>\n )}\n \/>\n<\/View>\n<\/pre><\/div>\n\n\n\u05e0\u05e9\u05e0\u05d4 \u05d0\u05ea \u05d4\u05e8\u05e7\u05e2 \u05e9\u05dc \u05e1\u05d5\u05d2 \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4 \u05d4\u05e0\u05d1\u05d7\u05e8 \u05d1\u05e6\u05d5\u05e8\u05d4 \u05d4\u05d6\u05d0\u05ea:<\/p>\n\n\n
\n<TouchableOpacity style={[styles.inputTypeGroup,\n { backgroundColor: item.name == formData?.type?.name ? Colors.PRIMARY : '#fff' }\n]}\n onPress={() => onHandleInputChange('type', item)}\n>\n <Text style={[styles.typeText,\n { color: item.name == formData?.type?.name ? '#fff' : '#000' }\n ]}>{item?.name}<\/Text>\n<\/TouchableOpacity>\n<\/pre><\/div>\n\n\n\u05de\u05d9\u05e0\u05d5\u05df \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4 \u05d4\u05d5\u05d0 \u05e9\u05d3\u05d4 \u05d8\u05e7\u05e1\u05d8.<\/p>\n\n\n
\n<View>\n <Text style={styles.label}>Dose:<\/Text>\n <View style={styles.inputGroup}>\n <FontAwesome6 style={styles.textIcon} name="eye-dropper" size={24} color="black" \/>\n <TextInput style={styles.textInput}\n placeholder='Dose Ex. 2, 5ml...'\n onChangeText={(value) => onHandleInputChange('dose', value)}\n \/>\n <\/View>\n<\/View>\n<\/pre><\/div>\n\n\n\u05d4\u05e4\u05e7\u05d3 \u05d4\u05d1\u05d0 \u05d4\u05d5\u05d0 \u05e8\u05e9\u05d9\u05de\u05ea \u05d1\u05d7\u05d9\u05e8\u05d4 \u05e9\u05dc \u05d6\u05de\u05df \u05dc\u05e7\u05d9\u05d7\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4. \u05e2\u05d1\u05d5\u05e8 \u05d6\u05d4 \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-react-native-picker<\/a> \u05d5\u05e0\u05ea\u05e7\u05d9\u05df \u05d0\u05d5\u05ea\u05d5.<\/p>\n\n\n\nnpx expo install @react-native-picker\/picker\n<\/pre><\/div>\n\n\n\u05e8\u05e9\u05d9\u05de\u05ea \u05d6\u05de\u05e0\u05d9 \u05dc\u05e7\u05d9\u05d7\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4.<\/p>\n\n\n
\n<View>\n <Text style={styles.label}>When to Take:<\/Text>\n <View style={styles.inputGroup}>\n <FontAwesome6 style={styles.textIcon} name="clock" size={24} color="black" \/>\n <Picker style={styles.picker}\n selectedValue={formData?.when}\n onValueChange={(itemValue, itenIndex) => onHandleInputChange('when', itemValue)}\n >\n {WhenToTake.map((item, index) => (\n <Picker.Item key={index} label={item} value={item} style={styles.pickerText}\/>\n ))}\n <\/Picker>\n <\/View>\n<\/View>\n<\/pre><\/div>\n\n\n\u05d4\u05e4\u05e7\u05d3 \u05d4\u05d1\u05d0 \u05e6\u05e8\u05d9\u05da \u05dc\u05d4\u05e6\u05d9\u05d2 \u05d0\u05ea \u05ea\u05d0\u05e8\u05d9\u05db\u05d9 \u05dc\u05e7\u05d9\u05d7\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4. \u05dc\u05e6\u05d5\u05e8\u05da \u05d6\u05d4 \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-DateTimePicker<\/a>.<\/p>\n\n\n\n\u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05d4\u05de\u05d9\u05e8 \u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd \u05dc\u05e4\u05d5\u05e8\u05de\u05d8\u05d9\u05dd \u05e9\u05d5\u05e0\u05d9\u05dd \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1\u05e1\u05e4\u05e8\u05d9\u05d9\u05ea moment.<\/p>\n\n\n
\nnpm install moment --save\n<\/pre><\/div>\n\n\n\u05e8\u05db\u05d9\u05d1 \u05dc\u05d5\u05d7 \u05e9\u05e0\u05d4.<\/p>\n\n\n
\n<Text style={styles.label}>Dates:<\/Text>\n<View style={styles.datesContainer}>\n <View style={{flex: 1}}>\n <TouchableOpacity style={styles.inputGroup}\n onPress={() => setShowStartDate(true)}\n >\n <FontAwesome6 style={styles.textIcon} name="calendar-alt" size={24} color="black" \/>\n <Text style={styles.dateInput}>{FormatDateForText(formData?.startDate) ?? 'Start Date'}<\/Text>\n <\/TouchableOpacity>\n {showStartDate && <RNDateTimePicker design="material" \n minimumDate={new Date()}\n value={ew Date(formData?.startDate) ?? new Date()}\n onChange={(event) => {\n onHandleInputChange('startDate', FormatDate(event.nativeEvent.timestamp));\n setShowStartDate(false);\n }}\n \/>\n }\n <\/View>\n\n <View style={{flex: 1}}>\n <TouchableOpacity style={styles.inputGroup}\n onPress={() => setShowEndDate(true)}\n >\n <FontAwesome6 style={styles.textIcon} name="calendar-alt" size={24} color="black" \/>\n <Text style={styles.dateInput}>{FormatDateForText(formData?.endDate) ?? 'End Date'}<\/Text>\n <\/TouchableOpacity>\n\n {showEndDate && <RNDateTimePicker design="material" \n minimumDate={new Date()}\n value={ew Date((formData?.endDate) ?? new Date()}\n onChange={(event) => {\n onHandleInputChange('endDate', FormatDate(event.nativeEvent.timestamp));\n setShowEndDate(false);\n }}\n \/>\n }\n <\/View>\n<\/View>\n<\/pre><\/div>\n\n\n\u05e0\u05db\u05ea\u05d5\u05d1 \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05e2\u05d6\u05e8 \u05dc\u05d4\u05e6\u05d2\u05ea \u05d4\u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd, \u05d1\u05e7\u05d5\u05d1\u05e5 ConvertDateTime \u05e9\u05e0\u05de\u05e6\u05d0 \u05d1\u05ea\u05d9\u05e7\u05d9\u05d9\u05ea Services.<\/p>\n\n\n
\nimport moment from "moment";\n\nexport const FormatDate = (timestamp) => {\n return new Date(timestamp);\n}\n\nexport const FormatDateForText = (date) => {\n return moment(date).format('ll');\n}\n<\/pre><\/div>\n\n\n\u05d4\u05d3\u05d1\u05e8 \u05d4\u05d1\u05d0 \u05dc\u05d4\u05d5\u05e1\u05d9\u05e3 \u05d4\u05d5\u05d0 \u05d0\u05e4\u05e9\u05e8\u05d5\u05ea \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d6\u05de\u05df \u05dc\u05ea\u05d6\u05db\u05d5\u05e8\u05d5\u05ea.<\/p>\n\n\n
\nconst [showTimePicker, setShowTimePicker] = useState(false);\n...\n<View>\n <Text style={styles.label}>Add a reminder:<\/Text>\n <View>\n <TouchableOpacity style={styles.inputGroup}\n onPress={() => setShowTimePicker(true)}\n >\n <FontAwesome6 style={styles.textIcon} name="user-clock" size={24} color="black" \/>\n <Text style={styles.dateInput}>{formData?.reminder ?? 'Select Time'}<\/Text>\n <\/TouchableOpacity>\n <\/View>\n\n {showTimePicker && <RNDateTimePicker design="material" \n mode='time'\n value={new Date(formData?.reminder) ?? new Date()}\n onChange={(event) => {\n onHandleInputChange('reminder', formatTime(event.nativeEvent.timestamp));\n setShowTimePicker(false);\n }}\n \/>\n }\n<\/View>\n<\/pre><\/div>\n\n\n\u05d5\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05e0\u05d5\u05e1\u05e4\u05ea \u05d1\u05e7\u05d5\u05d1\u05e5 ConvertDateTime \u05dc\u05d4\u05e6\u05d2\u05ea \u05d4\u05d6\u05de\u05df:<\/p>\n\n\n
\nexport const formatTime = (timestamp) => {\n return new Date(timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});\n}\n<\/pre><\/div>\n\n\n\u05d4\u05d3\u05d1\u05e8 \u05d4\u05d0\u05d7\u05e8\u05d5\u05df \u05e9\u05e0\u05e9\u05d0\u05e8 \u05dc\u05d4\u05d5\u05e1\u05d9\u05e3 \u05d6\u05d4 \u05db\u05e4\u05ea\u05d5\u05e8 \u05dc\u05e9\u05de\u05d9\u05e8\u05d4.<\/p>\n\n\n
\n<TouchableOpacity style={[globalStyles.buttonContainer, {marginTop: 20}]}>\n <Text style={globalStyles.button}>Add New Medication<\/Text>\n <FontAwesome6 name="add" style={globalStyles.buttonIcon} \/>\n<\/TouchableOpacity>\n<\/pre><\/div>\n\n\n\u05db\u05db\u05d4 \u05e0\u05e8\u05d0\u05d4 \u05d4\u05de\u05e1\u05da:<\/p>\n\n\n
\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-15-200624.png\")
<\/figure>\n<\/div>\n\n\n\u05d1\u05e9\u05d1\u05d9\u05dc \u05dc\u05e9\u05de\u05d5\u05e8 \u05d0\u05ea \u05d4\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-firebase. \u05d4\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05d5 \u05d4\u05d5\u05d0 \u05d7\u05d9\u05e0\u05dd \u05d1\u05db\u05de\u05d5\u05d9\u05d5\u05ea \u05e7\u05d8\u05e0\u05d5\u05ea.<\/p>\n\n\n\n
\u05e0\u05db\u05e0\u05e1 \u05dc-firebase \u05d5\u05e0\u05d5\u05e1\u05d9\u05e3 \u05d0\u05ea \u05d4\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-Database.<\/p>\n\n\n
\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-15-200909.png\")
<\/figure>\n<\/div>\n\n\n\u05e6\u05e8\u05d9\u05da \u05dc\u05e4\u05ea\u05d5\u05d7 DB \u05d7\u05d3\u05e9<\/a> \u05d5\u05dc\u05d4\u05d2\u05d3\u05d9\u05e8 \u05d0\u05ea \u05d4-DB \u05d1\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4. \u05d1\u05d0\u05ea\u05e8 firebase \u05e0\u05d1\u05d7\u05e8 \u05dc\u05d9\u05e6\u05d5\u05e8 DB \u05d7\u05d3\u05e9. \u05d0\u05ea \u05d4\u05d4\u05d2\u05d3\u05e8\u05d4 \u05e0\u05e2\u05e9\u05d4 \u05d1\u05e7\u05d5\u05d1\u05e5 firebaseConfig.<\/p>\n\n\n\n...\nimport { getFirestore } from "firebase\/firestore"\n...\n\nexport const db = getFirestore(app);\n<\/pre><\/div>\n\n\n\u05d1\u05ea\u05d5\u05da \u05e7\u05d5\u05d1\u05e5 AddMedForm \u05e9\u05d1\u05d5 \u05d4\u05db\u05e0\u05e1\u05e0\u05d5 \u05d0\u05ea \u05d4\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05e0\u05d5\u05e1\u05d9\u05e3:<\/p>\n\n\n
\n...\nimport { doc, setDoc } from 'firebase\/firestore';\nimport { db } from '..\/config\/FirebaseConfig';\nimport { getLocalStorage } from '..\/services\/Storage';\n\nexport default function AddMedForm (){\n const globalStyles = require('..\/styles\/global');\n\n ...\n const saveMedication = async() => {\n const docId = Date.now().toString();\n const user = await getLocalStorage('userDetails');\n console.log('saving');\n \n if(!(formData?.name || formData?.type || formData?.dose || \n formData?.startDate || formData?.endDate || formData?.reminder)){\n Alert.alert('Enter all fields');\n return;\n }\n \n try {\n await setDoc(doc(db, 'medication', docId), {\n ...formData,\n userEmail: user.email,\n docId: docId\n });\n } catch (error) {\n console.log(error);\n }\n }\n\n return (\n ...\n <TouchableOpacity style={[globalStyles.buttonContainer, {marginTop: 20}]}\n onPress={saveMedication}\n >\n <Text style={globalStyles.button}>Add New Medication<\/Text>\n <FontAwesome6 name="add" style={globalStyles.buttonIcon} \/>\n <\/TouchableOpacity>\n ...\n<\/pre><\/div>\n\n\n\u05d4\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05d9\u05e9\u05de\u05e8\u05d5 \u05d1\u05d0\u05d5\u05e1\u05e3 medication. \u05d0\u05dd \u05d4\u05d5\u05d0 \u05dc\u05d0 \u05e7\u05d9\u05d9\u05dd, firebase \u05d9\u05e6\u05d5\u05e8 \u05d0\u05d7\u05d3.<\/p>\n\n\n\n
\u05db\u05db\u05d4 \u05d6\u05d4 \u05e0\u05e8\u05d0\u05d4 \u05d0\u05d7\u05e8\u05d9 \u05d4\u05e9\u05de\u05d9\u05e8\u05d4:<\/p>\n\n\n
\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-15-220138-1024x428.png\")
<\/figure>\n<\/div>\n\n\n\u05d3\u05d1\u05e8\u05d9\u05dd \u05e0\u05d5\u05e1\u05e4\u05d9\u05dd \u05dc\u05e9\u05e4\u05e8 \u05d0\u05ea \u05d7\u05d5\u05d5\u05d9\u05ea \u05d4\u05de\u05e9\u05ea\u05de\u05e9: \u05d4\u05d5\u05e1\u05e4\u05ea \u05de\u05e9\u05ea\u05e0\u05d4 isLoading \u05d5\u05d4\u05e6\u05d2\u05ea \u05d8\u05e2\u05d9\u05e0\u05d4 \u05db\u05d0\u05e9\u05e8 \u05de\u05ea\u05d1\u05e6\u05e2\u05ea \u05d4\u05e9\u05de\u05d9\u05e8\u05d4. \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-router \u05dc\u05d4\u05d7\u05d6\u05d9\u05e8 \u05dc\u05e2\u05de\u05d5\u05d3 \u05d4\u05e8\u05d0\u05e9\u05d9 \u05d0\u05d7\u05e8\u05d9 \u05d4\u05d5\u05e1\u05e4\u05ea \u05ea\u05e8\u05d5\u05e4\u05d4.<\/p>\n\n\n\n
\u05e2\u05d5\u05d3 \u05d3\u05d1\u05e8 \u05e9\u05d0\u05e0\u05d7\u05e0\u05d5 \u05e8\u05d5\u05e6\u05d9\u05dd \u05dc\u05e2\u05e9\u05d5\u05ea \u05d6\u05d4 \u05dc\u05e9\u05de\u05d5\u05e8 \u05de\u05e2\u05e8\u05da \u05e2\u05dd \u05db\u05dc \u05d4\u05d9\u05de\u05d9\u05dd \u05d1\u05d9\u05df \u05d4\u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd \u05e9\u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d1\u05d7\u05e8, \u05d6\u05d4 \u05d9\u05e2\u05d6\u05d5\u05e8 \u05dc\u05de\u05d9\u05d9\u05df \u05d0\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05d1\u05de\u05e1\u05da \u05d4\u05db\u05e0\u05d9\u05e1\u05d4 \u05e2\u05dc \u05e4\u05d9 \u05d4\u05d6\u05de\u05df \u05e9\u05e6\u05e8\u05d9\u05da \u05dc\u05e7\u05d7\u05ea \u05d0\u05d5\u05ea\u05df. \u05d1\u05e7\u05d5\u05d1\u05e5 ConvertDateTime \u05e0\u05d2\u05d3\u05d9\u05e8 \u05d0\u05ea \u05d4\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05e9\u05d9\u05d5\u05e6\u05e8\u05ea \u05d0\u05ea \u05d4\u05de\u05e2\u05e8\u05da, \u05d5\u05e0\u05e7\u05e8\u05d0 \u05dc\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05d1\u05ea\u05d5\u05da \u05ea\u05d4\u05dc\u05d9\u05da \u05d4\u05e9\u05de\u05d9\u05e8\u05d4.<\/p>\n\n\n
\nexport const getDateRange = (startDate, endDate) => {\n const start = moment(new Date(startDate), 'MM\/DD\/YYYY');\n const end = moment(new Date(endDate), 'MM\/DD\/YYYY');\n const dates = [];\n\n while(start.isSameOrBefore(end)){\n dates.push(start.format('MM\/DD\/YYYY'));\n start.add(1, 'days');\n }\n return dates;\n}\n<\/pre><\/div>\n\n\n\u05d6\u05d4 \u05d4\u05e7\u05d5\u05d3 \u05d4\u05e9\u05dc\u05dd \u05e9\u05dc \u05d4\u05e7\u05d5\u05d1\u05e5.<\/p>\n\n\n
\nimport { View, Text, TouchableOpacity, StyleSheet, TextInput, \n ToastAndroid, Platform, FlatList, Alert, \n ActivityIndicator} from 'react-native'\nimport FontAwesome6 from '@expo\/vector-icons\/FontAwesome6';\nimport React, { useState } from 'react';\nimport Colors from '..\/constants\/Colors';\nimport { MedicineOptions, WhenToTake } from '..\/constants\/MedicineOptions';\nimport { Picker } from '@react-native-picker\/picker';\nimport RNDateTimePicker from '@react-native-community\/datetimepicker';\nimport { FormatDate, FormatDateForText, formatTime, getDateRange } from '..\/services\/ConvertDateTime';\nimport { doc, setDoc } from 'firebase\/firestore';\nimport { db } from '..\/config\/FirebaseConfig';\nimport { getLocalStorage } from '..\/services\/Storage';\nimport { useRouter } from 'expo-router'\n\nexport default function AddMedForm (){\n const globalStyles = require('..\/styles\/global');\n const router = useRouter();\n\n const [formData, setFormData] = useState();\n const [showStartDate, setShowStartDate] = useState(false);\n const [showEndDate, setShowEndDate] = useState(false);\n const [showTimePicker, setShowTimePicker] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const onHandleInputChange = (field, value) => {\n setFormData(prev => ({\n ...prev,\n [field]: value\n }))\n }\n\n const saveMedication = async() => {\n const docId = Date.now().toString();\n const user = await getLocalStorage('userDetails');\n console.log('saving');\n \n if(!formData?.name || !formData?.type || !formData?.dose || \n !formData?.startDate || !formData?.endDate || !formData?.reminder){\n if(Platform.OS === 'android')\n ToastAndroid.show('Enter all fields.', ToastAndroid.LONG, ToastAndroid.TOP);\n else\n Alert.alert('Enter all fields');\n return;\n }\n \n const dates = getDateRange(formData?.startDate, formData?.endDate);\n setIsLoading(true);\n try {\n await setDoc(doc(db, 'medication', docId), {\n ...formData,\n userEmail: user.email,\n docId: docId,\n dates: dates\n });\n setIsLoading(false);\n if(Platform.android)\n ToastAndroid.show('Medicatin Saved!', ToastAndroid.SHORT);\n if(Platform.iso) \n Alert.alert('Medicatin Saved!');\n router.push('(tabs)');\n } catch (error) {\n console.log(error);\n setIsLoading(false);\n }\n }\n\n return (\n <View>\n <Text style={styles.headline}>Add a New Medication<\/Text>\n\n <View>\n <View>\n <Text style={styles.label}>Medication Name:<\/Text>\n <View style={styles.inputGroup}>\n <FontAwesome6 style={styles.textIcon} name="briefcase-medical" size={24} color="black" \/>\n <TextInput style={styles.textInput}\n placeholder='Name'\n onChangeText={(value) => onHandleInputChange('name', value)}\n \/>\n <\/View>\n <\/View>\n\n <View>\n <Text style={styles.label}>Type:<\/Text>\n <FlatList \n data={MedicineOptions}\n horizontal\n showsHorizontalScrollIndicator={false}\n renderItem={({item, index}) => (\n <TouchableOpacity style={[styles.inputTypeGroup,\n { backgroundColor: item.name == formData?.type?.name ? Colors.PRIMARY : '#fff' }\n ]}\n onPress={() => onHandleInputChange('type', item)}\n >\n <Text style={[styles.typeText,\n { color: item.name == formData?.type?.name ? '#fff' : '#000' }\n ]}>{item?.name}<\/Text>\n <\/TouchableOpacity>\n )}\n \/>\n <\/View>\n\n <View>\n <Text style={styles.label}>Dose:<\/Text>\n <View style={styles.inputGroup}>\n <FontAwesome6 style={styles.textIcon} name="eye-dropper" size={24} color="black" \/>\n <TextInput style={styles.textInput}\n placeholder='Dose Ex. 2, 5ml...'\n onChangeText={(value) => onHandleInputChange('dose', value)}\n \/>\n <\/View>\n <\/View>\n\n <View>\n <Text style={styles.label}>When to Take:<\/Text>\n <View style={styles.inputGroup}>\n <FontAwesome6 style={styles.textIcon} name="clock" size={24} color="black" \/>\n <Picker style={styles.picker}\n selectedValue={formData?.when}\n onValueChange={(itemValue, itenIndex) => onHandleInputChange('when', itemValue)}\n >\n {WhenToTake.map((item, index) => (\n <Picker.Item key={index} label={item} value={item} style={styles.pickerText}\/>\n ))}\n <\/Picker>\n <\/View>\n <\/View>\n \n <Text style={styles.label}>Dates:<\/Text>\n <View style={styles.datesContainer}>\n <View style={{flex: 1}}>\n <TouchableOpacity style={styles.inputGroup}\n onPress={() => setShowStartDate(true)}\n >\n <FontAwesome6 style={styles.textIcon} name="calendar-alt" size={24} color="black" \/>\n <Text style={styles.dateInput}>{FormatDateForText(formData?.startDate) ?? 'Start Date'}<\/Text>\n <\/TouchableOpacity>\n {showStartDate && <RNDateTimePicker design="material" \n minimumDate={new Date()}\n value={new Date(formData?.startDate) ?? new Date()}\n onChange={(event) => {\n onHandleInputChange('startDate', FormatDate(event.nativeEvent.timestamp));\n setShowStartDate(false);\n }}\n \/>\n }\n <\/View>\n\n <View style={{flex: 1}}>\n <TouchableOpacity style={styles.inputGroup}\n onPress={() => setShowEndDate(true)}\n >\n <FontAwesome6 style={styles.textIcon} name="calendar-alt" size={24} color="black" \/>\n <Text style={styles.dateInput}>{FormatDateForText(formData?.endDate) ?? 'End Date'}<\/Text>\n <\/TouchableOpacity>\n\n {showEndDate && <RNDateTimePicker design="material" \n minimumDate={new Date()}\n value={new Date(formData?.endDate) ?? new Date()}\n onChange={(event) => {\n onHandleInputChange('endDate', FormatDate(event.nativeEvent.timestamp));\n setShowEndDate(false);\n }}\n \/>\n }\n <\/View>\n <\/View>\n\n <View>\n <Text style={styles.label}>Add a reminder:<\/Text>\n <View>\n <TouchableOpacity style={styles.inputGroup}\n onPress={() => setShowTimePicker(true)}\n >\n <FontAwesome6 style={styles.textIcon} name="user-clock" size={24} color="black" \/>\n <Text style={styles.dateInput}>{formData?.reminder ?? 'Select Time'}<\/Text>\n <\/TouchableOpacity>\n <\/View>\n\n {showTimePicker && <RNDateTimePicker design="material" \n mode='time'\n value={new Date(formData?.reminder) ?? new Date()}\n onChange={(event) => {\n onHandleInputChange('reminder', formatTime(event.nativeEvent.timestamp));\n setShowTimePicker(false);\n }}\n \/>\n }\n <\/View>\n\n <TouchableOpacity style={[globalStyles.buttonContainer, {marginTop: 20}]}\n onPress={saveMedication}\n >\n {isLoading ? <ActivityIndicator size={'large'} color={'#fff'}\/> : \n <View style={globalStyles.buttonContainer}>\n <Text style={globalStyles.button}>Add New Medication<\/Text>\n <FontAwesome6 name="add" style={globalStyles.buttonIcon} \/>\n <\/View>}\n <\/TouchableOpacity>\n <\/View>\n <\/View>\n \n );\n};\n\nconst styles = StyleSheet.create({\n formContainer: {\n display: 'flex',\n marginTop: 30,\n },\n\n headline: {\n paddingTop: 20,\n fontSize: 20,\n fontWeight: 'bold',\n marginBottom: 10\n },\n\n label: {\n fontSize: 14,\n color: '#888',\n marginBottom: 5,\n marginTop: 10\n },\n\n inputGroup:{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n padding: 12,\n borderRadius: 8,\n borderWidth: 1,\n borderColor: '#e5e7eb'\n },\n\n textInput: {\n flex: 1,\n marginLeft: 10,\n fontSize: 16,\n color: '#555'\n },\n\n textIcon: {\n color: Colors.PRIMARY,\n borderRightWidth: 2,\n paddingRight: 15,\n borderColor: "#bbb"\n },\n\n typeText:{\n fontSize: 16\n },\n\n inputTypeGroup: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 8,\n borderWidth: 1,\n borderColor: '#e5e7eb',\n marginRight: 10\n },\n\n picker: {\n width: '90%',\n marginLeft: 10,\n border: 'none'\n },\n\n pickerText:{\n fontSize: 16\n },\n\n datesContainer: {\n display: 'flex',\n flexDirection: 'row',\n gap: 10\n },\n\n dateInput: {\n flex: 1,\n marginLeft: 10,\n fontSize: 16,\n color: '#555'\n }\n})\n<\/pre><\/div>\n\n\nDisplay Medication List<\/h2>\n\n\n\n
\u05d1\u05de\u05e1\u05da \u05d4\u05e8\u05d0\u05e9\u05d9 \u05e0\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d9\u05de\u05d5\u05ea \u05d4\u05e9\u05d1\u05d5\u05e2 \u05db\u05d3\u05d9 \u05e9\u05d0\u05e4\u05e9\u05e8 \u05d9\u05d4\u05d9\u05d4 \u05dc\u05e8\u05d0\u05d5\u05ea \u05d0\u05d9\u05d6\u05d4 \u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05d9\u05e9 \u05d1\u05db\u05dc \u05d9\u05d5\u05dd \u05d5\u05dc\u05d0\u05d7\u05e8 \u05de\u05db\u05df \u05d0\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05e9\u05dc \u05d0\u05d5\u05ea\u05d5 \u05d4\u05d9\u05d5\u05dd. \u05d0\u05ea \u05d4\u05de\u05d9\u05d3\u05e2 \u05e0\u05d1\u05e0\u05d4 \u05d1\u05ea\u05d5\u05da \u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05d7\u05d3\u05e9\u05d4: MedicationList.jsx.<\/p>\n\n\n\n
\u05e9\u05de\u05ea\u05d9 \u05ea\u05de\u05d5\u05e0\u05d4 \u05d1\u05e8\u05d0\u05e9 \u05d4\u05e2\u05de\u05d5\u05d3 \u05d5\u05e2\u05db\u05e9\u05d9\u05d5 \u05d0\u05e0\u05d9 \u05e8\u05d5\u05e6\u05d4 \u05dc\u05d4\u05e6\u05d9\u05d2 \u05d0\u05ea \u05e8\u05e9\u05d9\u05de\u05ea \u05d4\u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd. \u05db\u05d3\u05d9 \u05dc\u05e2\u05d1\u05d3 \u05d0\u05ea \u05d4\u05e8\u05e9\u05d9\u05de\u05d4 \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea \u05e2\u05d6\u05e8 \u05e9\u05e0\u05db\u05ea\u05d5\u05d1 \u05d1\u05e7\u05d5\u05d1\u05e5 ConvertDateTime.<\/p>\n\n\n
\nexport const getDateRangeToDisplay = () => {\n const dateList = [];\n\n for(let i = 0; i <= 7; i++){\n dateList.push({\n date: moment().add(i, 'days').format('DD'), \/\/ 25\n day: moment().add(i, 'days').format('dd'), \/\/ Tue\n formatedDate: moment().add(i, 'days').format('L') \/\/ 12\/2\/24\n });\n }\n\n return dateList;\n}\n<\/pre><\/div>\n\n\n\u05e0\u05e7\u05e8\u05d0 \u05dc\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05d1\u05db\u05e0\u05d9\u05e1\u05d4 \u05dc\u05d3\u05e3.<\/p>\n\n\n
\nconst [dateRange, setDateRange] = useState();\n\nuseEffect(() => {\n setDateRange(getDateRangeToDisplay());\n}, [])\n<\/pre><\/div>\n\n\n\u05e2\u05db\u05e9\u05d9\u05d5 \u05e0\u05d9\u05e6\u05d5\u05e8 \u05d0\u05ea \u05d4\u05e8\u05e9\u05d9\u05de\u05d4, \u05d0\u05ea \u05d4\u05e2\u05d9\u05e6\u05d5\u05d1 \u05e9\u05dc\u05d4 \u05d5\u05d0\u05ea \u05e4\u05e2\u05d5\u05dc\u05ea \u05d4\u05d1\u05d7\u05d9\u05e8\u05d4 \u05d1\u05ea\u05d0\u05e8\u05d9\u05da \u05db\u05da \u05e9\u05d9\u05e8\u05d0\u05d5 \u05d1\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05ea \u05d4\u05ea\u05d0\u05e8\u05d9\u05da \u05d4\u05e0\u05d1\u05d7\u05e8.<\/p>\n\n\n
\nexport default function MedicationList() {\n const [medList, setMedList] = useState();\n const [dateRange, setDateRange] = useState();\n const [selectedDate, setSelectedDate] = useState(moment().format('MM\/DD\/YYYY'));\n\n useEffect(() => {\n setDateRange(getDateRangeToDisplay());\n }, [])\n\n return (\n <View style={styles.mainContainer}>\n <Image source={require('.\/..\/assets\/images\/full.webp')} \n style={styles.image}\n \/>\n\n <FlatList data={dateRange}\n horizontal\n showsHorizontalScrollIndicator={false}\n style={styles.dateList}\n renderItem={({item, index}) => (\n <TouchableOpacity style={[styles.dateGroup, \n {backgroundColor: item?.formattedDate == selectedDate ? Colors.PRIMARY : "#eee"}]}\n onPress={() => setSelectedDate(item.formattedDate)}\n >\n <Text style={[styles.day,\n {color: item?.formattedDate == selectedDate ? '#fff' : "#000"}\n ]}>{item.day}<\/Text>\n <Text style={[styles.date,\n {color: item?.formattedDate == selectedDate ? '#fff' : "#000"}\n ]}>{item.date}<\/Text>\n <\/TouchableOpacity>\n )}\n \/>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n mainContainer: {\n display: 'flex',\n \/\/ alignItems: 'center',\n marginTop: 50\n },\n\n imageContainer: {\n display: 'flex',\n alignItems: 'center',\n marginTop: 10\n },\n\n image: {\n width: '100%',\n height: 250,\n borderRadius: 20\n },\n\n dateList: {\n marginTop: 15\n },\n\n dateGroup: {\n padding: 10,\n backgroundColor: "#eee",\n display: 'flex',\n alignItems: 'center',\n marginRight: 10,\n borderRadius: 10\n },\n\n day: {\n fontSize: 14\n },\n\n date: {\n fontSize: 18,\n fontWeight: 'bold'\n }\n})\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-15-235101.png\")
<\/figure>\n<\/div>\n\n\n\u05e2\u05db\u05e9\u05d9\u05d5 \u05e6\u05e8\u05d9\u05da \u05dc\u05e9\u05dc\u05d5\u05e3 \u05d0\u05ea \u05d4\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd<\/a> \u05d4\u05de\u05ea\u05d0\u05d9\u05de\u05d9\u05dd \u05de\u05d4-DB \u05dc\u05db\u05dc \u05d9\u05d5\u05dd \u05e0\u05d1\u05d7\u05e8.<\/p>\n\n\n\n\u05e0\u05e9\u05dc\u05d5\u05e3 \u05e7\u05d5\u05d3\u05dd \u05d0\u05ea \u05db\u05dc \u05d4\u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05ea\u05d7\u05ea \u05de\u05d9\u05d9\u05dc \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d4\u05e7\u05d9\u05d9\u05dd.<\/p>\n\n\n
\n...\nimport { collection, query, where, getDocs } from "firebase\/firestore";\nimport { db } from '..\/config\/FirebaseConfig';\n\nexport default function MedicationList() {\n const [medList, setMedList] = useState();\n const [dateRange, setDateRange] = useState();\n const [selectedDate, setSelectedDate] = useState(moment().format('MM\/DD\/YYYY'));\n\n useEffect(() => {\n setDateRange(getDateRangeToDisplay());\n getMedicationList(selectedDate);\n }, [])\n\n const getMedicationList = async(selectedDate) => {\n const user = await getLocalStorage('userDetails');\n try {\n const q = query(collection(db, "medication"), where("userEmail", "==", user.email));\n const querySnapshot = await getDocs(q);\n querySnapshot.forEach((doc) => {\n \/\/ doc.data() is never undefined for query doc snapshots\n console.log(doc.id, " => ", doc.data());\n });\n } catch (error) {\n console.log(error);\n }\n }\n\n return (\n ...\n<\/pre><\/div>\n\n\n\u05e0\u05de\u05e7\u05d3 \u05d0\u05ea \u05d4\u05d1\u05d7\u05d9\u05e8\u05d4 \u05e8\u05e7 \u05dc\u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05e9\u05d4\u05ea\u05d0\u05e8\u05d9\u05da \u05d4\u05e0\u05d1\u05d7\u05e8 \u05e0\u05de\u05e6\u05d0 \u05d1\u05d4\u05df.<\/p>\n\n\n
\nconst getMedicationList = async(selectedDate) => {\n const user = await getLocalStorage('userDetails');\n try {\n const q = query(collection(db, "medication"), \n where("userEmail", "==", user.email),\n where("dates", "array-contains", selectedDate));\n\n const querySnapshot = await getDocs(q);\n setMedList([]);\n querySnapshot.forEach((doc) => {\n setMedList(prev => [...prev, doc.data()]);\n });\n } catch (error) {\n console.log(error);\n }\n}\n<\/pre><\/div>\n\n\n\u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05d4\u05e6\u05d9\u05d2 \u05db\u05dc \u05ea\u05e8\u05d5\u05e4\u05d4 \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05e9\u05e0\u05d9\u05e6\u05d5\u05e8 MedCardItem.jsx.<\/p>\n\n\n
\nimport { View, Text, StyleSheet } from 'react-native'\nimport FontAwesome6 from '@expo\/vector-icons\/FontAwesome6';\nimport React from 'react'\nimport Colors from '..\/constants\/Colors';\n\nexport default function MedCardItem({med}) {\n return (\n <View style={styles.mainContainer}>\n <View style={styles.leftContainer}>\n <View style={styles.iconContainer}>\n <FontAwesome6 name={med.type.icon} size={34} color={Colors.PRIMARY} \/>\n <\/View>\n <View style={styles.textContainer}>\n <View>\n <Text style={styles.nameText}>{med.name}<\/Text>\n <Text style={styles.whenText}>{med.when}<\/Text>\n <Text style={styles.doseText}>{med.dose} ({med.type.name})<\/Text>\n <\/View>\n <\/View>\n <\/View>\n <View style={styles.reminderContainer}>\n <FontAwesome6 style={styles.textIcon} name="user-clock" size={24} color="black" \/>\n <Text style={styles.reminderText}>{med.reminder}<\/Text>\n <\/View>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n mainContainer: {\n borderColor: "#bbb",\n borderWidth: 1,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n padding: 15,\n borderRadius: 10,\n justifyContent: 'space-between',\n width: '100%',\n marginBottom: 10\n },\n leftContainer: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n },\n iconContainer: {\n alignItems: 'center',\n alignContent: 'center',\n paddingRight: 20\n },\n textContainer: {\n display: 'flex',\n flexDirection: 'row',\n \n },\n reminderContainer: {\n alignItems: 'center'\n },\n\n nameText: {\n fontSize: 18,\n fontWeight: 'bold'\n },\n whenText: {\n fontSize: 16\n },\n reminderText: {\n fontSize: 16\n }\n})\n<\/pre><\/div>\n\n\n\u05d0\u05ea \u05db\u05e8\u05d8\u05d9\u05e1\u05d9 \u05d1\u05ea\u05e8\u05d5\u05e4\u05d4 \u05e0\u05e6\u05d9\u05d2 \u05d1\u05e2\u05de\u05d5\u05d3 \u05d4\u05e8\u05d0\u05e9\u05d9:<\/p>\n\n\n
\n<View style={{ flex: 1 }}>\n {isLoading ? (<ActivityIndicator style={{marginTop: 20}} size={'large'} color={Colors.PRIMARY} \/>) : medList?.length > 0 ? \n <FlatList data={medList} \n style={styles.listContainer}\n showsVerticalScrollIndicator={false}\n \/\/ onRefresh={() => getMedicationList(selectedDate)}\n refreshing={isLoading}\n renderItem={({item, index}) => (\n <TouchableOpacity>\n <MedCardItem med={item} \/>\n <\/TouchableOpacity>\n )}\n ListFooterComponent={<View style={{ height: 50 }} \/>}\n \/> : <EmptyState \/>\n }\n<\/View>\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/screen.png\")
<\/figure>\n<\/div>\n\n\nAction Status<\/h2>\n\n\n\n
\u05d4\u05e4\u05e2\u05d5\u05dc\u05d4 \u05d4\u05d1\u05d0\u05d4 \u05d4\u05d9\u05d0 \u05d4\u05e6\u05d2\u05ea \u05e0\u05ea\u05d5\u05e0\u05d9 \u05db\u05dc \u05ea\u05e8\u05d5\u05e4\u05d4 \u05d1\u05dc\u05d7\u05d9\u05e6\u05d4 \u05e2\u05dc\u05d9\u05d4 \u05d5\u05d0\u05e4\u05e9\u05e8\u05d5\u05ea \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d4\u05d0\u05dd \u05e0\u05dc\u05e7\u05d7\u05d4 \u05d0\u05d5 \u05dc\u05d0. \u05e0\u05e4\u05ea\u05d7 \u05ea\u05d9\u05e7\u05d9\u05d9\u05d4 \u05ea\u05d7\u05ea app \u05d1\u05e9\u05dd action-modal \u05d5\u05d1\u05ea\u05d5\u05db\u05d4 \u05e7\u05d5\u05d1\u05e5 index.jsx. \u05d0\u05ea \u05d4\u05de\u05e1\u05da \u05d4\u05d6\u05d4 \u05e0\u05d5\u05e1\u05d9\u05e3 \u05dc\u05de\u05e1\u05db\u05d9 \u05d4-stack. \u05d1\u05d0\u05e4\u05e9\u05e8\u05d5\u05d9\u05d5\u05ea \u05e0\u05db\u05ea\u05d5\u05d1 \u05e9\u05d6\u05d4 modal, \u05db\u05dc\u05d5\u05de\u05e8 \u05d7\u05dc\u05d5\u05df \u05e7\u05d5\u05e4\u05e5.<\/p>\n\n\n
\nexport default function RootLayout() {\n return (\n <Stack screenOptions={{ headerShown: false}}>\n <Stack.Screen name="(tabs)" \/>\n <Stack.Screen name="login" \/>\n <Stack.Screen name="action-modal" \n options={{\n presentation: 'modal'\n }}\n \/>\n <\/Stack>\n )\n}\n<\/pre><\/div>\n\n\n\u05e0\u05d7\u05d6\u05d5\u05e8 \u05dc-MedicationList \u05d5\u05db\u05d0\u05df \u05d1\u05d0\u05d9\u05e8\u05d5\u05e2 press \u05e0\u05d5\u05e1\u05d9\u05e3 \u05d0\u05ea \u05e4\u05ea\u05d9\u05d7\u05ea \u05d4\u05d7\u05dc\u05d5\u05df \u05d5\u05e0\u05e2\u05d1\u05d9\u05e8 \u05d0\u05dc\u05d9\u05d5 \u05d0\u05ea \u05db\u05dc \u05d4\u05de\u05d9\u05d3\u05e2 \u05e9\u05d0\u05e0\u05d7\u05e0\u05d5 \u05e6\u05e8\u05d9\u05db\u05d9\u05dd.<\/p>\n\n\n
\n<View style={{ flex: 1 }}>\n {isLoading ? (<ActivityIndicator style={{marginTop: 20}} \n size={'large'} color={Colors.PRIMARY} \/>) : medList?.length > 0 ? \n <FlatList data={medList} \n style={styles.listContainer}\n showsVerticalScrollIndicator={false}\n refreshing={isLoading}\n renderItem={({item, index}) => (\n <TouchableOpacity onPress={() => router.push({\n pathname: '\/action-modal',\n params: { ...item,\n selectedDate: selectedDate\n }\n })}>\n <MedCardItem med={item} \/>\n <\/TouchableOpacity>\n )}\n ListFooterComponent={<View style={{ height: 50 }} \/>}\n \/> : <EmptyState \/>\n }\n<\/View>\n<\/pre><\/div>\n\n\n\u05d0\u05ea \u05d4\u05de\u05d9\u05d3\u05e2 \u05e9\u05e9\u05dc\u05d7\u05e0\u05d5 \u05e0\u05e7\u05d1\u05dc \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05ea \u05d4\u05de\u05d9\u05d3\u05e2:<\/p>\n\n\n
\nexport default function MedicationActionModel() {\n const medicine = useLocalSearchParams();\n return (\n <View>\n <Text>MedicationActionModel<\/Text>\n <\/View>\n )\n}\n<\/pre><\/div>\n\n\n\u05e0\u05d5\u05e1\u05d9\u05e3 \u05dc\u05de\u05e1\u05da \u05d0\u05ea \u05d4\u05de\u05d9\u05d3\u05e2 \u05e2\u05dc \u05d4\u05ea\u05d6\u05db\u05d5\u05e8\u05ea, \u05d0\u05ea \u05d4\u05de\u05d9\u05d3\u05e2 \u05e2\u05dc \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4 – \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1-Card \u05e9\u05db\u05d1\u05e8 \u05d9\u05e6\u05e8\u05e0\u05d5 \u05dc\u05e6\u05d5\u05e8\u05da \u05d6\u05d4 \u05d5\u05d0\u05e4\u05e9\u05e8\u05d5\u05ea \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d4\u05d0\u05dd \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4 \u05e0\u05dc\u05e7\u05d7\u05d4 \u05d0\u05d5 \u05dc\u05d0.<\/p>\n\n\n
\nimport { View, Text, StyleSheet, TouchableOpacity } from 'react-native'\nimport FontAwesome6 from '@expo\/vector-icons\/FontAwesome6';\nimport AntDesign from '@expo\/vector-icons\/AntDesign';\nimport React from 'react'\nimport { useLocalSearchParams, useRouter } from 'expo-router'\nimport Colors from '..\/..\/constants\/Colors';\nimport MedCardItem from '..\/..\/components\/MedCardItem';\n\nexport default function MedicationActionModel() {\n const medicine = useLocalSearchParams();\n const router = useRouter();\n\n return (\n <View style={styles.mainContainer}>\n <FontAwesome6 name="bell" size={24} color="black" style={styles.mainIcon}\/>\n <Text style={styles.dateText}>{ medicine?.selectedDate }<\/Text>\n <Text style={styles.reminderText}>{ medicine?.reminder }<\/Text>\n <Text style={styles.instructionText}>It's time to take<\/Text>\n\n <MedCardItem med={medicine} \/>\n\n <View style={styles.buttonsContainer}>\n <TouchableOpacity style={styles.closeButton}>\n <AntDesign name="closecircleo" size={24} color="red" \/>\n <Text style={styles.closeButtonText}>Missed<\/Text>\n <\/TouchableOpacity>\n\n <TouchableOpacity style={styles.SuccessButton}>\n <AntDesign name="checkcircleo" size={24} color="#fff" \/>\n <Text style={styles.SuccessButtonText}>Taken<\/Text>\n <\/TouchableOpacity>\n <\/View>\n\n <TouchableOpacity style={styles.closeIcon} onPress={() => router.back()}>\n <AntDesign name="closecircle" size={40} color="#aaa" \/>\n <\/TouchableOpacity>\n <\/View>\n )\n}\n\nconst styles = StyleSheet.create({\n mainContainer: {\n padding: 25,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: '#fff',\n height: '100%'\n },\n\n mainIcon:{\n fontSize: 100,\n marginTop: 10,\n color: Colors.PRIMARY\n },\n\n dateText: {\n fontSize: 18\n },\n\n reminderText: {\n fontSize: 30,\n fontWeight: 'bold'\n },\n\n instructionText: {\n fontSize: 18,\n marginBottom: 20\n },\n\n buttonsContainer: {\n marginTop: 10,\n flexDirection: 'row',\n gap: 10,\n },\n\n closeButton: {\n paddingVertical: 10,\n paddingHorizontal: 20,\n flexDirection: 'row',\n gap: 12,\n alignItems: 'center',\n borderWidth: 1,\n borderColor: 'red',\n borderRadius: 10\n },\n\n closeButtonText: {\n fontSize: 18,\n color: 'red'\n },\n\n SuccessButton: {\n paddingVertical: 10,\n paddingHorizontal: 20,\n flexDirection: 'row',\n gap: 12,\n alignItems: 'center',\n borderRadius: 10,\n backgroundColor: Colors.PRIMARY\n },\n\n SuccessButtonText: {\n fontSize: 18,\n color: '#fff'\n },\n\n closeIcon: {\n position: 'absolute',\n bottom: 25\n }\n})\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-17-235106.png\")
<\/figure>\n<\/div>\n\n\n\u05d1\u05ea\u05e6\u05d5\u05d2\u05d4 \u05db\u05d0\u05df \u05d9\u05e9 \u05d7\u05dc\u05e7\u05d9\u05dd \u05e9\u05dc\u05d0 \u05d4\u05d2\u05d9\u05e2\u05d5, \u05dc\u05de\u05e9\u05dc \u05d4\u05d0\u05d9\u05d9\u05e7\u05d5\u05df \u05d5\u05e1\u05d5\u05d2 \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4.<\/p>\n\n\n\n
\u05d0\u05d7\u05e8\u05d9 \u05d4\u05d5\u05e1\u05e4\u05ea \u05d4\u05db\u05e4\u05ea\u05d5\u05e8\u05d9\u05dd, \u05e0\u05e6\u05d8\u05e8\u05da \u05dc\u05d4\u05e4\u05e2\u05d9\u05dc \u05d0\u05d5\u05ea\u05dd \u05db\u05d3\u05d9 \u05e9\u05d9\u05e2\u05d3\u05db\u05e0\u05d5 \u05d0\u05ea \u05d4-DB \u05d4\u05d0\u05dd \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4 \u05e0\u05dc\u05e7\u05d7\u05d4 \u05d1\u05d0\u05d5\u05ea\u05d5 \u05d1\u05ea\u05d0\u05e8\u05d9\u05da. \u05e0\u05d5\u05e1\u05d9\u05e3 \u05d0\u05ea \u05d4\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05e9\u05ea\u05d8\u05e4\u05dc \u05d1\u05e2\u05d3\u05db\u05d5\u05df, \u05d5\u05e0\u05e4\u05e2\u05d9\u05dc \u05d0\u05d5\u05ea\u05d4 \u05de\u05d4\u05db\u05e4\u05ea\u05d5\u05e8\u05d9\u05dd \u05e2\u05dd \u05d4\u05e1\u05d8\u05d8\u05d5\u05e1 \u05d4\u05de\u05ea\u05d0\u05d9\u05dd.<\/p>\n\n\n
\n...\nconst updateActionStatus = async(status) => {\n try {\n const docRef = doc(db, 'medication', medicine?.docId);\n await updateDoc(docRef, {\n action: arrayUnion({\n status: status,\n time: moment().format('LT'),\n date: medicine?.selectedDate\n })\n })\n } catch (error) {\n console.log(error);\n }\n\n Alert.alert(status, 'Action Saved!', [\n {\n text: 'OK',\n onPress: () => router.replace('(tabs)')\n }\n ])\n}\n...\n<View style={styles.buttonsContainer}>\n <TouchableOpacity style={styles.closeButton}\n onPress={() => updateActionStatus('Missed')}\n >\n <AntDesign name="closecircleo" size={24} color="red" \/>\n <Text style={styles.closeButtonText}>Missed<\/Text>\n <\/TouchableOpacity>\n\n <TouchableOpacity style={styles.SuccessButton}\n onPress={() => updateActionStatus('Taken')}\n >\n <AntDesign name="checkcircleo" size={24} color="#fff" \/>\n <Text style={styles.SuccessButtonText}>Taken<\/Text>\n <\/TouchableOpacity>\n<\/View>\n<\/pre><\/div>\n\n\n\u05d1\u05de\u05e1\u05da \u05d4\u05d1\u05d9\u05ea, \u05e9\u05de\u05e8\u05d0\u05d4 \u05d0\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d5\u05ea \u05e0\u05e8\u05e6\u05d4 \u05dc\u05d4\u05e8\u05d0\u05d5\u05ea \u05d0\u05ea \u05e1\u05d8\u05d8\u05d5\u05e1 \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4, \u05d4\u05d0\u05dd \u05e0\u05dc\u05e7\u05d7\u05d4 \u05d0\u05d5 \u05dc\u05d0. \u05d0\u05ea \u05d4\u05d0\u05d9\u05e0\u05d3\u05d9\u05e7\u05d8\u05d5\u05e8 \u05d4\u05d6\u05d4 \u05e0\u05d5\u05e1\u05d9\u05e3 \u05d1\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d4-Card.<\/p>\n\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05d3\u05e2\u05ea \u05d1\u05d0\u05d9\u05d6\u05d4 \u05ea\u05d0\u05e8\u05d9\u05da \u05d0\u05e0\u05d7\u05e0\u05d5 \u05e0\u05de\u05e6\u05d0\u05d9\u05dd \u05d5\u05dc\u05d1\u05d3\u05d5\u05e7 \u05d0\u05dd \u05d9\u05e9 \u05d4\u05ea\u05d0\u05de\u05d4 \u05dc\u05ea\u05d0\u05e8\u05d9\u05da \u05d1\u05d5 \u05e0\u05dc\u05e7\u05d7\u05d4 \u05d4\u05ea\u05e8\u05d5\u05e4\u05d4, \u05e0\u05e9\u05dc\u05d7 \u05de\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05ea \u05d4-List \u05d0\u05ea \u05d4\u05ea\u05d0\u05e8\u05d9\u05da \u05d4\u05e0\u05d1\u05d7\u05e8 \u05d5\u05e0\u05e7\u05d1\u05dc \u05d0\u05d5\u05ea\u05d5 \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05ea \u05d4-Card.<\/p>\n\n\n
\n<MedCardItem med={item} selectedDate={selectedDate}\/>\n<\/pre><\/div>\n\n\nexport default function MedCardItem({med, selectedDate=''}) {\n...\n<\/pre><\/div>\n\n\n\u05d1\u05e8\u05d0\u05e9 \u05d4-card \u05e0\u05d5\u05e1\u05d9\u05e3 \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05e9\u05d1\u05d5\u05d3\u05e7\u05ea \u05d0\u05ea \u05d4\u05e1\u05d8\u05d8\u05d5\u05e1 \u05d5\u05e0\u05e4\u05e2\u05d9\u05dc \u05d0\u05ea \u05d4\u05d1\u05d3\u05d9\u05e7\u05d4 \u05d1\u05db\u05e0\u05d9\u05e1\u05d4 \u05dc\u05d1\u05e0\u05d9\u05d9\u05ea \u05d4\u05db\u05e8\u05d8\u05d9\u05e1.<\/p>\n\n\n
\nexport default function MedCardItem({med, selectedDate=''}) {\n const [status, setStatus] = useState();\n\n useEffect(() => {\n checkStatus();\n }, [med]);\n\n checkStatus = () => {\n const data = med?.action?.find(item => item.date == selectedDate);\n setStatus(data);\n }\n ...\n<\/pre><\/div>\n\n\n\u05dc\u05e9\u05d9\u05dd \u05dc\u05d1: \u05e0\u05d9\u05e1\u05d9\u05ea\u05d9 \u05d0\u05ea \u05d4\u05e7\u05d5\u05d3 \u05dc\u05de\u05e2\u05dc\u05d4, \u05d0\u05d1\u05dc \u05d4\u05d5\u05d0 \u05dc\u05d0 \u05e2\u05d5\u05d1\u05d3 \u05db\u05de\u05d5 \u05e9\u05e6\u05e8\u05d9\u05da, \u05e2\u05d3 \u05e9\u05de\u05ea\u05d1\u05e6\u05e2\u05ea \u05d4\u05d1\u05d3\u05d9\u05e7\u05d4 \u05e9\u05dc \u05d4\u05e1\u05d8\u05d8\u05d5\u05e1 \u05d4\u05ea\u05e6\u05d5\u05d2\u05d4 \u05db\u05d1\u05e8 \u05e2\u05d5\u05d1\u05e8\u05ea \u05dc\u05db\u05e8\u05d8\u05d9\u05e1 \u05d4\u05d1\u05d0 \u05d5\u05d4\u05de\u05d9\u05d3\u05e2 \u05de\u05e9\u05ea\u05d1\u05e9. \u05d4\u05e4\u05ea\u05e8\u05d5\u05df: \u05e7\u05e8\u05d9\u05d0\u05d4 \u05dc\u05e4\u05e2\u05d5\u05dc\u05d4 \u05d1\u05ea\u05d5\u05da useEffect.<\/strong><\/p>\n\n\n\nuseEffect(() => {\n if(med?.action && Array.isArray(med?.action)){\n const data = med?.action?.find(item => item.date == selectedDate);\n setStatus(data);\n }\n}, [med]);\n<\/pre><\/div>\n\n\n\u05e2\u05db\u05e9\u05d9\u05d5 \u05d6\u05d4 \u05e2\u05d5\u05d1\u05d3. \u05e2\u05d5\u05d3 \u05ea\u05d9\u05e7\u05d5\u05df \u05e9\u05db\u05d3\u05d0\u05d9 \u05dc\u05e2\u05e9\u05d5\u05ea, \u05d0\u05dd \u05d0\u05d7\u05e8\u05d9 \u05e9\u05de\u05e1\u05de\u05e0\u05d9\u05dd Missed \u05e0\u05db\u05e0\u05e1\u05d9\u05dd \u05e9\u05d5\u05d1 \u05dc\u05ea\u05e8\u05d5\u05e4\u05d4 \u05d5\u05de\u05e1\u05de\u05e0\u05d9\u05dd Taken, \u05e9\u05ea\u05d9 \u05d4\u05d4\u05e2\u05e8\u05d5\u05ea \u05e0\u05e8\u05e9\u05de\u05d5\u05ea \u05d5\u05d4\u05e8\u05d0\u05e9\u05d5\u05e0\u05d4 \u05e0\u05dc\u05e7\u05d7\u05ea \u05dc\u05ea\u05e6\u05d5\u05d2\u05d4. \u05d0\u05e4\u05e9\u05e8 \u05dc\u05d1\u05d3\u05d5\u05e7 \u05d4\u05d0\u05dd \u05e7\u05d9\u05d9\u05dd \u05e1\u05d8\u05d8\u05d5\u05e1 \u05d5\u05d1\u05de\u05d9\u05d3\u05d4 \u05d5\u05db\u05df \u05dc\u05e2\u05d3\u05db\u05df \u05d0\u05d5\u05ea\u05d5 \u05d5\u05dc\u05d0 \u05dc\u05d4\u05d5\u05e1\u05d9\u05e3 \u05e8\u05e9\u05d5\u05de\u05d4.<\/p>\n\n\n\n
History<\/h2>\n\n\n\n
\u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05d4\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05d4\u05ea\u05e8\u05d5\u05e4\u05d5\u05ea, \u05e0\u05d1\u05e0\u05d4 \u05e2\u05de\u05d5\u05d3 \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d4 \u05d5\u05e0\u05e9\u05ea\u05de\u05e9 \u05d1\u05d5 \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea \u05e9\u05e7\u05d9\u05d9\u05de\u05d5\u05ea \u05dc\u05e0\u05d5.<\/p>\n\n\n\n
\u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05e7\u05d1\u05dc \u05d0\u05ea \u05e8\u05e9\u05d9\u05de\u05ea \u05d4\u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd \u05d4\u05e7\u05d5\u05d3\u05de\u05d9\u05dd \u05dc\u05d4\u05d9\u05d5\u05dd \u05e0\u05e9\u05ea\u05de\u05e9 \u05d1\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea \u05e2\u05d6\u05e8 \u05d1\u05e7\u05d5\u05d1\u05e5 ConvertDateTime.<\/p>\n\n\n
\nexport const getPrevDateRangeToDisplay = () => {\n const dateList = [];\n\n for(let i = 0; i < 7; i++){\n const date = moment().subtract(i, days);\n\n dateList.push({\n date: date.format('DD'),\n day: date.format('dd'),\n formattedDate: date.format('L')\n })\n }\n\n return dateList;\n}\n<\/pre><\/div>\n\n\n\u05d1\u05de\u05e7\u05d5\u05dd \u05dc\u05d1\u05e0\u05d5\u05ea \u05e2\u05de\u05d5\u05d3 \u05d7\u05d3\u05e9, \u05d0\u05d5\u05dc\u05d9 \u05d0\u05e4\u05e9\u05e8 \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05e9\u05dc \u05d4-List \u05d5\u05e4\u05e9\u05d5\u05d8 \u05dc\u05e9\u05dc\u05d5\u05d7 \u05dc\u05d4 \u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd \u05d0\u05d7\u05e8\u05d9\u05dd. \u05e6\u05e8\u05d9\u05da \u05dc\u05e9\u05d9\u05dd \u05dc\u05d1 \u05e9\u05db\u05e8\u05d2\u05e2 \u05d0\u05dd \u05d9\u05e9 \u05e2\u05de\u05d5\u05d3 \u05e8\u05d9\u05e7, \u05d9\u05e9 \u05d4\u05e6\u05e2\u05d4 \u05dc\u05d4\u05d5\u05e1\u05d9\u05e3 \u05ea\u05e8\u05d5\u05e4\u05d5\u05ea, \u05db\u05de\u05d5\u05d1\u05df \u05e9\u05d1\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d4 \u05d0\u05d9\u05df \u05de\u05d4 \u05dc\u05d4\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d4\u05db\u05e4\u05ea\u05d5\u05e8 \u05d4\u05d6\u05d4.<\/p>\n\n\n\n
Generate APK File<\/h2>\n\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05d4\u05e2\u05dc\u05d5\u05ea \u05d0\u05ea \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d7\u05e0\u05d5\u05d9\u05d5\u05ea \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d5\u05ea, \u05e6\u05e8\u05d9\u05da \u05dc\u05d9\u05d9\u05e6\u05e8 \u05e7\u05d5\u05d1\u05e5 \u05e2\u05dd \u05e1\u05d9\u05d5\u05de\u05ea aab \u05dc\u05d0\u05e0\u05d3\u05e8\u05d5\u05d9\u05d3, \u05d5\u05e7\u05d5\u05d1\u05e5 ipa \u05dc-IOS.<\/p>\n\n\n\n
\u05d9\u05e9 \u05db\u05de\u05d4 \u05d3\u05e8\u05db\u05d9\u05dd \u05dc\u05e2\u05e9\u05d5\u05ea \u05d0\u05ea \u05d6\u05d4. \u05d3\u05e8\u05da \u05d0\u05d7\u05ea \u05d4\u05d9\u05d0 \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1-EAS<\/a> \u05e9\u05dc Expo. \u05d4\u05d1\u05e2\u05d9\u05d4 \u05d4\u05d9\u05d0 \u05e9\u05dc\u05d5\u05e7\u05d7 \u05d4\u05e8\u05d1\u05d4 \u05d6\u05de\u05df \u05dc\u05d9\u05d9\u05e6\u05e8 \u05db\u05db\u05d4 \u05d0\u05ea \u05d4\u05e7\u05d1\u05e6\u05d9\u05dd.<\/p>\n\n\n\n
![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-17-231706-1024x416.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-17-231857-1024x330.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-17-232132-1024x152.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-17-232332-1024x404.png\")
<\/figure>\n<\/div>\n\n\n