Techy API React Native

App.js

@@ -1,24 +1,47 @@
 import React from 'react';
 import styled from 'styled-components/native';
+import TechyApi from './components/TechyApi';
+
 
 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>
 	);
 };

README.md

@@ -1,13 +1,12 @@
 # Project React Native App 📱
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This week we should build a mobile app. 
+We had one week to be done with the assignment and learn all the new tools used. 
 
 ## The problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I found an API that I wanted to use. I used styled components and had a button with TouchableOpacity to generate the technical quotes from the API.  
 
 ## View it live
+You can see the app here: 
+https://snack.expo.dev/@sjolanders/native-app
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.

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 { Text } 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: lightgrey;
+    margin-top: 20px;
+    border-radius: 10px;
+    border: 2px solid darkgrey;
+    padding: 5px;
+    `;
+
+
+useEffect(() => {
+    generateTechWords();
+}, []);
+
+return (
+        <Container>
+            <Quote>
+            {techwords.message}</Quote>
+          <APIButton onPress={generateTechWords}>
+          <Text>New sentence</Text>
+          </APIButton>
+          </Container>                           
+)
+}
+
+export default TechyApi;