diff --git a/.expo-shared/README.md b/.expo-shared/README.md new file mode 100644 index 00000000..e9e53189 --- /dev/null +++ b/.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. diff --git a/.expo-shared/assets.json b/.expo-shared/assets.json index 1e6decfb..0967ef42 100644 --- a/.expo-shared/assets.json +++ b/.expo-shared/assets.json @@ -1,4 +1 @@ -{ - "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, - "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true -} +{} diff --git a/App.js b/App.js index e3fbe3ed..d5327d4e 100644 --- a/App.js +++ b/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 ( - - This is your cool app! - Go to App.js and start coding - 💅💅💅 - + + + + + + ); }; diff --git a/README.md b/README.md index e9e2601f..2775c44c 100644 --- a/README.md +++ b/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 \ No newline at end of file diff --git a/components/Artworkslist.js b/components/Artworkslist.js new file mode 100644 index 00000000..baf9153e --- /dev/null +++ b/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 ( + + + Rembrandt Randomizer + {artworks.map((artwork) => { + return ( + + + {artwork?.title} + + ) + })} + + + ) +} + +export default Artworkslist; \ No newline at end of file diff --git a/components/RandomArtwork.js b/components/RandomArtwork.js new file mode 100644 index 00000000..b107f35e --- /dev/null +++ b/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 ( + + + + {randomArtwork?.longTitle} + {randomArtwork?.productionPlaces} +