Create a Random Quote Generator using React-Native

// App.js 
import React, { useState, useEffect } from "react"; 
import {View,Text,TouchableOpacity,ScrollView,Platform,Clipboard} from "react-native"; 
import Icon from "react-native-vector-icons/FontAwesome"; 
import axios from "axios"; 
import AsyncStorage from "@react-native-async-storage/async-storage"; 
import styles from "./styles"; 

const App = () => { 
	const [quote, setQuote] = useState(""); 
	useEffect(() => { 
		fetchQuoteFunction(); 
	}, []); 
	const fetchQuoteFunction = async () => { 
		try { 
			const res = await axios.get("https://type.fit/api/quotes"); 
			const quo = res.data; 
			const idx = Math.floor(Math.random() * quo.length); 
			const randomQuo = quo[idx].text; 
			await AsyncStorage.setItem("lastQuote", randomQuo); 
			setQuote(randomQuo); 
		} catch (error) { 
			console.error("Error fetching quotes:", error.message); 
		} 
	}; 
	const newQuoteFunction = () => { 
		fetchQuoteFunction(); 
	}; 
	const cpyFunction = () => { 
		try { 
			Clipboard.setString(quote); 
			alert("Quote copied to clipboard!"); 
		} catch (error) { 
			console.error("Error copying to clipboard:", error.message); 
		} 
	}; 
	return ( 
		<View style={styles.container}> 
			<ScrollView contentContainerStyle={styles.scrollViewContent}> 
				<Text style={styles.geeksText}>GeeksforGeeks</Text> 
				<Text style={styles.header2}> 
					Random Quote Generator using React-Native 
				</Text> 
				<View style={styles.card}> 
					<Icon 
						name="quote-left"
						size={30} 
						color="#3498db"
						style={styles.quoteIcon} 
					/> 
					<Text style={styles.quoteText}>{quote}</Text> 
					<View style={styles.cardButtons}> 
						<TouchableOpacity 
							style={styles.copyButton} 
							onPress={cpyFunction} 
						> 
							<Text style={styles.copyButtonText}> 
								Copy to Clipboard 
							</Text> 
						</TouchableOpacity> 
						<TouchableOpacity 
							style={styles.newQuoteButton} 
							onPress={newQuoteFunction} 
						> 
							<Text style={styles.buttonText}>New Quote</Text> 
						</TouchableOpacity> 
					</View> 
				</View> 
			</ScrollView> 
		</View> 
	); 
}; 
export default App; 

//styles.js 

import { StyleSheet } from "react-native"; 
const styles = StyleSheet.create({ 
	container: { 
		flex: 1, 
		backgroundColor: "#ecf0f1", 
		paddingHorizontal: 20, 
		justifyContent: "center", 
		alignItems: "center", 
	}, 
	scrollViewContent: { 
		flexGrow: 1, 
		justifyContent: "center", 
		alignItems: "center", 
	}, 
	header2: { 
		fontSize: 16, 
		marginBottom: 20, 
		color: "black", 
		fontWeight: "bold", 
	}, 
	geeksText: { 
		color: "green", 
		fontSize: 30, 
		fontWeight: "bold", 
		textAlign: "center", 
		marginBottom: 10, 
	}, 
	card: { 
		backgroundColor: "#fff", 
		borderRadius: 10, 
		padding: 20, 
		marginBottom: 20, 
		elevation: 5, 
		shadowColor: "#000", 
		shadowOffset: { width: 0, height: 2 }, 
		shadowOpacity: 0.3, 
		shadowRadius: 3, 
	}, 
	quoteIcon: { 
		marginBottom: 10, 
		alignSelf: "center", 
	}, 
	quoteText: { 
		fontSize: 18, 
		textAlign: "center", 
		marginBottom: 20, 
		fontStyle: "italic", 
		fontWeight: "bold", 
		color: "#555", 
	}, 
	cardButtons: { 
		flexDirection: "row", 
		justifyContent: "flex-end", 
		marginTop: 10, 
	}, 
	copyButton: { 
		backgroundColor: "blue", 
		padding: 10, 
		borderRadius: 5, 
		marginRight: 30, 
	}, 
	copyButtonText: { 
		color: "#fff", 
		fontSize: 16, 
		fontWeight: "bold", 
		textAlign: "center", 
	}, 
	newQuoteButton: { 
		backgroundColor: "red", 
		padding: 10, 
		borderRadius: 5, 
	}, 
	buttonText: { 
		color: "#fff", 
		fontSize: 16, 
		fontWeight: "bold", 
		textAlign: "center", 
	}, 
}); 
export default styles;