├── assets
    ├── bell.png
    ├── card.png
    ├── home.png
    ├── icon.png
    ├── menu.png
    ├── more.png
    ├── rec.png
    ├── send.png
    ├── user.jpg
    ├── apple.png
    ├── burger.png
    ├── keells.png
    ├── pizza.png
    ├── pizzaa.png
    ├── splash.png
    ├── avatar
    │   ├── a1.png
    │   ├── a2.png
    │   ├── a3.png
    │   ├── a4.png
    │   └── a5.png
    ├── favicon.png
    ├── setting.png
    ├── statistic.png
    ├── cards
    │   ├── blue.png
    │   ├── master.png
    │   ├── orange.png
    │   └── purple.png
    ├── Navigation
    │   ├── del.png
    │   ├── back.png
    │   ├── more.png
    │   └── next.png
    ├── adaptive-icon.png
    └── transactions
    │   ├── phone.png
    │   ├── pizza.png
    │   ├── fashion.png
    │   └── grocery.png
├── babel.config.js
├── .gitignore
├── Model
    ├── Settings.jsx
    ├── More.jsx
    ├── NavigationBar.jsx
    ├── BottomNav.jsx
    ├── Wallet.jsx
    ├── SendMoney.jsx
    ├── Home.jsx
    └── Statistic.jsx
├── ProfileScreen.js
├── About.js
├── HomeScreen.js
├── package.json
├── app.json
├── README.md
└── App.js


/assets/bell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/bell.png


--------------------------------------------------------------------------------
/assets/card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/card.png


--------------------------------------------------------------------------------
/assets/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/home.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/menu.png


--------------------------------------------------------------------------------
/assets/more.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/more.png


--------------------------------------------------------------------------------
/assets/rec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/rec.png


--------------------------------------------------------------------------------
/assets/send.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/send.png


--------------------------------------------------------------------------------
/assets/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/user.jpg


--------------------------------------------------------------------------------
/assets/apple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/apple.png


--------------------------------------------------------------------------------
/assets/burger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/burger.png


--------------------------------------------------------------------------------
/assets/keells.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/keells.png


--------------------------------------------------------------------------------
/assets/pizza.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/pizza.png


--------------------------------------------------------------------------------
/assets/pizzaa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/pizzaa.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/splash.png


--------------------------------------------------------------------------------
/assets/avatar/a1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/avatar/a1.png


--------------------------------------------------------------------------------
/assets/avatar/a2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/avatar/a2.png


--------------------------------------------------------------------------------
/assets/avatar/a3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/avatar/a3.png


--------------------------------------------------------------------------------
/assets/avatar/a4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/avatar/a4.png


--------------------------------------------------------------------------------
/assets/avatar/a5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/avatar/a5.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/assets/setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/setting.png


--------------------------------------------------------------------------------
/assets/statistic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/statistic.png


--------------------------------------------------------------------------------
/assets/cards/blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/cards/blue.png


--------------------------------------------------------------------------------
/assets/Navigation/del.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/Navigation/del.png


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/cards/master.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/cards/master.png


--------------------------------------------------------------------------------
/assets/cards/orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/cards/orange.png


--------------------------------------------------------------------------------
/assets/cards/purple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/cards/purple.png


--------------------------------------------------------------------------------
/assets/Navigation/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/Navigation/back.png


--------------------------------------------------------------------------------
/assets/Navigation/more.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/Navigation/more.png


--------------------------------------------------------------------------------
/assets/Navigation/next.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/Navigation/next.png


--------------------------------------------------------------------------------
/assets/transactions/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/transactions/phone.png


--------------------------------------------------------------------------------
/assets/transactions/pizza.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/transactions/pizza.png


--------------------------------------------------------------------------------
/assets/transactions/fashion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/transactions/fashion.png


--------------------------------------------------------------------------------
/assets/transactions/grocery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/direx99/expense-tracker-app/HEAD/assets/transactions/grocery.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 
16 | # Temporary files created by Metro to check the health of the file watcher
17 | .metro-health-check*
18 | 


--------------------------------------------------------------------------------
/Model/Settings.jsx:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, Text, View } from 'react-native'
 2 | import React from 'react'
 3 | 
 4 | const Settings = () => {
 5 |   return (
 6 |     <View>
 7 |       <Text>Settings</Text>
 8 |     </View>
 9 |   )
10 | }
11 | 
12 | export default Settings
13 | 
14 | const styles = StyleSheet.create({})


--------------------------------------------------------------------------------
/ProfileScreen.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, Text, View } from 'react-native'
 2 | import React from 'react'
 3 | 
 4 | const ProfileScreen = () => {
 5 |   return (
 6 |     <View>
 7 |       <Text>ProfileScreen</Text>
 8 |     </View>
 9 |   )
10 | }
11 | 
12 | export default ProfileScreen
13 | 
14 | const styles = StyleSheet.create({})


--------------------------------------------------------------------------------
/About.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button, View, Text } from "react-native";
 3 | 
 4 | export default function About({ navigation }) {
 5 |   return (
 6 |     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
 7 |       <Text>Home Screen</Text>
 8 |       <Button
 9 |         title="Go to About"
10 |         onPress={() => navigation.navigate("Home")}
11 |       />
12 |     </View>
13 |   );
14 | }


--------------------------------------------------------------------------------
/Model/More.jsx:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, Text, View } from 'react-native'
 2 | import React from 'react'
 3 | import BottomNav from "./BottomNav";
 4 | 
 5 | 
 6 | const More = () => {
 7 |   return (
 8 |     <View>
 9 |      <View style={styles.btmnav}>
10 |           <BottomNav />
11 |         </View>
12 |     
13 |     </View>
14 |   )
15 | }
16 | 
17 | export default More
18 | 
19 | const styles = StyleSheet.create({
20 |   btmnav: {
21 |     position: 'absolute',
22 |     bottom: -10,
23 |     left: 10,
24 |     right: 10
25 |   }
26 | })


--------------------------------------------------------------------------------
/HomeScreen.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button, StyleSheet,View, Text } from "react-native";
 3 | import BottomNav from "./Model/BottomNav";
 4 | 
 5 | export default function HomeScreen({ navigation }) {
 6 |   return (
 7 |     <View style={styles.home}>
 8 |      
 9 |       <Button
10 |         title="Go to About"
11 |         onPress={() => navigation.navigate("About")}
12 |       />
13 |     </View>
14 |   );
15 | }
16 | 
17 | const styles = StyleSheet.create({
18 |   home:{
19 |     flex:1,
20 |     backgroundColor:'#111111',
21 |     justifyContent:'space-between',
22 |     padding:20
23 |     
24 |   },
25 |   navbar:{
26 |     
27 |    
28 |   }
29 | 
30 | })


--------------------------------------------------------------------------------
/Model/NavigationBar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 3 | import HomeScreen from '../HomeScreen';
 4 | import About from '../About';
 5 | 
 6 | 
 7 | const Tab = createBottomTabNavigator();
 8 | 
 9 | const NavigationBar = () => {
10 |   return (
11 |     <Tab.Navigator
12 |     tabBarOptions={{
13 |       showLabel: false,
14 |       style:{
15 |         backgroundColor:'#000',
16 |         position:ab
17 |         
18 |       }
19 |     }}
20 |     >
21 |       <Tab.Screen name="Home" component={HomeScreen} />
22 |       <Tab.Screen name="About" component={About} />
23 |     </Tab.Navigator>
24 |   );
25 | };
26 | 
27 | export default NavigationBar;
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "expense-tracker",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web"
10 |   },
11 |   "dependencies": {
12 |     "@react-navigation/bottom-tabs": "^6.5.7",
13 |     "@react-navigation/native": "^6.1.6",
14 |     "@react-navigation/native-stack": "^6.9.12",
15 |     "expo": "~48.0.18",
16 |     "expo-status-bar": "~1.4.4",
17 |     "react": "18.2.0",
18 |     "react-native": "0.71.8",
19 |     "react-navigation": "^4.4.4"
20 |   },
21 |   "devDependencies": {
22 |     "@babel/core": "^7.20.0"
23 |   },
24 |   "private": true
25 | }
26 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Expense-Tracker",
 4 |     "slug": "Expense-Tracker",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "assetBundlePatterns": [
15 |       "**/*"
16 |     ],
17 |     "ios": {
18 |       "supportsTablet": true
19 |     },
20 |     "android": {
21 |       "adaptiveIcon": {
22 |         "foregroundImage": "./assets/adaptive-icon.png",
23 |         "backgroundColor": "#ffffff"
24 |       }
25 |     },
26 |     "web": {
27 |       "favicon": "./assets/favicon.png"
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Expense Tracker App
 3 | 
 4 | I have created an Expense Tracker App using React Native. As a self-studying developer, I have been working on various small apps using React Native, and this project allowed me to further enhance my skills. In this report, I will provide an overview of the project, the technologies used, and my experience during the development process.
 5 | 
 6 | The Expense Tracker App is a mobile application developed using React Native, a popular JavaScript framework for building native mobile apps. The main goal of this app is to help users track their expenses and manage their financial activities in a convenient and user-friendly manner. By providing an intuitive user interface and essential functionalities, the app allows users to record their expenses, categorize them, and generate reports for better financial management.
 7 | 
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | ## Screenshots
16 | 
17 | 
18 | ![alt text](https://i.postimg.cc/nL2ywQMk/Screenshot-2023-06-11-at-14-21-22.png)
19 | 
20 | 
21 | ![alt text](https://i.postimg.cc/L8tKLWpG/Screenshot-2023-06-11-at-14-21-28.png)
22 | 
23 | 
24 | ![alt text](https://i.postimg.cc/wvfd3spv/Screenshot-2023-06-11-at-14-21-34.png)
25 | 
26 | 
27 | ![alt text](https://i.postimg.cc/Mp2JcShy/Screenshot-2023-06-11-at-14-21-43.png)
28 | 
29 | 
30 | ![alt text](https://i.postimg.cc/fbM4KvWy/Screenshot-2023-06-11-at-14-22-05.png)
31 | ## Tech Stack
32 | 
33 |  React Native
34 | 
35 | 
36 | ## UI Credit
37 |  https://dribbble.com/shots/21012436-Finance-Mobile-App
38 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { useIsFocused } from "@react-navigation/native";
  3 | import {
  4 |   NavigationContainer,
  5 |   useNavigation,
  6 |   useFocusEffect,
  7 | } from "@react-navigation/native";
  8 | import { createNativeStackNavigator } from "@react-navigation/native-stack";
  9 | import { StyleSheet, Text, View } from "react-native";
 10 | import HomeScreen from "./HomeScreen";
 11 | import About from "./About";
 12 | import BottomNav from "./Model/BottomNav";
 13 | import Home from "./Model/Home";
 14 | import Statistic from "./Model/Statistic";
 15 | import More from "./Model/More";
 16 | import Wallet from "./Model/Wallet";
 17 | import Settings from "./Model/Settings";
 18 | import SendMoney from "./Model/SendMoney";
 19 | import { StatusBar } from "expo-status-bar";
 20 | 
 21 | export default function App() {
 22 |   const Stack = createNativeStackNavigator();
 23 | 
 24 |   function ScreenNameTracker() {
 25 |     const navigation = useNavigation();
 26 |     const isFocused = useIsFocused();
 27 |     const [currentScreenName, setCurrentScreenName] = useState("");
 28 | 
 29 |     useEffect(() => {
 30 |       if (isFocused) {
 31 |         const currentRoute = navigation.getCurrentRoute();
 32 |         setCurrentScreenName(currentRoute.name);
 33 |       }
 34 |     }, [isFocused, navigation]);
 35 | 
 36 |     useEffect(() => {
 37 |       const unsubscribe = navigation.addListener("state", () => {
 38 |         const currentRoute = navigation.getCurrentRoute();
 39 |         setCurrentScreenName(currentRoute.name);
 40 |       });
 41 |       console.log(currentScreenName);
 42 | 
 43 |       return unsubscribe;
 44 |     }, [navigation]);
 45 | 
 46 |     if (currentScreenName !== "Send") {
 47 |       return (
 48 |         <View style={styles.btmnav}>
 49 |           <BottomNav />
 50 |         </View>
 51 |       );
 52 |     } else {
 53 |       <View style={styles.btmnav}>
 54 |         <BottomNav />
 55 |       </View>;
 56 |     }
 57 |   }
 58 | 
 59 |   return (
 60 |     <View style={styles.container}>
 61 |             <StatusBar style="light" />
 62 | 
 63 |       <NavigationContainer>
 64 |         <View style={{ flex: 1 }}>
 65 |           <Stack.Navigator screenOptions={{ animation: "none" }}>
 66 |             {/*Define our routes*/}
 67 |             <Stack.Screen
 68 |               name="Home"
 69 |               component={Home}
 70 |               options={{ headerShown: false }}
 71 |             />
 72 |             <Stack.Screen
 73 |               name="Statistic"
 74 |               component={Statistic}
 75 |               options={{ headerShown: false }}
 76 |             />
 77 |             <Stack.Screen
 78 |               name="More"
 79 |               component={More}
 80 |               options={{ headerShown: false }}
 81 |             />
 82 |             <Stack.Screen
 83 |               name="Wallet"
 84 |               component={Wallet}
 85 |               options={{ headerShown: false }}
 86 |             />
 87 |             <Stack.Screen
 88 |               name="Settings"
 89 |               component={Settings}
 90 |               options={{ headerShown: false }}
 91 |             />
 92 |             <Stack.Screen
 93 |               name="Send"
 94 |               component={SendMoney}
 95 |               options={{ headerShown: false }}
 96 |             />
 97 |           </Stack.Navigator>
 98 |           <ScreenNameTracker />
 99 |         </View>
100 |       </NavigationContainer>
101 |     </View>
102 |   );
103 | }
104 | 
105 | const styles = StyleSheet.create({
106 |   container: {
107 |     flex: 1,
108 |     backgroundColor: "#111111",
109 |     padding: 20,
110 |   },
111 |   btmnav: {
112 |     position: "absolute",
113 |     bottom: -10,
114 |     left: 10,
115 |     right: 10,
116 |   },
117 | });
118 | 


--------------------------------------------------------------------------------
/Model/BottomNav.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
  3 | import home from '../assets/home.png'
  4 | import card from '../assets/card.png'
  5 | import settings from '../assets/setting.png'
  6 | import more from '../assets/more.png'
  7 | import statics from '../assets/statistic.png'
  8 | import { useNavigation } from '@react-navigation/native';
  9 | 
 10 | 
 11 | 
 12 | const BottomNav = ({hideView}) => {
 13 |     const navigation = useNavigation();
 14 |     const handleClick = () => {
 15 |       hideView();
 16 |     };
 17 |   const [selectedIcon, setSelectedIcon] = useState('home');
 18 | 
 19 |   const handleIconPress = (iconName) => {
 20 | 
 21 |     
 22 |     
 23 | 
 24 |     setSelectedIcon(iconName);
 25 |     if (iconName === 'home') {
 26 |         setSelectedIcon('home')
 27 |         navigation.navigate('Home',  { animation:'none' });
 28 |         
 29 |       }
 30 |       else  if (iconName === 'statics') {
 31 |         setSelectedIcon('statics')
 32 |         navigation.navigate('Statistic')
 33 |         ; 
 34 |       }
 35 |       else  if (iconName === 'more') {
 36 |         setSelectedIcon('more')
 37 |         navigation.navigate('More'); 
 38 |       } 
 39 |       else  if (iconName === 'card') {
 40 |         setSelectedIcon('card')
 41 |         navigation.navigate('Wallet'); 
 42 |       } 
 43 |       else  if (iconName === 'settings') {
 44 |         setSelectedIcon('settings')
 45 |         navigation.navigate('Settings'); 
 46 |       }
 47 |   };
 48 | 
 49 |   const getIconContainerStyle = (iconName) => {
 50 |     if (iconName === selectedIcon) {
 51 |       return { ...styles.iconContainer, backgroundColor: '#F97234' }; // Change the background color to your desired color
 52 |     }
 53 |     return styles.iconContainer;
 54 |   };
 55 | 
 56 |   return (
 57 |     <View style={styles.BottomNav}>
 58 |       <TouchableOpacity onPress={() => handleIconPress('home')}>
 59 |         <View style={getIconContainerStyle('home')}>
 60 |           <Image style={styles.navicon} source={home} />
 61 |         </View>
 62 |       </TouchableOpacity>
 63 |       <TouchableOpacity onPress={() => handleIconPress('statics')}>
 64 |         <View style={getIconContainerStyle('statics')}>
 65 |           <Image style={styles.navicon} source={statics} />
 66 |         </View>
 67 |       </TouchableOpacity>
 68 |       <TouchableOpacity onPress={() => handleIconPress('more')}>
 69 |         <View style={getIconContainerStyle('more')}>
 70 |           <Image style={styles.navicon} source={more} />
 71 |         </View>
 72 |       </TouchableOpacity>
 73 |       <TouchableOpacity onPress={() => handleIconPress('card')}>
 74 |         <View style={getIconContainerStyle('card')}>
 75 |           <Image style={styles.navicon} source={card} />
 76 |         </View>
 77 |       </TouchableOpacity>
 78 |       <TouchableOpacity onPress={() => handleIconPress('settings')}>
 79 |         <View style={getIconContainerStyle('settings')}>
 80 |           <Image style={styles.navicon} source={settings} />
 81 |         </View>
 82 |       </TouchableOpacity>
 83 |     </View>
 84 |   );
 85 | };
 86 | 
 87 | 
 88 | 
 89 | 
 90 | export default BottomNav
 91 | 
 92 | const styles = StyleSheet.create({
 93 |     BottomNav:{
 94 |         alignSelf:'center',
 95 |         width:'100%',
 96 |         height:60,
 97 |         backgroundColor:'#000',
 98 |         borderRadius:70,
 99 |         marginBottom:20,
100 |         flexDirection:'row',
101 |         justifyContent:'space-between',
102 |         alignItems:'center',
103 |         paddingHorizontal:10
104 | 
105 |     },
106 |     navicon:{
107 |         height:25,
108 |         width:25,
109 |     },
110 |     iconContainer:{
111 |       
112 |         borderRadius:40,
113 |         height:45,
114 |         width:45,
115 |         justifyContent:'center',
116 |         alignItems:'center'
117 |     }
118 | })


--------------------------------------------------------------------------------
/Model/Wallet.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   StyleSheet,
  3 |   Image,
  4 |   Text,
  5 |   TouchableOpacity,
  6 |   View,
  7 |   ScrollView,
  8 |   ImageBackground,
  9 |   Dimensions
 10 | } from "react-native";
 11 | import React, { useState } from "react";
 12 | import BlueCard from "../assets/cards/blue.png";
 13 | import PurpleCard from "../assets/cards/purple.png";
 14 | import OrangeCard from "../assets/cards/orange.png";
 15 | import master from "../assets/cards/master.png";
 16 | 
 17 | const Card = (props) => {
 18 |   return (
 19 |     <View>
 20 |       <View style={styles.Card}>
 21 |         <ImageBackground
 22 |           style={[styles.cardimg]}
 23 |           source={props.Image}
 24 |           imageStyle={[styles.cardimg]}
 25 |         >
 26 |           <View style={{padding:20,justifyContent:'space-between',height:'100%'}}>
 27 |             <View>
 28 |             <View style={{flexDirection:'row',justifyContent:'space-between'}}>
 29 |             <Text style={styles.BalanceTitle}>Current Balance</Text>
 30 |             <Text style={styles.BalanceTitle}>12 / 24</Text>
 31 | 
 32 |             </View>
 33 |             <Text style={styles.Balance}>$7,788.60</Text>
 34 | 
 35 |           </View>
 36 |           <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'flex-end'}}>
 37 | 
 38 |           <Text style={styles.BalanceTitle}>4216 7876 6878 7898</Text>
 39 |           <Image style={styles.Master} source={master} />
 40 | 
 41 |           </View>
 42 | 
 43 |           </View>
 44 |         </ImageBackground>
 45 |       </View>
 46 |       
 47 |     </View>
 48 |   );
 49 | };
 50 | 
 51 | const AddCard = () => {
 52 |   return (
 53 |     <View style={styles.AddCardContainer}>
 54 |       <View style={styles.AddCard}>
 55 |         <Text style={{ color: "#757575", fontWeight: 500 }}>Add Card</Text>
 56 |       </View>
 57 |     </View>
 58 |   );
 59 | };
 60 | 
 61 | const TopBtn = ({ selectedType, setSelectedType }) => {
 62 |   const handleCardTypePress = (type) => {
 63 |     setSelectedType(type);
 64 |   };
 65 | 
 66 |   return (
 67 |     <View style={{ flexDirection: "row" }}>
 68 |       <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
 69 |         <TouchableOpacity
 70 |           style={[
 71 |             styles.CardType,
 72 |             selectedType === "All Cards" && { backgroundColor: "#FA6E39" },
 73 |           ]}
 74 |           onPress={() => handleCardTypePress("All Cards")}
 75 |         >
 76 |           <Text
 77 |             style={[
 78 |               styles.TypeText,
 79 |               selectedType === "All Cards" && { color: "#fff" },
 80 |             ]}
 81 |           >
 82 |             All Cards
 83 |           </Text>
 84 |         </TouchableOpacity>
 85 |         <TouchableOpacity
 86 |           style={[
 87 |             styles.CardType,
 88 |             selectedType === "Debit" && { backgroundColor: "#FA6E39" },
 89 |           ]}
 90 |           onPress={() => handleCardTypePress("Debit")}
 91 |         >
 92 |           <Text
 93 |             style={[
 94 |               styles.TypeText,
 95 |               selectedType === "Debit" && { color: "#fff" },
 96 |             ]}
 97 |           >
 98 |             Debit Cards
 99 |           </Text>
100 |         </TouchableOpacity>
101 |         <TouchableOpacity
102 |           style={[
103 |             styles.CardType,
104 |             selectedType === "Credit" && { backgroundColor: "#FA6E39" },
105 |           ]}
106 |           onPress={() => handleCardTypePress("Credit")}
107 |         >
108 |           <Text
109 |             style={[
110 |               styles.TypeText,
111 |               selectedType === "Credit" && { color: "#fff" },
112 |             ]}
113 |           >
114 |             Credit Cards
115 |           </Text>
116 |         </TouchableOpacity>
117 |         <TouchableOpacity
118 |           style={[
119 |             styles.CardType,
120 |             selectedType === "Virtual" && { backgroundColor: "#FA6E39" },
121 |           ]}
122 |           onPress={() => handleCardTypePress("Virtual")}
123 |         >
124 |           <Text
125 |             style={[
126 |               styles.TypeText,
127 |               selectedType === "Virtual" && { color: "#fff" },
128 |             ]}
129 |           >
130 |             Virtual Cards
131 |           </Text>
132 |         </TouchableOpacity>
133 |       </ScrollView>
134 |     </View>
135 |   );
136 | };
137 | 
138 | const Wallet = () => {
139 |   const [selectedType, setSelectedType] = useState("All Cards");
140 |   const { width, height } = Dimensions.get('window');
141 |   const cssWidth = `${width}px`;
142 |   const cssHeight = height-100;
143 |   return (
144 |     <View style={{
145 |       flex: 1,
146 |       backgroundColor: "#111111",
147 |       width: "100%",
148 |       height: "100%",
149 |     }} >
150 | 
151 |     <View style={[styles.Wallet,{  maxHeight: cssHeight }]}>
152 |       <TopBtn selectedType={selectedType} setSelectedType={setSelectedType} />
153 |       <View>
154 |         <ScrollView
155 |           style={{ marginTop: 20, borderRadius: 20 ,borderBottomLeftRadius:40,borderBottomRightRadius:40, height: "100%" }}
156 |           showsVerticalScrollIndicator={false}
157 |         >
158 |           <AddCard />
159 | 
160 |           <Card Image={PurpleCard} />
161 |           <Card Image={OrangeCard} />
162 |           <Card Image={BlueCard} />
163 |           <Card Image={PurpleCard} />
164 |           <Card Image={OrangeCard} />
165 |           <Card Image={BlueCard} />
166 |           <Card Image={PurpleCard} />
167 | 
168 | 
169 |         </ScrollView>
170 |       </View>
171 |     </View>
172 |     </View>
173 |   );
174 | };
175 | 
176 | export default Wallet;
177 | 
178 | const styles = StyleSheet.create({
179 |   Wallet: {
180 |     flex: 1,
181 |     backgroundColor: "#111111",
182 |     width: "100%",
183 |     height: "100%",
184 |     paddingTop: 50,
185 |   },
186 |   CardType: {
187 |     backgroundColor: "#212325",
188 |     width: 140,
189 |     paddingVertical: 12,
190 |     borderRadius: 10,
191 |     marginHorizontal: 5,
192 |     alignItems: "center",
193 |   },
194 |   TypeText: {
195 |     fontWeight: 600,
196 |     color: "#656D72",
197 |   },
198 |   AddCard: {
199 |     width: "100%",
200 |     justifyContent: "center",
201 |     alignItems: "center",
202 |     padding: 10,
203 |     borderWidth: 1,
204 |     marginVertical: 20,
205 |     borderColor: "#646D73",
206 |     borderStyle: "dashed",
207 |     borderRadius: 10,
208 |   },
209 |   Card: {
210 |     alignItems: "center",
211 |     marginTop: 30,
212 |     justifyContent: "center",
213 |   },
214 |   cardimg: {
215 |     width: "100%",
216 |     height: 180,
217 |     borderRadius: 20,
218 | 
219 |   },
220 |   AddCardContainer: {
221 |     paddingHorizontal: 2,
222 | 
223 |   },
224 |   BalanceTitle:{
225 |     color:'#D6D6D6',
226 |     fontWeight:600,
227 |     fontSize:15
228 |   },
229 |   Balance:{
230 |     color:'#D6D6D6',
231 |     fontWeight:700,
232 |     fontSize:30,
233 |     marginTop:3
234 |   },
235 |   Master:{
236 |     height:60,
237 |     width:60,
238 |     marginBottom:-10
239 |   },
240 |   btmnav: {
241 |     position: 'absolute',
242 |     bottom: -10,
243 |     left: 10,
244 |     right: 10
245 |   }
246 | });
247 | 


--------------------------------------------------------------------------------
/Model/SendMoney.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Dimensions,
  3 |   Image,
  4 |   StyleSheet,
  5 |   Text,
  6 |   TextInput,
  7 |   TouchableOpacity,
  8 |   View,
  9 | } from "react-native";
 10 | import React, { useState } from "react";
 11 | import more from "../assets/Navigation/more.png";
 12 | import back from "../assets/Navigation/back.png";
 13 | import next from "../assets/Navigation/next.png";
 14 | import del from "../assets/Navigation/del.png";
 15 | import user from "../assets/avatar/a1.png";
 16 | 
 17 | 
 18 | 
 19 | 
 20 | const SendDetails = ({number}) =>{
 21 |   const { width, height } = Dimensions.get('window');
 22 |   const cssWidth = `${width}px`;
 23 |   const cssHeight = height-200;
 24 |   return(
 25 |     <View style={[styles.SendDetails,{height:cssHeight }]}>
 26 |       <View style={styles.SenderCard}>
 27 |         <View style={{flexDirection:'row',alignItems:'center',gap:10}}>
 28 |         <Image style={styles.UserImage} source={user}/>
 29 | <View>
 30 |   <Text style={styles.SenderName}>Salman Rizwan</Text>
 31 |   <Text style={styles.SenderId}>8978 89** ****</Text>
 32 | 
 33 | </View>
 34 |         </View>
 35 |      
 36 |         <Image style={styles.NextBtn} source={next}/>
 37 |       </View>
 38 | <View style={{flexDirection:'row',justifyContent:'center'}}>
 39 | <Text  style={styles.AmountInput}>$</Text>
 40 |                   
 41 |                   <TextInput value={number} style={styles.AmountInput} />
 42 | </View>
 43 |                  
 44 | 
 45 |     </View>
 46 |   )
 47 | }
 48 | 
 49 | const CustomNumberPad = ({handleNumberPress,handleDeletePress}) => { 
 50 | 
 51 |   
 52 | 
 53 |   return (
 54 |     <View style={styles.NumPad}>
 55 |       <View
 56 |         style={{
 57 |           width: "100%",
 58 |           justifyContent: "flex-start",
 59 |           padding: 20,
 60 |           gap: 5,
 61 |         }}
 62 |       >
 63 |         
 64 |         <View
 65 |           style={{
 66 |             flexDirection: "row",
 67 |             justifyContent: "space-between",
 68 |             width: "100%",
 69 |           }}
 70 |         >
 71 |           <TouchableOpacity
 72 |             style={styles.NumBtn}
 73 |             onPress={() => handleNumberPress(1)}
 74 |           >
 75 |             <Text style={styles.NumText}>1</Text>
 76 |           </TouchableOpacity>
 77 |           <TouchableOpacity
 78 |             style={styles.NumBtn}
 79 |             onPress={() => handleNumberPress(2)}
 80 |           >
 81 |             <Text style={styles.NumText}>2</Text>
 82 |           </TouchableOpacity>
 83 |           <TouchableOpacity
 84 |             style={styles.NumBtn}
 85 |             onPress={() => handleNumberPress(3)}
 86 |           >
 87 |             <Text style={styles.NumText}>3</Text>
 88 |           </TouchableOpacity>
 89 |         </View>
 90 |         <View
 91 |           style={{
 92 |             flexDirection: "row",
 93 |             justifyContent: "space-between",
 94 |             width: "100%",
 95 |           }}
 96 |         >
 97 |           <TouchableOpacity
 98 |             style={styles.NumBtn}
 99 |             onPress={() => handleNumberPress(4)}
100 |           >
101 |             <Text style={styles.NumText}>4</Text>
102 |           </TouchableOpacity>
103 |           <TouchableOpacity
104 |             style={styles.NumBtn}
105 |             onPress={() => handleNumberPress(5)}
106 |           >
107 |             <Text style={styles.NumText}>5</Text>
108 |           </TouchableOpacity>
109 |           <TouchableOpacity
110 |             style={styles.NumBtn}
111 |             onPress={() => handleNumberPress(6)}
112 |           >
113 |             <Text style={styles.NumText}>6</Text>
114 |           </TouchableOpacity>
115 |         </View>
116 |         <View
117 |           style={{
118 |             flexDirection: "row",
119 |             justifyContent: "space-between",
120 |             width: "100%",
121 |           }}
122 |         >
123 |           <TouchableOpacity
124 |             style={styles.NumBtn}
125 |             onPress={() => handleNumberPress(7)}
126 |           >
127 |             <Text style={styles.NumText}>7</Text>
128 |           </TouchableOpacity>
129 |           <TouchableOpacity
130 |             style={styles.NumBtn}
131 |             onPress={() => handleNumberPress(8)}
132 |           >
133 |             <Text style={styles.NumText}>8</Text>
134 |           </TouchableOpacity>
135 |           <TouchableOpacity
136 |             style={styles.NumBtn}
137 |             onPress={() => handleNumberPress(9)}
138 |           >
139 |             <Text style={styles.NumText}>9</Text>
140 |           </TouchableOpacity>
141 |         </View>
142 |         <View
143 |           style={{
144 |             flexDirection: "row",
145 |             justifyContent: "space-between",
146 |             width: "100%",
147 |           }}
148 |         >
149 |           <TouchableOpacity
150 |             style={styles.NumBtn}
151 |             onPress={() => handleNumberPress('.')}
152 |           >
153 |             <Text style={styles.NumText}>.</Text>
154 |           </TouchableOpacity>
155 |           <TouchableOpacity
156 |             style={styles.NumBtn}
157 |             onPress={() => handleNumberPress(0)}
158 |           >
159 |             <Text style={styles.NumText}>0</Text>
160 |           </TouchableOpacity>
161 |           <TouchableOpacity
162 |             style={styles.NumBtn}
163 |             onPress={() => handleDeletePress()}
164 |           >
165 |             <Image source={del} style={{width:18,height:18}}/>
166 |           </TouchableOpacity>
167 |         </View>
168 |         
169 |         
170 |         <View style={styles.SendBtn}>
171 |           <Text style={styles.SendTxt}>Send</Text>
172 |         </View>
173 |       </View>
174 |     </View>
175 |   );
176 | };
177 | 
178 | const SendMoney = ({ navigation }) => {
179 |   const [number, setNumber] = useState("10.00");
180 | 
181 |   const handleNumberPress = (digit) => {
182 |     setNumber(number + digit);
183 |   };
184 | 
185 |   const handleDeletePress = () => {
186 |     setNumber(number.slice(0, -1));
187 |   };
188 | 
189 |   return (
190 |     <View style={styles.SendMoney}>
191 |       <View style={styles.TopBar}>
192 |       <TouchableOpacity onPress={() => navigation.navigate("Home")}>
193 |           <View style={styles.BellContiner}>
194 |             <Image style={styles.BellImg} source={back} />
195 |           </View>
196 |         </TouchableOpacity>
197 | 
198 |         <Text style={styles.Analytics}>Send Money</Text>
199 |         <TouchableOpacity onPress={() => navigation.navigate("Home")}>
200 |           <View style={styles.BellContiner}>
201 |             <Image style={styles.BellImg} source={more} />
202 |           </View>
203 |         </TouchableOpacity>
204 |       </View>
205 |       <View>
206 | 
207 |       <SendDetails number={number} style={styles.SendDetailContainer}/>
208 |         </View>
209 |       <CustomNumberPad handleDeletePress={handleDeletePress} handleNumberPress={handleNumberPress} setNumber={setNumber}/>
210 |     </View>
211 |   );
212 | };
213 | 
214 | export default SendMoney;
215 | 
216 | const styles = StyleSheet.create({
217 |   SendMoney: {
218 |     backgroundColor: "#111111",
219 |     flex: 1,
220 |   },
221 |   NumPad: {
222 |     position: "absolute",
223 |     bottom: 20,
224 |     width: "100%",
225 |     backgroundColor: "#fff",
226 |     borderRadius: 40,
227 |   },
228 |   NumBtn: {
229 |     width: "32%",
230 |     height: 50,
231 |     backgroundColor: "#F6F6F6",
232 |     justifyContent: "center",
233 |     alignItems: "center",
234 |     borderRadius: 60,
235 |   },
236 |   NumText: {
237 |     fontSize: 22,
238 |     fontWeight: 400,
239 |   },
240 |   SendBtn: {
241 |     width: "100%",
242 |     justifyContent: "center",
243 |     alignItems: "center",
244 |     backgroundColor: "#F86E36",
245 |     height: 50,
246 |     borderRadius: 50,
247 |     marginTop: 10,
248 |   },
249 |   SendTxt: {
250 |     fontSize: 16,
251 |     fontWeight: 600,
252 |     color: "#fff",
253 |   },
254 |   BellImg: {
255 |     width: 24,
256 |     height: 24,
257 |   },
258 |   BellContiner: {
259 |     width: 40,
260 |     height: 40,
261 |     backgroundColor: "#3C3C3C",
262 |     justifyContent: "center",
263 |     alignItems: "center",
264 |     borderRadius: 30,
265 |   },
266 |   leftbtn: {
267 |     width: 40,
268 |     height: 40,
269 |   },
270 |   TopBar: {
271 |     paddingTop: 40,
272 |     flexDirection: "row",
273 |     justifyContent: "space-between",
274 |     alignItems: "center",
275 |   },
276 |   Analytics: {
277 |     fontSize: 20,
278 |     color: "#fff",
279 |   },
280 |   SendDetails:{
281 |     width:"100%",
282 |     backgroundColor:'#2B2B2B',
283 |     borderRadius:20,
284 |     marginTop:30,
285 |     marginBottom:-100,
286 |     alignItems:'center',
287 |     paddingTop:10,
288 |     paddingHorizontal:10
289 | 
290 |   },
291 |   AmountInput:{
292 |     fontSize:50,
293 |     fontWeight:600,
294 |     color:'#fff',
295 |   },
296 |   SenderCard:{
297 |     width:'100%',
298 |     backgroundColor:'#4A4949',
299 |     borderRadius:15,
300 |     marginBottom:80,
301 |     flexDirection:'row',
302 |     justifyContent:'space-between',
303 |     alignItems:'center',
304 |     padding:10,
305 | 
306 |   },
307 |   NextBtn:{
308 |     width:30,
309 |     height:30
310 |   },
311 |   UserImage:{
312 |     width:50,
313 |     height:50,
314 |     borderRadius:40
315 |   },
316 |   SenderName:{
317 |     fontSize:18,
318 |     fontWeight:500,
319 |     color:'#F2F4F2'
320 |   },
321 |   SenderId:{
322 |     fontSize:13,
323 |     color:'#757575',
324 |     marginTop:2
325 |   }
326 | });
327 | 


--------------------------------------------------------------------------------
/Model/Home.jsx:
--------------------------------------------------------------------------------
  1 | import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
  2 | import React, { useState } from "react";
  3 | import userimg from "../assets/user.jpg";
  4 | import bell from "../assets/bell.png";
  5 | import send from "../assets/send.png";
  6 | import rec from "../assets/rec.png";
  7 | import menuicon from "../assets/menu.png";
  8 | import food from "../assets/burger.png";
  9 | import a1 from "../assets/avatar/a1.png";
 10 | import a2 from "../assets/avatar/a2.png";
 11 | import a3 from "../assets/avatar/a3.png";
 12 | import a4 from "../assets/avatar/a4.png";
 13 | import a5 from "../assets/avatar/a5.png";
 14 | import grocery from "../assets/transactions/grocery.png"
 15 | import phone from "../assets/transactions/phone.png"
 16 | import fashion from "../assets/transactions/fashion.png"
 17 | import pizza from "../assets/transactions/pizza.png"
 18 | import { useNavigation } from "@react-navigation/native";
 19 | import BottomNav from "./BottomNav";
 20 | 
 21 | 
 22 | 
 23 | 
 24 | const Home = () => {
 25 |   const [balance, setBalance] = useState(0);
 26 |   const [balanceFloat, setBalanceFloat] = useState("70");
 27 |   const [balanceNoFloat, setBalancebalanceNoFloat] = useState("5672");
 28 | 
 29 |   const TopBtn = (props)=> {
 30 |     return (
 31 |       <View style={styles.TopBtn}>
 32 |         <View style={styles.IconRound}>
 33 |         <Image style={styles.SendImg} source={props.imageSource} />
 34 | 
 35 |         </View>
 36 |         <Text style={styles.SendTitle}>{props.name}</Text>
 37 |       </View>
 38 |     );
 39 |   };
 40 |   const Sender = (props)=> {
 41 |     const navigation = useNavigation();
 42 | 
 43 |     return (
 44 |       <View style={{alignItems:'center',gap:10}}>
 45 |         <TouchableOpacity onPress={()=>navigation.navigate('Send')} style={{alignItems:'center',gap:5}}>
 46 |         <Image style={styles.SenderImg} source={props.senderImage} />
 47 |               
 48 | 
 49 |         <Text style={styles.SenderName}>{props.senderName}</Text>
 50 |         </TouchableOpacity>
 51 |       </View>
 52 |     );
 53 |   };
 54 |   const Transaction = (props)=> {
 55 |     return (
 56 |         <View style={{width:'100%'}}>
 57 |       <View style={{alignItems:'center',width:'100%',gap:5,flexDirection:'row',justifyContent:'space-between'}}>
 58 |        
 59 |         <View style={{flexDirection:'row',alignItems:'center',gap:10}}>
 60 |             <View style={styles.TransactionIconContainer}>
 61 |         <Image style={styles.TransactionIcon} source={props.TransactionIcon} />
 62 |         </View>
 63 | 
 64 |         <View>
 65 |         <Text style={styles.TransactionTitle}>{props.TransactionTitle}</Text>
 66 |         <View style={{flexDirection:'row', gap:5}}>
 67 |         <Text style={styles.TransactionDate}>{props.TransactionDate}</Text>
 68 |         <Text style={styles.TransactionTime}>• {props.TransactionTime}</Text>
 69 | 
 70 |         </View>
 71 |         
 72 |         </View>
 73 |         </View>
 74 |         <View style={{flexDirection:'row'}}>
 75 |           <Text style={[styles.TransactionAmount,{color:'#F26F2E'}]}>$</Text>
 76 |         <Text style={styles.TransactionAmount}>{props.TransactionAmount}</Text>
 77 | 
 78 |         </View>
 79 |       </View>
 80 |       <View style={styles.TransactionLine}></View>
 81 |         </View>
 82 |     );
 83 |   };
 84 | 
 85 |   return (
 86 |     <View style={styles.home}>
 87 |                 
 88 | 
 89 |       <View style={styles.TopBar}>
 90 |         <View style={{ flexDirection: "row", alignItems: "center" }}>
 91 |           <Image style={styles.UserImg} source={userimg} />
 92 |           <View>
 93 |             <Text style={styles.GreetMsg}>Good Morning</Text>
 94 |             <Text style={styles.UserName}>Dinith Perera</Text>
 95 |           </View>
 96 |         </View>
 97 |         <View style={styles.BellContiner}>
 98 |           <Image style={styles.BellImg} source={bell} />
 99 |         </View>
100 |       </View>
101 |       <View style={styles.BalanceView}>
102 |         <Text style={styles.BalanceTitle}>Your Balance</Text>
103 |         <View style={{ flexDirection: "row" }}>
104 |           <Text style={styles.Balance}>${balanceNoFloat}.</Text>
105 |           <Text style={[styles.Balance, { color: "#6E6E6E" }]}>
106 |             {balanceFloat}
107 |           </Text>
108 |         </View>
109 |       </View>
110 |       <View style = {{flexDirection:'row', gap:10}}>
111 |       <TopBtn name={"Send"} imageSource={send}/>
112 |       <TopBtn name={"Recieve"} imageSource={rec}/>
113 |       <View style={styles.MenuContainer}>
114 |       <Image style={styles.SendImg} source={menuicon} />
115 | 
116 |       </View>
117 |       </View>
118 |       <View style={styles.QuickSend}>
119 |         <Text style={styles.QuickSendTitle}> 
120 |             Quick Send
121 |         </Text>
122 |         <View style={{flexDirection:'row', justifyContent:'space-between'}}>
123 |         <Sender senderName ="Dinith" senderImage={a1}/>
124 |         <Sender senderName ="Salman"  senderImage={a2}/>
125 |         <Sender senderName ="Amashi" senderImage={a3}/>
126 |         <Sender senderName ="Imesh" senderImage={a4}/>
127 |         <Sender senderName ="Ahnaf"senderImage={a5}/>
128 | 
129 |        
130 |         
131 |         </View>
132 |       </View>
133 |       <ScrollView contentContainerStyle={styles.transcontainer}       scrollEnabled={false}>
134 |       <View style={styles.content}>
135 |       <View style={styles.RecentTransaction}>
136 |         <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'flex-end'}}>
137 |       <Text style={styles.RecentTransactionTitle} >
138 |         Recent Transactions
139 |       </Text>
140 |       <Text style={styles.SeeAll} >
141 |         See all
142 |       </Text>
143 |       </View>
144 |       <View style={styles.TransactionCol}>
145 |       <Transaction TransactionTitle ="Keells Super" 
146 |       TransactionDate='Tue,25 May'
147 |       TransactionTime='4:40 PM'
148 |       TransactionIcon={grocery}
149 |       TransactionAmount="120.20"/>
150 |        <Transaction TransactionTitle ="The Mobiway" 
151 |       TransactionDate='Mon,18 May'
152 |       TransactionTime='12:10 PM'
153 |       TransactionIcon={phone}
154 |       TransactionAmount="76.20"/> 
155 |       <Transaction TransactionTitle ="ODEL" 
156 |       TransactionDate='Wed,12 May'
157 |       TransactionTime='2:49 AM'
158 |       TransactionIcon={fashion}
159 |       TransactionAmount="180.90"/> 
160 |       <Transaction TransactionTitle ="Pizza Hut" 
161 |       TransactionDate='Sun,5 January'
162 |       TransactionIcon={pizza}
163 |       TransactionTime='1:19 AM'
164 |       TransactionAmount="13.00"/>
165 |       
166 |       </View>
167 | 
168 |       </View>
169 | 
170 | <View >
171 |       
172 |       </View>
173 |       </View>
174 |     </ScrollView>   
175 | 
176 | 
177 | 
178 |     </View>
179 |   );
180 | };
181 | 
182 | export default Home;
183 | 
184 | const styles = StyleSheet.create({
185 |   home: {
186 |     flex: 1,
187 |     backgroundColor: "#111111",
188 |     width: "100%",
189 |     height: "100%",
190 |     paddingTop: 50,
191 | 
192 |   },
193 |   TopBar: {
194 |     flexDirection: "row",
195 |     alignItems: "center",
196 |     justifyContent: "space-between",
197 |   },
198 |   UserImg: {
199 |     width: 40,
200 |     height: 40,
201 |     borderRadius: 40,
202 |     marginRight: 10,
203 |   },
204 |   GreetMsg: {
205 |     color: "#767675",
206 |     fontSize: 12,
207 |   },
208 |   UserName: {
209 |     color: "#fff",
210 |     fontSize: 16,
211 |     fontWeight: 500,
212 |   },
213 |   BellImg: {
214 |     width: 24,
215 |     height: 24,
216 |   },
217 |   BellContiner: {
218 |     width: 40,
219 |     height: 40,
220 |     backgroundColor: "#3C3C3C",
221 |     justifyContent: "center",
222 |     alignItems: "center",
223 |     borderRadius: 30,
224 |   },
225 |   BalanceView: {
226 |     marginVertical: 20,
227 |     marginTop:40,
228 |   },
229 |   BalanceTitle: {
230 |     color: "#767675",
231 |     fontSize: 16,
232 |     marginBottom: 5,
233 |   },
234 |   Balance: {
235 |     color: "#fff",
236 |     fontSize: 46,
237 |     fontWeight: 500,
238 |   },
239 |   TopBtn: {
240 |     Width:110,
241 |     height: 40,
242 |     backgroundColor: "#F26F2F",
243 |     borderRadius: 30,
244 |     alignItems:'center',
245 |     paddingHorizontal:4,
246 |     flexDirection:'row',
247 |     
248 |   },
249 |   IconRound:{
250 |     backgroundColor:'#EC8B6A',
251 |     width: 32,
252 |     height: 32,
253 |     borderRadius: 30,
254 |     justifyContent:'center',
255 |     alignItems:'center'
256 | 
257 |   },
258 |     SendImg:{
259 |         width: 20,
260 |     height: 20,
261 |     },
262 |     SendTitle:{
263 |         color:'#fff',
264 |         fontSize:16,
265 |         fontWeight:600,
266 |        marginHorizontal:20
267 | 
268 |     },
269 |     MenuContainer:{
270 |         width: 39,
271 |     height: 39,
272 |     justifyContent:'center',
273 |     alignItems:'center',
274 |     backgroundColor:'#5D5D5D',
275 |     borderRadius:30,
276 |     borderWidth:1,
277 |     borderColor:'#fff'
278 |     },
279 |     QuickSend:{
280 |         width:'100%',
281 |         height:160,
282 |         backgroundColor:'#292929',
283 |         borderTopStartRadius:20,
284 |         borderTopEndRadius:20,
285 |         marginTop:20,
286 |         paddingTop:20,
287 |         paddingHorizontal:15,
288 |         marginBottom:-20
289 | 
290 |     },
291 |     QuickSendTitle:{
292 |         fontSize:15,
293 |         fontWeight:500,
294 |         color:'#fff',
295 |         opacity:0.8,
296 |         marginBottom:15
297 |     },
298 |     SenderImg:{
299 |         width:45,
300 |         height:45,
301 |         borderRadius:40
302 |     },
303 |     SenderName:{
304 |         fontSize:12,
305 |         fontWeight:500,
306 |         color:'#fff',
307 |         opacity:0.8,
308 |         marginBottom:15
309 |     },
310 |     RecentTransaction:{
311 |         width:'100%',
312 |         height:'100%',
313 |         justifyContent:'flex-start'
314 |     },
315 | 
316 | 
317 |     transcontainer: {
318 |         flexGrow: 1,
319 |         borderTopStartRadius:20,
320 |         borderTopEndRadius:20,
321 |         backgroundColor: '#fff',
322 |         borderBottomLeftRadius: 40,
323 |         borderBottomRightRadius: 40,
324 |         justifyContent: 'flex-start',
325 |       },
326 |       content: {
327 |         flexDirection: 'column',
328 |         paddingTop: 20,
329 |         paddingHorizontal: 15,
330 |       },
331 |       RecentTransactionTitle:{
332 |         fontSize:15,
333 |         fontWeight:600,
334 |         color:'#707070',
335 |       },
336 |       SeeAll:{
337 |         fontSize:13,
338 |         color:'#707070'
339 |       },
340 |       TransactionCol:{
341 |         alignItems:'flex-start',
342 |         paddingTop:30,
343 |         gap:10,
344 | 
345 |       },
346 |       TransactionTitle:{
347 |         fontSize:16,
348 |         fontWeight:600
349 |       },
350 |         TransactionDate:{
351 |             fontSize:11,
352 |             color:'#707070'
353 | 
354 |         },
355 |         TransactionTime:{
356 |             fontSize:11,
357 |             color:'#707070'
358 | 
359 |         },
360 |         TransactionAmount:{
361 |             fontSize:18,
362 |             fontWeight:600
363 |         },
364 |         TransactionLine:{
365 |             width:'100%',
366 |             backgroundColor:'#707070',
367 |             height:1,
368 |             marginTop:10,
369 |             opacity:0.1
370 |         },
371 |         TransactionIconContainer:{
372 |             width:40,
373 |             height:40,
374 |             backgroundColor:'#D0D1CF',
375 |       borderRadius:40,
376 |             justifyContent:'center',
377 |             alignItems:'center'
378 |         },
379 |         TransactionIcon:{
380 |             width:20,
381 |             height:20,
382 |         }
383 |     });


--------------------------------------------------------------------------------
/Model/Statistic.jsx:
--------------------------------------------------------------------------------
  1 | import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
  2 | import React from "react";
  3 | import bell from "../assets/bell.png";
  4 | import apple from "../assets/apple.png";
  5 | import pizza from "../assets/pizzaa.png";
  6 | import keells from "../assets/keells.png";
  7 | import more from "../assets/Navigation/more.png";
  8 | 
  9 | 
 10 | const BottomBar = (props) => {
 11 |   return (
 12 |     <View style={styles.BottomBar}>
 13 |       <View style={styles.BottomBarSecondery}></View>
 14 |     </View>
 15 |   );
 16 | };
 17 | 
 18 | const BillsDue = (props) => {
 19 |   return (
 20 |     <View style={styles.BillsDue}>
 21 |             <ScrollView showsVerticalScrollIndicator={false}>
 22 | 
 23 |       <View
 24 |         style={{
 25 |           paddingHorizontal: 15,
 26 |           flexDirection: "row",
 27 |           justifyContent: "space-between",
 28 |           marginBottom: 20,
 29 | 
 30 |         }}
 31 |       >
 32 |         <Text style={styles.BillsDueTitle}>Bills due</Text>
 33 |         <View style={styles.AddBill}>
 34 |           <Text style={styles.AddBillTitle}>+ Add a Bill</Text>
 35 |         </View>
 36 |       </View>
 37 | 
 38 |         <View
 39 |           style={{
 40 |             paddingHorizontal: 10,
 41 |             gap: 10,
 42 |           }}
 43 |         >
 44 |           <Bill BillImage={keells} PayerName={'Keells'} PayerType={'Shoping'}/>
 45 |           <Bill BillImage={pizza} PayerName={'Pizza Hut'} PayerType={'Food'}/>
 46 |           <Bill BillImage={apple} PayerName={'Apple'} PayerType={'Shopping'}/>
 47 |           <Bill BillImage={keells} PayerName={'Keells'} PayerType={'Shoping'}/>
 48 |           <Bill BillImage={pizza} PayerName={'Pizza'} PayerType={'Food'}/>
 49 |           <Bill BillImage={apple} PayerName={'Apple'} PayerType={'Shopping'}/>
 50 |           <Bill BillImage={keells} PayerName={'Keells'} PayerType={'Shoping'}/>
 51 |           <Bill BillImage={pizza} PayerName={'Pizza'} PayerType={'Food'}/>
 52 |           <Bill BillImage={apple} PayerName={'Apple'} PayerType={'Shopping'}/><Bill BillImage={keells} PayerName={'Keells'} PayerType={'Shoping'}/>
 53 |           <Bill BillImage={pizza} PayerName={'Pizza'} PayerType={'Food'}/>
 54 |           <Bill BillImage={apple} PayerName={'Apple'} PayerType={'Shopping'}/>
 55 | 
 56 |         </View>
 57 |       </ScrollView>
 58 |     </View>
 59 |   );
 60 | };
 61 | const Bill = (props) => {
 62 |   return (
 63 |     <View style={styles.Bill}>
 64 |       <View style={{ flexDirection: "row", alignItems: "center",justifyContent:'space-between'}}>
 65 |       <View style={{flexDirection:'row', gap: 10 ,}}>
 66 | 
 67 |         <Image style={[styles.apple,{borderRadius:10}]} source={props.BillImage}></Image>
 68 |         <View style={{ gap: 2 }}>
 69 |           <Text style={styles.PayerName}>{props.PayerName}</Text>
 70 |           <Text style={styles.PayerType}>{props.PayerType}</Text>
 71 |         </View>
 72 |         </View>
 73 |         <View style={{flexDirection:'row',alignItems:'flex-end'}}>
 74 |         <Text style={[styles.PaymentVal,{color:'#FA6E39'}]}>$</Text>
 75 |         <Text style={styles.PaymentVal}>120.</Text>
 76 |         <Text style={[styles.PaymentVal,{color:'#757574',fontSize:16}]}>00</Text>
 77 | 
 78 |         </View>
 79 | 
 80 |       </View>
 81 |       <View
 82 |         style={{
 83 |           flexDirection: "row",
 84 |           alignItems: "center",
 85 |           justifyContent: "space-between",
 86 |           marginTop: 5,
 87 |         }}
 88 |       >
 89 |         <View>
 90 |           <Text style={styles.SubVal}>Date</Text>
 91 |           <Text style={styles.SubTitle}>13/07/23</Text>
 92 |         </View>
 93 |         <View>
 94 |           <Text style={styles.SubVal}>Subcategory</Text>
 95 |           <Text style={styles.SubTitle}>Tech</Text>
 96 |         </View>
 97 |         <View>
 98 |           <Text style={styles.SubVal}>Bank</Text>
 99 |           <Text style={styles.SubTitle}>Com Bank</Text>
100 |         </View>
101 |       </View>
102 |     </View>
103 |   );
104 | };
105 | 
106 | const DottedBar = (props) => {
107 |   const { bottom } = props;
108 | 
109 |   return (
110 |     <View
111 |       style={{
112 |         borderWidth: 1,
113 |         borderStyle: "dashed",
114 |         borderColor: "black",
115 |         borderRadius: 1,
116 |         width: "100%",
117 |         position: "absolute",
118 |         opacity: 0.2,
119 |         bottom: bottom,
120 |       }}
121 |     />
122 |   );
123 | };
124 | 
125 | const GraphCard = () => {
126 |   return (
127 |     <View style={styles.GraphCard}>
128 |       <View style={styles.ToggleBar}>
129 |         <View style={styles.ToggleBtn}>
130 |           <Text>W</Text>
131 |         </View>
132 |         <View style={styles.ToggleBtnActive}>
133 |           <Text style={{ color: "#fff" }}>M</Text>
134 |         </View>
135 |         <View style={styles.ToggleBtn}>
136 |           <Text>Y</Text>
137 |         </View>
138 |       </View>
139 |       <DottedBar bottom={250} />
140 |       <DottedBar bottom={220} />
141 |       <DottedBar bottom={190} />
142 |       <DottedBar bottom={160} />
143 |       <DottedBar bottom={130} />
144 |       <DottedBar bottom={100} />
145 |       <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
146 |         <View
147 |           style={{ padding: 20, flexDirection: "row", alignContent: "center" }}
148 |         >
149 |           <GraphLine
150 |             earnLineHeight={100}
151 |             spendLineHeight={50}
152 |             MonthName={"Jan"}
153 |           />
154 |           <GraphLine
155 |             earnLineHeight={80}
156 |             spendLineHeight={60}
157 |             MonthName={"Feb"}
158 |           />
159 |           <GraphLine
160 |             earnLineHeight={110}
161 |             spendLineHeight={76}
162 |             MonthName={"Mar"}
163 |           />
164 |           <GraphLine
165 |             earnLineHeight={135}
166 |             spendLineHeight={85}
167 |             MonthName={"Apr"}
168 |           />
169 |           <GraphLine
170 |             earnLineHeight={55}
171 |             spendLineHeight={34}
172 |             MonthName={"May"}
173 |           />
174 |           <GraphLine
175 |             earnLineHeight={90}
176 |             spendLineHeight={76}
177 |             MonthName={"Jun"}
178 |           />
179 |           <GraphLine
180 |             earnLineHeight={130}
181 |             spendLineHeight={80}
182 |             MonthName={"Jul"}
183 |           />
184 |           <GraphLine
185 |             earnLineHeight={120}
186 |             spendLineHeight={67}
187 |             MonthName={"Aug"}
188 |           />
189 |           <GraphLine
190 |             earnLineHeight={100}
191 |             spendLineHeight={50}
192 |             MonthName={"Sep"}
193 |           />
194 |           <GraphLine
195 |             earnLineHeight={140}
196 |             spendLineHeight={90}
197 |             MonthName={"Oct"}
198 |           />
199 |           <GraphLine
200 |             earnLineHeight={100}
201 |             spendLineHeight={50}
202 |             MonthName={"Nov"}
203 |           />
204 |           <GraphLine
205 |             earnLineHeight={100}
206 |             spendLineHeight={50}
207 |             MonthName={"Dec"}
208 |           />
209 |         </View>
210 |       </ScrollView>
211 |       <View
212 |         style={{
213 |           flexDirection: "row",
214 |           alignSelf: "center",
215 |           marginBottom: 30,
216 |           alignItems: "center",
217 |         }}
218 |       >
219 |         <View
220 |           style={{
221 |             width: 12,
222 |             height: 12,
223 |             borderRadius: 12,
224 |             backgroundColor: "#FA6F39",
225 |             marginRight: 10,
226 |           }}
227 |         />
228 |         <Text
229 |           style={{
230 |             marginRight: 20,
231 |             fontSize: 12,
232 |           }}
233 |         >
234 |           Earned
235 |         </Text>
236 |         <View
237 |           style={{
238 |             width: 12,
239 |             height: 12,
240 |             borderRadius: 12,
241 |             backgroundColor: "#111111",
242 |             marginRight: 10,
243 |           }}
244 |         />
245 |         <Text
246 |           style={{
247 |             marginRight: 20,
248 |             fontSize: 12,
249 |           }}
250 |         >
251 |           Spent
252 |         </Text>
253 |       </View>
254 |     </View>
255 |   );
256 | };
257 | 
258 | const GraphLine = (props) => {
259 |   const { earnLineHeight, spendLineHeight, MonthName } = props;
260 | 
261 |   return (
262 |     <View style={styles.GraphLine}>
263 |       <View style={[styles.EarnLine, { height: earnLineHeight }]}>
264 |         <View style={[styles.SpendLine, { height: spendLineHeight }]}></View>
265 |       </View>
266 | 
267 |       <Text style={styles.MonthName}>{props.MonthName}</Text>
268 |     </View>
269 |   );
270 | };
271 | 
272 | const Statistic = () => {
273 |   return (
274 |     <View style={styles.Stat}>
275 |       <View style={styles.TopBar}>
276 |         <View style={styles.leftbtn}></View>
277 | 
278 |         <Text style={styles.Analytics}>Analytics</Text>
279 |         <View style={styles.BellContiner}>
280 |           <Image style={styles.BellImg} source={more} />
281 |         </View>
282 |       </View>
283 |       <ScrollView showsVerticalScrollIndicator={false} style={{marginTop:10,borderRadius:20,marginBottom:-100}}>
284 |       <GraphCard />
285 |       <BillsDue />
286 |       </ScrollView>
287 |       <BottomBar />
288 |     </View>
289 |   );
290 | };
291 | 
292 | export default Statistic;
293 | 
294 | const styles = StyleSheet.create({
295 |   Stat: {
296 |     flex: 1,
297 |     backgroundColor: "#111111",
298 |   },
299 |   BellImg: {
300 |     width: 24,
301 |     height: 24,
302 |   },
303 |   BellContiner: {
304 |     width: 40,
305 |     height: 40,
306 |     backgroundColor: "#3C3C3C",
307 |     justifyContent: "center",
308 |     alignItems: "center",
309 |     borderRadius: 30,
310 |   },
311 |   leftbtn: {
312 |     width: 40,
313 |     height: 40,
314 |   },
315 |   TopBar: {
316 |     paddingTop: 50,
317 |     flexDirection: "row",
318 |     justifyContent: "space-between",
319 |     alignItems: "center",
320 |   },
321 |   Analytics: {
322 |     fontSize: 20,
323 |     color: "#fff",
324 | 
325 |   },
326 |   GraphCard: {
327 |     width: "100%",
328 |     height: 300,
329 |     backgroundColor: "#fff",
330 |     marginTop: 40,
331 |     borderRadius: 20,
332 |     
333 |   },
334 |   ToggleBar: {
335 |     width: 130,
336 |     alignSelf: "center",
337 |     height: 50,
338 |     backgroundColor: "#fff",
339 |     marginTop: -20,
340 |     borderRadius: 50,
341 |     borderColor: "#111111",
342 |     borderWidth: 5,
343 |     flexDirection: "row",
344 |     justifyContent: "space-between",
345 |     alignItems: "center",
346 |     paddingHorizontal: 5,
347 |   },
348 |   ToggleBtn: {
349 |     width: 35,
350 |     height: 35,
351 |     justifyContent: "center",
352 |     alignItems: "center",
353 |     borderRadius: 30,
354 |   },
355 |   ToggleBtnActive: {
356 |     width: 35,
357 |     height: 35,
358 |     justifyContent: "center",
359 |     alignItems: "center",
360 |     borderRadius: 30,
361 |     backgroundColor: "#FA6E39",
362 |   },
363 |   GraphLine: {
364 |     height: 200,
365 |     justifyContent: "flex-end",
366 |     alignItems: "center",
367 |     marginRight: 13,
368 |     paddingBottom: 25,
369 |   },
370 |   EarnLine: {
371 |     backgroundColor: "#FA6F39",
372 |     width: 9,
373 |     borderRadius: 10,
374 |     justifyContent: "flex-end",
375 |     alignItems: "center",
376 |     position: "absolute",
377 |     bottom: 50,
378 |   },
379 |   SpendLine: {
380 |     backgroundColor: "#111111",
381 |     width: 9,
382 |     borderRadius: 10,
383 |   },
384 |   MonthName: {
385 |     fontSize: 12,
386 |     color: "#404040",
387 |   },
388 |   BillsDue: {
389 |     flexGrow: 1,
390 |     height:'100%',
391 |     width: "100%",
392 |     backgroundColor: "#fff",
393 |     borderRadius: 20,
394 |     justifyContent: "flex-start",
395 |     marginTop: 20,
396 | 
397 |     paddingTop: 20,
398 |   },
399 |   Bill: {
400 |     backgroundColor: "#F6F6F6",
401 |     boxShadow: 10,
402 |     width: "100%",
403 |     borderRadius: 15,
404 |     padding: 15,
405 |     gap: 10,
406 |     shadowColor: '#171717',
407 |     shadowOffset: {width: -2, height: 3},
408 |     shadowOpacity: 0.2,
409 |     shadowRadius: 3,
410 |   },
411 |   BillsDueTitle: {
412 |     fontSize: 15,
413 |     fontWeight: 600,
414 |     color: "#757574",
415 |   },
416 |   AddBill: {
417 |     borderWidth: 1,
418 |     paddingHorizontal: 10,
419 |     paddingVertical: 3,
420 |     borderRadius: 20,
421 |     flexDirection: "row",
422 |   },
423 |   AddBillTitle: {
424 |     fontSize: 12,
425 |   },
426 |   apple: {
427 |     width: 40,
428 |     height: 40,
429 |   },
430 |   BottomBar: {
431 |     width: "100%",
432 |     height: 60,
433 |     position: "absolute",
434 |     bottom: 0,
435 |     backgroundColor: "#111111",
436 |   },
437 |   BottomBarSecondery: {
438 |     width: "100%",
439 |     height: 80,
440 |     position: "absolute",
441 |     bottom: 0,
442 |     backgroundColor: "#ffff",
443 |     borderBottomLeftRadius: 40,
444 |     borderBottomRightRadius: 40,
445 |   },
446 |   PayerName: {
447 |     fontSize: 17,
448 |     fontWeight: 600,
449 |     color: "#111111",
450 |   },
451 |   PayerType: {
452 |     fontSize: 12,
453 |     color: "#757574",
454 |   },
455 |   SubVal: {
456 |     fontSize: 11,
457 |     color: "#757574",
458 |   },
459 |   SubTitle: {
460 |     fontSize: 14,
461 |     fontWeight: 500,
462 |   },
463 | 
464 |   PaymentVal:{
465 |     fontSize: 20,
466 |     fontWeight: 600,
467 |     color: "#111111",
468 |   },
469 |   
470 | });
471 | 


--------------------------------------------------------------------------------