update 3rd assignment done

App.tsx

-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import Lottie from 'lottie-react-native';
 import Home from './src/components/Home';
 import Login from './src/components/Login';
 import Signup from './src/components/Signup';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import MedicineList from './src/components/MedicineList';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 function App() {
   const [isLoading, setLoading] = useState(true);
 
-  setTimeout(() => {setLoading(false)}, 6000);
+  setTimeout(() => {
+    setLoading(false);
+  }, 6000);
 
   if (isLoading) {
     return (
-      <Lottie source={require('./src/assets/splash_screen.json')} autoPlay loop />
+      <Lottie
+        source={require('./src/assets/splash_screen.json')}
+        autoPlay
+        loop
+      />
     );
   }
   return (
@@ -24,9 +31,10 @@ function App() {
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen name="Signup" component={Signup} />
         <Stack.Screen name="Login" component={Login} />
+        <Stack.Screen name="MedicineList" component={MedicineList} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;

src/components/Home.js

 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import Background from './Background';
 import Btn from './Button';
-import { darkGreen, green } from '../constants/Constants';
+import {darkGreen, green} from '../constants/Constants';
 
-const Home = (props) => {
+const Home = props => {
   return (
     <Background>
-      <View style={{ marginHorizontal: 20, marginVertical: 100 }}>
-      <Btn bgColor={green} textColor='white' btnLabel="Login" Press={() => props.navigation.navigate("Login")} />
-      <Btn bgColor='white' textColor={darkGreen} btnLabel="Signup" Press={() => props.navigation.navigate("Signup")} />
+      <View style={{marginHorizontal: 20, marginVertical: 100}}>
+        <Btn
+          bgColor={green}
+          textColor="white"
+          btnLabel="Login"
+          Press={() => props.navigation.navigate('Login')}
+        />
+        <Btn
+          bgColor="white"
+          textColor={darkGreen}
+          btnLabel="Signup"
+          Press={() => props.navigation.navigate('Signup')}
+        />
+        <Btn
+          bgColor="white"
+          textColor="blue"
+          btnLabel="Products"
+          Press={() => props.navigation.navigate('MedicineList')}
+        />
       </View>
     </Background>
   );
-}
+};
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({});
 
-export default Home;
\ No newline at end of file
+export default Home;

src/components/MedicineList.js

+import React from 'react';
+import {View, FlatList, Image, StyleSheet, Text} from 'react-native';
+
+const items = [
+  {
+    id: 1,
+    name: 'Panadol',
+    price: 18,
+    image: require('../assets/images/products/panadol.png'),
+  },
+  {
+    id: 2,
+    name: 'Amoxil 125mg Syrup',
+    price: 128,
+    image: require('../assets/images/products/amoxil-syrup-125mg.jpg'),
+  },
+  {
+    id: 3,
+    name: 'Arinac Forte',
+    price: 50,
+    image: require('../assets/images/products/arinac-forte.jpg'),
+  },
+  {
+    id: 4,
+    name: 'Telfast 120mg',
+    price: 75,
+    image: require('../assets/images/products/telfast-120mg.jpg'),
+  },
+  {
+    id: 5,
+    name: 'Risek 40mg Tablet',
+    price: 120,
+    image: require('../assets/images/products/risek-40mg.jpg'),
+  },
+  {
+    id: 6,
+    name: 'Coferb Cough Syrup',
+    price: 90,
+    image: require('../assets/images/products/coferb-syp.jpg'),
+  },
+];
+
+const Item = ({name, image, price}) => (
+  <View style={styles.itemContainer}>
+    <Image source={image} style={styles.image} />
+    <Text style={styles.text}>{name}</Text>
+    <Text style={styles.text}>Rs. {parseFloat(price.toFixed(2))}</Text>
+  </View>
+);
+
+const MedicineList = () => {
+  return (
+    <FlatList
+      data={items}
+      numColumns={2}
+      renderItem={({item}) => (
+        <Item name={item.name} image={item.image} price={item.price} />
+      )}
+      keyExtractor={item => item.id.toString()}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 5,
+    padding: 20,
+    margin: 10,
+    alignItems: 'center',
+  },
+  image: {
+    width: 100,
+    height: 100,
+    resizeMode: 'contain',
+  },
+  text: {
+    fontSize: 12,
+    marginTop: 10,
+  },
+});
+
+export default MedicineList;