Sofia Ringstedt React Native project

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -1,4 +1 @@
-{
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}
+{}

App.js

@@ -1,25 +1,27 @@
 import React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
 import styled from 'styled-components/native';
 
+import Artworkslist from './components/Artworkslist';
+import RandomArtwork from './components/RandomArtwork';
+
+const Drawer = createDrawerNavigator();
+
 const Container = styled.View`
 	flex: 1;
 	background-color: papayawhip;
-	justify-content: center;
 	align-items: center;
 `;
 
-const Title = styled.Text`
-	font-size: 24px;
-	color: palevioletred;
-`;
-
 const App = () => {
 	return (
-		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
-		</Container>
+		<NavigationContainer style={Container}>
+			<Drawer.Navigator initialRouteName="Home">
+				<Drawer.Screen name="Home" component={Artworkslist} />
+				<Drawer.Screen name="Surprise Artwork" component={RandomArtwork} />
+			</Drawer.Navigator>
+	  </NavigationContainer>
 	);
 };
 

README.md

@@ -1,13 +1,11 @@
 # 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 I made an app with the work title Rembrant Randomizer, using React Native and an API fetch from Rijksmuseum, Netherlands. For this app I used React Native Navigation, styled components and expo sensors. 
 
 ## 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?
+This week was an interesting challenge since I have never done an app before! It took me some time to figure out what approaches would suit me and the project best. When I get more time I will add an loader and also display for info on each artwork. 
 
 ## View it live
 
-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.
+https://expo.dev/@sofiaringstedt/project-react-native-app?serviceType=classic&distribution=expo-go

components/Artworkslist.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import styled from 'styled-components/native';
+
+import { REMBRANDT_URL } from '../utils/urls';
+
+const HomeView = styled.ScrollView`
+	background-color: papayawhip;
+`
+
+const ArtworkContainer = styled.ScrollView`
+	background-color: papayawhip;
+  padding: 35px;
+`
+
+const HeaderText = styled.Text`
+  font-size: 20px;
+  text-transform: uppercase;
+  text-align: center;
+  padding: 5px;
+  margin: 20px;
+`
+
+const TitleText = styled.Text`
+  font-size: 16px;
+  font-style: italic;
+  text-align: left;
+  margin: 0  5px 20px 5px;
+`
+
+const ArtworkImage = styled.Image`
+  width: 300px;
+  height: 300px;
+  border-radius: 5px;
+`
+
+const Artworkslist = () => {
+  const [artworks, setArtworks] = useState([])
+
+  const generateArtworks = () => {
+    fetch(REMBRANDT_URL)
+    .then(res => res.json())
+    .then(data => setArtworks(data.artObjects))
+  }
+
+  useEffect(() => {
+    generateArtworks();
+  }, []);
+
+  return (
+    <HomeView>
+      <ArtworkContainer>
+        <HeaderText>Rembrandt Randomizer</HeaderText>
+        {artworks.map((artwork) => {
+          return (
+            <View key={artwork?.id}>
+              <ArtworkImage source={artwork?.webImage}/>
+              <TitleText>{artwork?.title}</TitleText>
+            </View>
+          )
+        })}
+        </ArtworkContainer>
+    </HomeView>
+  )
+}
+
+export default Artworkslist;

components/RandomArtwork.js

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import { View, Button, Share } from 'react-native';
+import styled from 'styled-components/native';
+import { Accelerometer } from "expo-sensors";
+
+import { REMBRANDT_URL } from '../utils/urls';
+
+const ArtworkContainer = styled.ScrollView`
+	background-color: papayawhip;
+  padding: 100px 35px;
+`
+
+const TitleText = styled.Text`
+  font-size: 16px;
+  font-style: italic;
+  text-align: left;
+  margin: 0  5px 5px 5px;
+`
+
+const ArtworkImage = styled.Image`
+  width: 300px;
+  height: 300px;
+  border-radius: 5px;
+`
+
+const LocationText = styled.Text`
+  font-size: 16px;
+  text-align: left;
+  margin: 0  5px 20px 5px;
+`
+
+const ShakeText = styled.Text`
+font-size: 16px;
+font-style: italic;
+text-align: center;
+`
+
+const RandomArtwork = () => {
+  const [randomArtwork, setRandomArtwork] = useState([])
+  const [subscription, setSubscription] = useState(null);
+
+  const [data, setData] = useState({
+    x: 0,
+    y: 0,
+    z: 0,
+  });
+
+  const generateRandomArtwork = () => {
+    fetch(REMBRANDT_URL)
+    .then(res => res.json())
+    .then(data => setRandomArtwork(data.artObjects[Math.floor(Math.random()*20)]))
+  }
+
+  useEffect(() => {
+    generateRandomArtwork();
+  }, []);
+
+  const url = randomArtwork?.webImage?.url;
+  const title = "Rembrandt Artwork";
+  const message = "Look at this beautiful artwork";
+
+  const options = {
+  title,
+  url,
+  message,
+  };
+
+  const onShare = async (customOptions = options) => {
+    try {
+      await Share.share(customOptions);
+    } catch (err) {
+      console.log(err)
+    }
+  };
+
+  const subscribe = () => {
+    setSubscription(
+      Accelerometer.addListener(accelerometerData => {
+        setData(accelerometerData);
+      })
+    );
+  };
+
+  const unsubscribe = () => {
+    subscription && subscription.remove();
+    setSubscription(null);
+  };
+
+  useEffect(() => {
+  subscribe();
+  return () => unsubscribe();
+  }, []);
+
+  const isShaking = (data) => {
+    const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
+    return totalForce > 1.78;
+  }
+
+  useEffect(()=> {
+    if (isShaking(data)) {
+        generateRandomArtwork();
+    }
+  }, [data])
+
+  return (
+    <ArtworkContainer>
+      <View>
+        <ArtworkImage source={randomArtwork?.webImage}/>
+        <TitleText>{randomArtwork?.longTitle}</TitleText>
+        <LocationText>{randomArtwork?.productionPlaces}</LocationText>
+        <Button title="share" onPress={async () => { await onShare()}}/>
+        <ShakeText>or shake me for next!</ShakeText>
+      </View>
+    </ArtworkContainer>
+  )
+};
+
+export default RandomArtwork;