Create a Currency Converter using React-Native

import React, {
useState, useEffect, useCallback
} from "react";
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet
} from "react-native";
import ModalDropdown from
"react-native-modal-dropdown";
import { styles } from "./Style";

const App = () => {
const [amount, setAmount] =
	useState("");
const [fromCurrency, setFromCurrency] =
	useState("USD");
const [toCurrency, setToCurrency] =
	useState("EUR");
const [currencies, setCurrencies] =
	useState([]);
const [convertedAmount, setConvertedAmount] =
	useState(null);

const convertCurrency =
	useCallback(() => {
	if (!amount) {
		setConvertedAmount(null);
		return;
	}
	fetch(`
https://api.exchangerate-api.com/v4/latest/${fromCurrency}
		`)
		.then((response) => response.json())
		.then((data) => {
		const exchangeRates =
			data.rates;
		const conversionRate =
			exchangeRates[toCurrency];

		if (conversionRate) {
			const result =
			parseFloat(amount) * conversionRate;
			setConvertedAmount(result.toFixed(2));
		} else {
			setConvertedAmount("Invalid Currency ");
		}
		})
		.catch((error) => {
		console.error("Error converting currency: ", error
		);
		});
	}, [amount, fromCurrency, toCurrency]);

useEffect(() => {
	fetch(`
https://api.exchangerate-api.com/v4/latest/USD
	`)
	.then((response) =>
		response.json())
	.then((data) => {
		const currencyList =
		Object.keys(data.rates);
		setCurrencies(currencyList);
	})
	.catch((error) => {
		console.error(" Error fetching currency data: ",
		error);
	});
}, []);

useEffect(() => {
	convertCurrency();
}, [convertCurrency]);

const swapCurrencies = () => {
	// Swap the selected currencies
	setFromCurrency(toCurrency);
	setToCurrency(fromCurrency);
};

return (
	<View style={styles.container}>
	<View style={styles.subcontainer}>
		<Text style={styles.header}>
		Currency Converter</Text>
		<Text style={styles.label}>Amount:</Text>
		<View style={styles.inputContainer}>
		<TextInput
			style={styles.input}
			value={amount}
			onChangeText={(text) => setAmount(text)}
			keyboardType="numeric"
			placeholder="Enter amount"
			placeholderTextColor="#999"
		/>
		</View>
		<Text style={styles.label}>
		From Currency:
		</Text>
		<View style={styles.inputContainer}>
		<ModalDropdown
			style={styles.dropdown}
			options={currencies}
			defaultValue={fromCurrency}
			onSelect={(index, value) =>
			setFromCurrency(value)}
		/>
		</View>
		<TouchableOpacity
		style={styles.swapButton}
		onPress={swapCurrencies}>
		<Text style={styles.swapButtonText}>
			&#8646;
		</Text>
		</TouchableOpacity>
		<Text style={styles.label}>
		To Currency:
		</Text>
		<View style={styles.inputContainer}>
		<ModalDropdown
			style={styles.dropdown}
			options={currencies}
			defaultValue={toCurrency}
			onSelect={(index, value) =>
			setToCurrency(value)}
		/>
		</View>

		<TouchableOpacity
		style={styles.convertButton}
		onPress={convertCurrency}
		>
		<Text style={styles.convertButtonText}>
			Convert
		</Text>
		</TouchableOpacity>

		{convertedAmount !== null && (
		<Text style={styles.result}>
			{amount} {fromCurrency} is
			{convertedAmount} {toCurrency}
		</Text>
		)}
	</View>
	</View>
);
};

export default App;

//styles.js

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
container: {
	flex: 1,
	justifyContent: "center",
	alignItems: "center",
	backgroundColor: "#f5f5f5"
},
subcontainer: {
	shadowColor: "rgba(0, 0, 0, 0.2)",
	shadowOffset: {
	width: 0,
	height: 6
	},
	shadowOpacity: 1,
	shadowRadius: 15,
	elevation: 5,
	padding: 40,
	borderRadius: 20,
	backgroundColor: "#ffffff"
},
header: {
	fontSize: 28,
	fontWeight: "bold",
	marginBottom: 20,
	color: "green"
},
inputContainer: {
	flexDirection: "row",
	alignItems: "center",
	marginVertical: 10
},
label: {
	fontSize: 19,
	marginRight: 10,
	color: "#333",
	fontFamily: "Pacifico"
},
input: {
	flex: 1,
	borderWidth: 1,
	borderColor: "#ccc",
	borderRadius: 10,
	paddingHorizontal: 10,
	height: 40,
	color: "#333"
},
dropdown: {
	width: 150,
	height: 40,
	borderWidth: 1,
	borderColor: "#ccc",
	borderRadius: 4,
	paddingHorizontal: 10,
	justifyContent: "center",
	color: "#333"
},
convertButton: {
	backgroundColor: "#007BFF",
	borderRadius: 4,
	paddingVertical: 12,
	paddingHorizontal: 24,
	marginTop: 20,
	shadowColor: "rgba(0, 123, 255, 0.5)",
	shadowOffset: {
	width: 0,
	height: 3
	},
	shadowOpacity: 1,
	shadowRadius: 15,
	elevation: 3
},
convertButtonText: {
	color: "white",
	fontSize: 18,
	fontWeight: "bold",
	textAlign: "center"
},
result: {
	marginTop: 20,
	fontSize: 18,
	color: "#333"
},
swapButton: {
	backgroundColor: "#ddd",
	borderRadius: 50,
	width: 45,
	height: 40,
	justifyContent: "center",
	alignItems: "center",
	marginBottom: 10
},
swapButtonText: {
	fontSize: 30,
	textAlign: "center",
	color: "red",
	marginBottom: 10
}
});

export { styles };