Create a Tip Calculator using React-Native

// Import necessary hooks and components from React and React Native
import { useState } from 'react';
import { 
	View, // Container for layout
	Text, // For displaying text
	TextInput, // For user input fields
	TouchableOpacity, // For clickable buttons
	ScrollView // For scrollable content
} from 'react-native';
import { styles } from "./styles"; // Import styles from external file

// Import StyleSheet from react-native for creating styles
import { StyleSheet } from 'react-native';

// Create a StyleSheet object containing all styles for the app
const styles = StyleSheet.create({

	// Container for the main layout
	container: {
		flex: 1, // Take up the full screen
		padding: 20, // Add padding around the content
		backgroundColor: '#fff', // Set background color to white
	},

	// Style for the bill input section
	billInput: {
		marginBottom: 20, // Space below the input
	},

	// Style for the header text
	header: {
		flexDirection: 'row', // Arrange children in a row
		alignItems: 'center', // Center items vertically
		alignContent: 'center', // Center content vertically (for wrapping)
		justifyContent: 'center', // Center items horizontally
		alignSelf: 'center', // Center the header itself
		fontSize: 30, // Large font size
		fontWeight: 'bold', // Bold text
	},

	// General text style
	text: {
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
		paddingHorizontal: 5, // Horizontal padding
	},

	// Style for bill-related text
	billText: {
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
		paddingHorizontal: 10, // More horizontal padding
	},

	// Container for input fields
	inputContainer: {
		flexDirection: 'row', // Arrange children in a row
		alignItems: 'center', // Center items vertically
	},

	// Style for text input fields
	input: {
		flex: 1, // Take up available space
		borderColor: '#ccc', // Light gray border
		borderWidth: 1, // Border width
		padding: 10, // Padding inside input
		borderRadius: 4, // Rounded corners
		fontSize: 20, // Large font size
		marginVertical: 10, // Vertical margin
	},

	// Container for tip selection buttons
	tipContainer: {
		flexDirection: 'row', // Arrange children in a row
		flexWrap: 'wrap', // Allow wrapping to next line
		justifyContent: 'space-between', // Space between buttons
		marginBottom: 12, // Space below the container
	},

	// Style for individual tip button
	tip: {
		width: '30%', // Each button takes 30% width
		backgroundColor: '#2395e2', // Blue background
		borderRadius: 5, // Rounded corners
		textAlign: 'center', // Center text
		padding: 10, // Padding inside button
		marginVertical: 5, // Vertical margin
		alignContent: 'center', // Center content vertically (for wrapping)
		alignItems: 'center', // Center items vertically
	},

	// Style for selected tip button
	selected: {
		backgroundColor: 'green', // Green background when selected
	},

	// Style for custom tip input
	customTip: {
		borderColor: '#ccc', // Light gray border
		borderWidth: 1, // Border width
		padding: 10, // Padding inside input
		borderRadius: 4, // Rounded corners
		fontSize: 16, // Medium font size
		marginVertical: 10, // Vertical margin
	},

	// Style for number of people input
	numberOfPeople: {
		borderColor: '#ccc', // Light gray border
		borderWidth: 1, // Border width
		padding: 10, // Padding inside input
		borderRadius: 4, // Rounded corners
		fontSize: 16, // Medium font size
		marginVertical: 10, // Vertical margin
	},

	// Style for the generate bill button
	generateBillBtn: {
		width: '100%', // Full width
		height: 40, // Fixed height
		backgroundColor: '#2395e2', // Blue background
		borderRadius: 7, // Rounded corners
		alignItems: 'center', // Center text horizontally
		justifyContent: 'center', // Center text vertically
		marginVertical: 16, // Vertical margin
	},

	// Style for the text inside the generate bill button
	generateBillBtnText: {
		color: 'white', // White text
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
	},

	// Style for the bill output section
	billOutput: {
		marginVertical: 15, // Vertical margin
		padding: 20, // Padding inside output
		backgroundColor: '#2395e2', // Blue background
		borderRadius: 8, // Rounded corners
		color: 'white', // White text
	},

	// Style for tip amount text
	tipAmount: {
		marginBottom: 10, // Space below
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for tip label text
	tipText: {
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for total amount text
	total: {
		marginBottom: 10, // Space below
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for value text (amounts)
	value: {
		color: "white", // White text
		fontWeight: "bold", // Bold text
		paddingLeft: 10, // Padding on the left
		fontSize: 19, // Slightly larger font
	},

	// Style for each person's bill text
	eachPersonBill: {
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for the reset button
	resetBtn: {
		padding: 12, // Padding inside button
		borderRadius: 5, // Rounded corners
		backgroundColor: 'white', // White background
		alignItems: 'center', // Center text horizontally
		justifyContent: 'center', // Center text vertically
		marginTop: 10, // Space above
	},

	// Style for the text inside the reset button
	resetBtnText: {
		color: 'black', // Black text
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
	},

});

// Export the styles object for use in other files
export { styles }

// State for the bill amount input
const [billAmount, setBillAmount] = useState('');

// Handler for bill amount input change
const handleBillAmountChange = (value) => {
	const amount = value; // Get input value

	// Check if input is a valid non-negative number
	if (!isNaN(amount) && amount >= 0) {
		setBillAmount(amount); // Update bill amount
		setCustomTip(''); // Reset custom tip
		setTipPercentage(0); // Reset tip percentage
		setTipAmount(''); // Reset tip amount
		setTotalBill(''); // Reset total bill
		setEachPersonBill(''); // Reset each person bill
		setNumberOfPeople(''); // Reset number of people
	} else {
		// If invalid, reset bill amount
		setBillAmount('');
	}
};
	
// Below code placed after Title Text
{/* Bill amount label */}
<Text style={styles.billText} >Bill</Text>
{/* Bill amount input */}
<View style={styles.inputContainer}>
	<Text >₹</Text>
	<TextInput
		style={styles.input}
		keyboardType="numeric"
		value={billAmount}
		onChangeText={handleBillAmountChange}
	/>
</View>

// State for selected tip percentage
const [tipPercentage, setTipPercentage] = useState(0);
// State for custom tip percentage input
const [customTip, setCustomTip] = useState('');

// Handler for tip percentage button click
const handleTipButtonClick = (percentage) => {
	setTipPercentage(percentage); // Update tip percentage
	setCustomTip(percentage.toString()); // Set custom tip input to selected percentage
};

{/* Tip percentage label */}
<Text style={styles.text} >Select Tip</Text>
{/* Tip percentage selection buttons */}
<View style={styles.tipContainer}>
	<TouchableOpacity
		style={[styles.tip, tipPercentage === 5 ? styles.selected : null]}
		onPress={() => handleTipButtonClick(5)}
	>
		<Text style={styles.tipText} >5%</Text>
	</TouchableOpacity>
	<TouchableOpacity
		style={[styles.tip, tipPercentage === 10 ? styles.selected : null]}
		onPress={() => handleTipButtonClick(10)}
	>
		<Text style={styles.tipText}>10%</Text>
	</TouchableOpacity>
	<TouchableOpacity
		style={[styles.tip, tipPercentage === 15 ? styles.selected : null]}
		onPress={() => handleTipButtonClick(15)}
	>
		<Text style={styles.tipText}>15%</Text>
	</TouchableOpacity>
	<TouchableOpacity
		style={[styles.tip, tipPercentage === 25 ? styles.selected : null]}
		onPress={() => handleTipButtonClick(25)}
	>
		<Text style={styles.tipText}>25%</Text>
	</TouchableOpacity>
	<TouchableOpacity
		style={[styles.tip, tipPercentage === 50 ? styles.selected : null]}
		onPress={() => handleTipButtonClick(50)}
	>
		<Text style={styles.tipText}>50%</Text>
	</TouchableOpacity>
	<TouchableOpacity
		style={[styles.tip, tipPercentage === 75 ? styles.selected : null]}
		onPress={() => handleTipButtonClick(75)}
	>
		<Text style={styles.tipText}>75%</Text>
	</TouchableOpacity>
</View>

{/* Custom tip label */}
<Text style={styles.text} >Selected Tip</Text>
{/* Custom tip input */}
<TextInput
	style={styles.customTip}
	placeholder="Custom Tip in Percentage"
	keyboardType="numeric"
	value={customTip}
	onChangeText={handleCustomTipChange}
/>

// State for number of people input
const [numberOfPeople, setNumberOfPeople] = useState('');
// Handler for number of people input change
const handleNumberOfPeopleChange = (value) => {
	const people = parseInt(value); // Parse input as integer

	// Check if input is a valid non-negative number
	if (!isNaN(people) && people >= 0) {
		setNumberOfPeople(people); // Update number of people
	} else {
		// If invalid, reset number of people
		setNumberOfPeople('');
	}
};

{/* Number of people label */}
<Text style={styles.text} >Number of People</Text>
{/* Number of people input */}
<TextInput
	style={styles.numberOfPeople}
	placeholder="Number of people"
	keyboardType="numeric"
	value={numberOfPeople}
	onChangeText={handleNumberOfPeopleChange}
/>

// Function to calculate tip, total, and per person bill
const calculateBill = () => {
	const bill = parseFloat(billAmount); // Convert bill amount to float
	const tip = (bill * tipPercentage) / 100; // Calculate tip amount
	const total = bill + tip; // Calculate total bill
	const eachPerson = total / parseFloat(numberOfPeople); // Calculate per person bill

	setTipAmount(`₹${tip.toFixed(2)}`); // Update tip amount state
	setTotalBill(`₹${total.toFixed(2)}`); // Update total bill state
	setEachPersonBill(`₹${eachPerson.toFixed(2)}`); // Update per person bill state
};

{/* Button to generate bill */}
<TouchableOpacity
	style={styles.generateBillBtn}
	onPress={calculateBill}
	disabled={!billAmount || !numberOfPeople || !tipPercentage}
>
	<Text style={styles.generateBillBtnText}>Generate Bill</Text>
</TouchableOpacity>

</View>
	{/* Output section */}
	<Text style={styles.text} >Result</Text>
	<View style={styles.billOutput}>
		{/* Display calculated tip amount */}
		<Text style={styles.tipAmount}>
			Tip amount <Text style={styles.value}>{tipAmount}</Text>
		</Text>
		{/* Display calculated total bill */}
		<Text style={styles.total}>
			Total <Text style={styles.value}>{totalBill}</Text>
		</Text>
		{/* Display calculated bill per person */}
		<Text style={styles.eachPersonBill}>
			Each Person Bill <Text style={styles.value}>{eachPersonBill}</Text>
		</Text>
		
		{/* Button to reset all inputs */}
		<TouchableOpacity
			style={styles.resetBtn}
			onPress={() => handleBillAmountChange('')}
			disabled={!billAmount}
		>
			<Text style={styles.resetBtnText}>Reset</Text>
		</TouchableOpacity>
</View>

// Import necessary hooks and components from React and React Native
import { useState } from 'react';
import {
	View, // Container for layout
	Text, // For displaying text
	TextInput, // For user input fields
	TouchableOpacity, // For clickable buttons
	ScrollView // For scrollable content
} from 'react-native';
import { styles } from "./styles"; // Import styles from external file

export default function BillSplitter() {
	const [billAmount, setBillAmount] = useState('');
	const [customTip, setCustomTip] = useState('');
	const [numberOfPeople, setNumberOfPeople] = useState('');
	const [tipPercentage, setTipPercentage] = useState(0);
	const [tipAmount, setTipAmount] = useState('');
	const [totalBill, setTotalBill] = useState('');
	const [eachPersonBill, setEachPersonBill] = useState('');

	// Handler for bill amount input change
	const handleBillAmountChange = (value) => {
		const amount = value; // Get input value

		// Check if input is a valid non-negative number
		if (!isNaN(amount) && amount >= 0) {
			setBillAmount(amount); // Update bill amount
			setCustomTip(''); // Reset custom tip
			setTipPercentage(0); // Reset tip percentage
			setTipAmount(''); // Reset tip amount
			setTotalBill(''); // Reset total bill
			setEachPersonBill(''); // Reset each person bill
			setNumberOfPeople(''); // Reset number of people
		} else {
			// If invalid, reset bill amount
			setBillAmount('');
		}
	};

	const handleCustomTipChange = (value) => {
		const custom = parseFloat(value);

		if (!isNaN(custom) && custom >= 0) {
			setCustomTip(custom.toString());
			setTipPercentage(custom);
			setTipAmount('');
			setTotalBill('');
			setEachPersonBill('');
		} else {
			// Handle negative or invalid input 
			setCustomTip('');
		}
	};

	// Handler for number of people input change
	const handleNumberOfPeopleChange = (value) => {
		const people = parseInt(value); // Parse input as integer

		// Check if input is a valid non-negative number
		if (!isNaN(people) && people >= 0) {
			setNumberOfPeople(people); // Update number of people
		} else {
			// If invalid, reset number of people
			setNumberOfPeople('');
		}
	};
	// Handler for tip percentage button click
	const handleTipButtonClick = (percentage) => {
		setTipPercentage(percentage); // Update tip percentage
		setCustomTip(percentage.toString()); // Set custom tip input to selected percentage
	};

	// Function to calculate tip, total, and per person bill
	const calculateBill = () => {
		const bill = parseFloat(billAmount); // Convert bill amount to float
		const tip = (bill * tipPercentage) / 100; // Calculate tip amount
		const total = bill + tip; // Calculate total bill
		const eachPerson = total / parseFloat(numberOfPeople); // Calculate per person bill

		setTipAmount(`₹${tip.toFixed(2)}`); // Update tip amount state
		setTotalBill(`₹${total.toFixed(2)}`); // Update total bill state
		setEachPersonBill(`₹${eachPerson.toFixed(2)}`); // Update per person bill state
	};
	return (
		<ScrollView contentContainerStyle={styles.container}>
			<View style={styles.billInput}>
				{/* Title Text */}
				<Text style={styles.header} >Split the Bill</Text>
				{/* Bill amount label */}
				<Text style={styles.billText} >Bill</Text>
				{/* Bill amount input */}
				<View style={styles.inputContainer}>
					<Text >₹</Text>
					<TextInput
						style={styles.input}
						keyboardType="numeric"
						value={billAmount}
						onChangeText={handleBillAmountChange}
					/>
				</View>
				{/* Tip percentage label */}
				<Text style={styles.text} >Select Tip</Text>
				{/* Tip percentage selection buttons */}
				<View style={styles.tipContainer}>
					<TouchableOpacity
						style={[styles.tip, tipPercentage === 5 ? styles.selected : null]}
						onPress={() => handleTipButtonClick(5)}
					>
						<Text style={styles.tipText} >5%</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={[styles.tip, tipPercentage === 10 ? styles.selected : null]}
						onPress={() => handleTipButtonClick(10)}
					>
						<Text style={styles.tipText}>10%</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={[styles.tip, tipPercentage === 15 ? styles.selected : null]}
						onPress={() => handleTipButtonClick(15)}
					>
						<Text style={styles.tipText}>15%</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={[styles.tip, tipPercentage === 25 ? styles.selected : null]}
						onPress={() => handleTipButtonClick(25)}
					>
						<Text style={styles.tipText}>25%</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={[styles.tip, tipPercentage === 50 ? styles.selected : null]}
						onPress={() => handleTipButtonClick(50)}
					>
						<Text style={styles.tipText}>50%</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={[styles.tip, tipPercentage === 75 ? styles.selected : null]}
						onPress={() => handleTipButtonClick(75)}
					>
						<Text style={styles.tipText}>75%</Text>
					</TouchableOpacity>
				</View>
				{/* Custom tip label */}
				<Text style={styles.text} >Selected Tip</Text>
				{/* Custom tip input */}
				<TextInput
					style={styles.customTip}
					placeholder="Custom Tip in Percentage"
					keyboardType="numeric"
					value={customTip}
					onChangeText={handleCustomTipChange}
				/>
				{/* Number of people label */}
				<Text style={styles.text} >Number of People</Text>
				{/* Number of people input */}
				<TextInput
					style={styles.numberOfPeople}
					placeholder="Number of people"
					keyboardType="numeric"
					value={numberOfPeople}
					onChangeText={handleNumberOfPeopleChange}
				/>
				{/* Button to generate bill */}
				<TouchableOpacity
					style={styles.generateBillBtn}
					onPress={calculateBill}
					disabled={!billAmount || !numberOfPeople || !tipPercentage}
				>
					<Text style={styles.generateBillBtnText}>Generate Bill</Text>
				</TouchableOpacity>
			</View>
			<View>
				{/* Output section */}
				<Text style={styles.text} >Result</Text>
				<View style={styles.billOutput}>
					{/* Display calculated tip amount */}
					<Text style={styles.tipAmount}>
						Tip amount <Text style={styles.value}>{tipAmount}</Text>
					</Text>
					{/* Display calculated total bill */}
					<Text style={styles.total}>
						Total <Text style={styles.value}>{totalBill}</Text>
					</Text>
					{/* Display calculated bill per person */}
					<Text style={styles.eachPersonBill}>
						Each Person Bill <Text style={styles.value}>{eachPersonBill}</Text>
					</Text>

					{/* Button to reset all inputs */}
					<TouchableOpacity
						style={styles.resetBtn}
						onPress={() => handleBillAmountChange('')}
						disabled={!billAmount}
					>
						<Text style={styles.resetBtnText}>Reset</Text>
					</TouchableOpacity>
				</View>
			</View>
		</ScrollView>
	);
}

// Import StyleSheet from react-native for creating styles
import { StyleSheet } from 'react-native';

// Create a StyleSheet object containing all styles for the app
const styles = StyleSheet.create({

	// Container for the main layout
	container: {
		flex: 1, // Take up the full screen
		padding: 20, // Add padding around the content
		backgroundColor: '#fff', // Set background color to white
	},

	// Style for the bill input section
	billInput: {
		marginBottom: 20, // Space below the input
	},

	// Style for the header text
	header: {
		flexDirection: 'row', // Arrange children in a row
		alignItems: 'center', // Center items vertically
		alignContent: 'center', // Center content vertically (for wrapping)
		justifyContent: 'center', // Center items horizontally
		alignSelf: 'center', // Center the header itself
		fontSize: 30, // Large font size
		fontWeight: 'bold', // Bold text
	},

	// General text style
	text: {
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
		paddingHorizontal: 5, // Horizontal padding
	},

	// Style for bill-related text
	billText: {
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
		paddingHorizontal: 10, // More horizontal padding
	},

	// Container for input fields
	inputContainer: {
		flexDirection: 'row', // Arrange children in a row
		alignItems: 'center', // Center items vertically
	},

	// Style for text input fields
	input: {
		flex: 1, // Take up available space
		borderColor: '#ccc', // Light gray border
		borderWidth: 1, // Border width
		padding: 10, // Padding inside input
		borderRadius: 4, // Rounded corners
		fontSize: 20, // Large font size
		marginVertical: 10, // Vertical margin
	},

	// Container for tip selection buttons
	tipContainer: {
		flexDirection: 'row', // Arrange children in a row
		flexWrap: 'wrap', // Allow wrapping to next line
		justifyContent: 'space-between', // Space between buttons
		marginBottom: 12, // Space below the container
	},

	// Style for individual tip button
	tip: {
		width: '30%', // Each button takes 30% width
		backgroundColor: '#2395e2', // Blue background
		borderRadius: 5, // Rounded corners
		textAlign: 'center', // Center text
		padding: 10, // Padding inside button
		marginVertical: 5, // Vertical margin
		alignContent: 'center', // Center content vertically (for wrapping)
		alignItems: 'center', // Center items vertically
	},

	// Style for selected tip button
	selected: {
		backgroundColor: 'green', // Green background when selected
	},

	// Style for custom tip input
	customTip: {
		borderColor: '#ccc', // Light gray border
		borderWidth: 1, // Border width
		padding: 10, // Padding inside input
		borderRadius: 4, // Rounded corners
		fontSize: 16, // Medium font size
		marginVertical: 10, // Vertical margin
	},

	// Style for number of people input
	numberOfPeople: {
		borderColor: '#ccc', // Light gray border
		borderWidth: 1, // Border width
		padding: 10, // Padding inside input
		borderRadius: 4, // Rounded corners
		fontSize: 16, // Medium font size
		marginVertical: 10, // Vertical margin
	},

	// Style for the generate bill button
	generateBillBtn: {
		width: '100%', // Full width
		height: 40, // Fixed height
		backgroundColor: '#2395e2', // Blue background
		borderRadius: 7, // Rounded corners
		alignItems: 'center', // Center text horizontally
		justifyContent: 'center', // Center text vertically
		marginVertical: 16, // Vertical margin
	},

	// Style for the text inside the generate bill button
	generateBillBtnText: {
		color: 'white', // White text
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
	},

	// Style for the bill output section
	billOutput: {
		marginVertical: 15, // Vertical margin
		padding: 20, // Padding inside output
		backgroundColor: '#2395e2', // Blue background
		borderRadius: 8, // Rounded corners
		color: 'white', // White text
	},

	// Style for tip amount text
	tipAmount: {
		marginBottom: 10, // Space below
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for tip label text
	tipText: {
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for total amount text
	total: {
		marginBottom: 10, // Space below
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for value text (amounts)
	value: {
		color: "white", // White text
		fontWeight: "bold", // Bold text
		paddingLeft: 10, // Padding on the left
		fontSize: 19, // Slightly larger font
	},

	// Style for each person's bill text
	eachPersonBill: {
		color: "white", // White text
		fontWeight: "bold", // Bold text
	},

	// Style for the reset button
	resetBtn: {
		padding: 12, // Padding inside button
		borderRadius: 5, // Rounded corners
		backgroundColor: 'white', // White background
		alignItems: 'center', // Center text horizontally
		justifyContent: 'center', // Center text vertically
		marginTop: 10, // Space above
	},

	// Style for the text inside the reset button
	resetBtnText: {
		color: 'black', // Black text
		fontSize: 16, // Medium font size
		fontWeight: 'bold', // Bold text
	},

});

// Export the styles object for use in other files
export { styles }