Techy API React Native

App.js

@@ -1,24 +1,48 @@
 import React from 'react';
 import styled from 'styled-components/native';
+import TechyApi from './components/TechyApi';
+import { ImageBackground } from 'react-native';
 
 const Container = styled.View`
 	flex: 1;
-	background-color: papayawhip;
 	justify-content: center;
 	align-items: center;
-`;
+	margin-top: 20px;
+	`;
 
 const Title = styled.Text`
-	font-size: 24px;
-	color: palevioletred;
+	font-size: 20px;
+	color: darkgreen;
+`;
+
+const ContainerText = styled.View`
+	flex: 1;
+	justify-content: center;
+	align-items: center;
+    width: 80%;
+    padding-left: 20px;
+    padding-right: 20px; 
+	padding-top: 20px;   
+`;
+
+const Technician = styled.Image`
+	width: 40%;
+	height: 40%;
+	background: black;
+	margin-top: 20px;
+	padding: 10px;
 `;
 
 const App = () => {
 	return (
 		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
+			<Technician source={require('./assets/technicians-at-work.jpg')} />
+			<ContainerText>
+				<Title>Want to sound like you know what you are talking about? 
+				Try these techy expressions:
+				👩‍💻👩‍💻👩‍💻</Title>					
+			</ContainerText>
+				<TechyApi/> 		
 		</Container>
 	);
 };

app.json

@@ -24,7 +24,7 @@
 			}
 		},
 		"web": {
-			"favicon": "./assets/favicon.png"
+			"favicon": "./assets/favicon.png" 
 		}
 	}
 }

components/TechyApi.js

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import styled from 'styled-components/native';
+
+const TechyApi = () => {
+    const [techwords, setTechwords] = useState({})
+
+    const generateTechWords = () => {
+        fetch('https://techy-api.vercel.app/api/json')
+        .then(response => response.json())
+        .then((data) => setTechwords(data))
+    }
+
+const Container = styled.View`
+    flex: 1;
+	justify-content: center;
+	align-items: center;
+	margin: 20px;
+    width: 80%;
+    padding-left: 20px;
+    padding-right: 20px;  
+    `;
+
+    const Quote = styled.Text`
+	font-size: 15px;
+	color: black;
+    font-style: italic;
+`;
+
+const APIButton= styled.TouchableOpacity`
+    font-weight: 700;
+    width: 40%;
+    background-color: green;
+    margin-top: 20px;
+    border-radius: 10px;
+    border: 2px solid darkgreen;
+    padding; 5px;
+    color: white;
+    `;
+
+
+useEffect(() => {
+    generateTechWords();
+}, []);
+
+return (
+        <Container>
+            <Quote>
+            {techwords.message}</Quote>
+          <APIButton onPress={generateTechWords}>
+          <Text>New sentence</Text>
+          </APIButton>
+          </Container>                           
+)
+}
+
+export default TechyApi;