Open In App

Create a Tip Calculator using React-Native

Last Updated : 07 Jun, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

A Tip Calculator proves to be a convenient tool for effortlessly calculating tips and dividing bills among friends at restaurants. The app enables users to input the bill amount, select their desired tip perce­ntage, specify the numbe­r of people sharing the bill, and promptly obtain calculate­d values for both the tip and total amounts.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Playground

Note: This Section is to interact with the app which you are going to build.

Prerequisites:

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press " a" as mentioned in the image below.
    • For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app .
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

- Approach:

  • We are using the useState hook to manage the state of various input fields and calculated values.
  • Functions such as handleBillAmountChange­, handleCustomTipChange, handleNumbe­rOfPeopleChange, and handle­TipButtonClick were create­d to effectively manage­ input changes and update rele­vant state variables
  • The calculate­Bill function performs the computation of the tip amount, total bill, and individual share­s based on the provided input value­s.
  • The UI layout in this conte­xt is constructed by utilizing a ScrollView alongside various Vie­w components. Label display and input fields are­ facilitated through the utilization of Text and Te­xtInput components.

Let's dive into the code in detail.

- Import libraries:

Import required libraries at the top of the file.

JavaScript 
// 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

- StyleSheet:

Create a new StyleSheet file named "Styles.js" to style components like container, title, jokeContainer, etc.

JavaScript 
// 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 }

- Title Text:

This title explains what the app does. We use the text "Split the Bill" to show that the app is used to split the Bill.

CSS 
{/* Title Text */}
<Text style={styles.header} >Split the Bill</Text>

- Bill Section:

This section includes:

  1. A Text Component that shows the word "Bill" before a TextInput. This tells users what they should type in the TextInput.
  2. A View Component that contains a Text Component displaying "₹" to indicate that the user should enter an amount in Indian currency.
  3. And a TextInput where the user can enter their value. Whenever the user types or changes the text in the TextInput, it automatically calls the handleBillAmountChange function using the onChangeText prop. This function updates the billAmount variable, which we use to show the text inside the TextInput.
JavaScript 
// 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>

- Percentage Buttons Section:

This section has 6 buttons labeled with percentages from 5% to 75%. At the top, there is a text label that says "Select Tip." The user can choose one of the buttons to apply the selected percentage for calculating the tip. When a button is clicked, it will run the handleTipButtonClick function. This function updates the tipPercentage state with the chosen percentage as an integer to use in further calculations, and it also updates customTip with the percentage as a string to display in the next section.

JavaScript 
// 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 section:

This section is used to display the selected percentage using customTip in previous section and we can also edit the percentage.

When user is changing the percentage inside the TextInput component, it will call the handleCustomTipChnage function which will reset all values again.

JavaScript 
{/* 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 Section:

This section is designed to collect the number of people from the user through a TextInput field. It updates the value by calling the handleNumberOfPeopleChange functionusing onChangeText prop in TextInput, which in turn calls the setNumberOfPeople function from the useState hook with the user’s input as its parameter. This updates the value of the numberOfPeople state variable, allowing us to use it both for display in the TextInput component and for calculations.

JavaScript 
// 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}
/>

- Generate Bill Button:

This button is used to call the claculateBill function, which will calculate the Tip amount, Total, and Enter person bill, and update the respective state variables.

JavaScript 
// 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>

- Result Section:

This Section includes, Tip amount, Total, Each Person Bill and Reset. Apart from button all 3 are Text component having calculated values as text from calculateBill function and the Reset button used to call handleBillAmountChange function to reset all values.

JavaScript 
</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>

Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.

Complete Source Code

App.js:

App.js 
// 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>
	);
}
Styles.js 
// 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 }

Output:


Next Article
Create a Tip Calculator using React-Native

S
saurabhkumarsharma05
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox