DATE: EXERCISE NO: 2

Build a cross platform application for a simple expense manager which allows entering
expenses and income on each day and displays category wise weekly income and expense.

AIM:
To build a cross platform application for a simple expense manager which allows
entering expenses and income on each day and displays category wise weekly income and
expense.

PROCEDURE:
Step 1: Install Node Js from the following link
https://nodejs.org/en/download
Step 2: Install the necessary npx commands using
npm install <command_name>
Using this install
1. create-expo-app
2. Expo-cli
Step 3: Create a react-native application using the command
npx create-expo-app <AppName>
Step 4: Now open the application in VSCode
Step 5: Now make changes to the App.js file to create the expense manager
Step 6: First define the required variables
Step 7: Create the function to calculate the expense values
Step 8: Read input from the user using the TextInput to get the income
Step 9: Run the application on the web using the command
npm run web
Step 11: View the output in the browser by going to the url
http://locaslhost:19006/

PROGRAM:
//App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList, Picker } from 'react-native';
const ExpenseItem = ({ expense }) => {
return (
<View style={styles.transactionContainer}>
<Text style={styles.transactionDate}>{expense.date}</Text>
<Text style={styles.transactionAmount}>-${expense.amount.toFixed(2)}</Text>
<Text style={styles.transactionCategory}>{expense.category || 'Uncategorized'}</Text>
</View>
);
DATE: EXERCISE NO: 2
};
const App = () => {
const [transactions, setTransactions] = useState([]);
const [amount, setAmount] = useState('');
const [type, setType] = useState('expense');
const [category, setCategory] = useState('');
const [weeklyIncome, setWeeklyIncome] = useState(0);
const [showIncomeForm, setShowIncomeForm] = useState(true);
const [date, setDate] = useState(new Date().toLocaleDateString());
const [remainingBalance, setRemainingBalance] = useState(0);
useEffect(() => {
const totalExpenses = transactions.reduce((total, transaction) => {
if (transaction.type === 'expense') {
return total + transaction.amount;
}
return total;
}, 0);
const balance = weeklyIncome - totalExpenses;
setRemainingBalance(balance);
}, [transactions, weeklyIncome]);
const handleWeeklyIncomeSubmit = () => {
setWeeklyIncome(parseFloat(amount));
setAmount('');
setShowIncomeForm(false);
};
const handleTransactionSubmit = () => {
const newTransaction = {
id: transactions.length + 1,
amount: parseFloat(amount),
type,
category,
date,
};
setTransactions([...transactions, newTransaction]);
setAmount('');
setCategory('');
setDate(new Date().toLocaleDateString());
};
return (
<View style={styles.container}>
DATE: EXERCISE NO: 2
<Text style={styles.remainingBalance}>Remaining Balance: $
{remainingBalance.toFixed(2)}</Text>
{showIncomeForm ? (
<View style={styles.formContainer}>
<Text style={styles.heading}>Enter Weekly Income</Text>
<TextInput
style={styles.input}
placeholder="Weekly Income"
value={amount}
onChangeText={setAmount}
keyboardType="numeric"
/>
<Button title="Submit Weekly Income" onPress={handleWeeklyIncomeSubmit} />
</View>
):(
<View style={styles.formContainer}>
<Text style={styles.heading}>Add Expenses</Text>
<TextInput
style={styles.input}
placeholder="Amount"
value={amount}
onChangeText={setAmount}
keyboardType="numeric"
/>
<Picker
selectedValue={category}
onValueChange={(itemValue) => setCategory(itemValue)}
style={styles.picker}
>
<Picker.Item label="Select Category" value="" />
<Picker.Item label="Food" value="Food" />
<Picker.Item label="Travel" value="Travel" />
<Picker.Item label="Work" value="Work" />
<Picker.Item label="Personal" value="Personal" />
<Picker.Item label="Miscellaneous" value="Miscellaneous" />
</Picker>
<Button title="Add Expense" onPress={handleTransactionSubmit} />
</View>
)}
<FlatList
data={transactions}
DATE: EXERCISE NO: 2
renderItem={({ item }) => <ExpenseItem expense={item} />}
keyExtractor={(item) => item.id.toString()}
style={styles.transactionList}
/>
</View>
);
};

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
paddingHorizontal: 20,
paddingVertical: 10,
},
formContainer: {
marginBottom: 20,
},
heading: {
fontWeight: 'bold',
marginBottom: 10,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 10,
paddingHorizontal: 10,
},
picker: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 10,
},
transactionList: {
marginBottom: 20,
},
transactionContainer: {
padding: 10,
borderWidth: 1,
DATE: EXERCISE NO: 2
borderColor: 'gray',
borderRadius: 5,
marginBottom: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
transactionDate: {
color: 'gray', },
transactionAmount: {
color: 'red',
},
transactionCategory: {
fontStyle: 'italic',
},
remainingBalance: {
fontWeight: 'bold',
fontSize: 16,
textAlign: 'center',
marginBottom: 10,
},});
export default App;

OUTPUT:
DATE: EXERCISE NO: 2
DATE: EXERCISE NO: 2

RESULT:
Thus a weekly expense manager was created using react-native.