project-react-native-app

App.js

@@ -1,26 +1,21 @@
 import React from 'react';
 import styled from 'styled-components/native';
 
-const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
-`;
-
-const Title = styled.Text`
-	font-size: 24px;
-	color: palevioletred;
-`;
+import RandomQuote from './components/RandomQuote';
 
 const App = () => {
 	return (
 		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
+			<RandomQuote />
 		</Container>
 	);
 };
 
+const Container = styled.View`
+	flex: 1;
+	background-color: #3d405b;
+	justify-content: center;
+	align-items: center;
+`;
+
 export default App;

components/Albums.js

@@ -0,0 +1,26 @@
+import data from '../albums.json';
+import React, { useEffect, useState } from 'react';
+import { View, Text } from 'react-native';
+
+const Albums = () => {
+	const [album, setAlbum] = useState({});
+	console.log(data.items[2].name);
+
+	const generateAlbum = () => {
+		fetch('../albums.json')
+			.then((res) => res.json())
+			.then((data) => setAlbum(data));
+	};
+
+	useEffect(() => {
+		generateAlbum();
+	});
+
+	return (
+		<View>
+			<Text>{JSON.stringify(data.items[2].name)} </Text>
+		</View>
+	);
+};
+
+export default Albums;

components/RandomQuote.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+const RandomQuote = () => {
+	const [quote, setQuote] = useState({});
+
+	const generateQuote = () => {
+		fetch('https://api.quotable.io/random')
+			.then((res) => res.json())
+			.then((data) => setQuote(data));
+	};
+
+	useEffect(() => {
+		generateQuote();
+	}, []);
+
+	return (
+		<View style={styles.container}>
+			<TouchableOpacity style={styles.btn} onPress={generateQuote}>
+				<Text style={styles.btnText}>New Quote</Text>
+			</TouchableOpacity>
+			<Text style={styles.quote}>"{quote.content}"</Text>
+			<Text style={styles.author}>{quote.author}</Text>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		padding: 30,
+	},
+	btn: {
+		alignItems: 'center',
+		backgroundColor: '#81b29a',
+		paddingVertical: 20,
+		paddingHorizontal: 30,
+		marginBottom: 10,
+		alignSelf: 'center',
+		borderRadius: 3,
+	},
+	btnText: {
+		color: '#f4f1de',
+		fontSize: 18,
+		textTransform: 'uppercase',
+		fontWeight: 'bold',
+	},
+	quote: {
+		color: '#f4f1de',
+		fontSize: 24,
+		fontStyle: 'italic',
+		textAlign: 'center',
+		margin: 20,
+		lineHeight: 30,
+	},
+	author: {
+		color: '#f4f1de',
+		textAlign: 'center',
+		fontSize: 18,
+		fontWeight: 'bold',
+	},
+});
+
+export default RandomQuote;