Conversation
…llect data with expo sensors, added styling
| let [fontsLoaded] = useFonts({ | ||
| WorkSans_300Light, | ||
| WorkSans_400Regular, | ||
| }) |
There was a problem hiding this comment.
Super nice to see that you're using custom font here
| setLoading(true) | ||
| fetch("https://www.boredapi.com/api/activity") | ||
| .then(res => res.json()) | ||
| .then(data => setTimeout(() => setFetchedData(data), 600)) |
There was a problem hiding this comment.
Perhaps, you can add .catch error here, in case the API is not successfully fetched
|
|
||
| const changeImage = () => { | ||
| switch (fetchedData.type) { | ||
| case "social": |
| return <Image source={require("../assets/social.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "cooking": | ||
| return <Image source={require("../assets/cooking.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "busywork": | ||
| return <Image source={require("../assets/busywork.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "education": | ||
| return <Image source={require("../assets/education.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "diy": | ||
| return <Image source={require("../assets/diy.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "recreational": | ||
| return <Image source={require("../assets/recreational.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "charity": | ||
| return <Image source={require("../assets/charity.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| case "music": | ||
| return <Image source={require("../assets/music.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| break | ||
| default: | ||
| return <Image source={require("../assets/relaxing.png")} | ||
| style={{ resizeMode: "contain", height: 280, width: 280 }} /> | ||
| } |
There was a problem hiding this comment.
Another way to avoid repeating the code. You can return only the image source here:
return ".required(./assets/relaxing.png)"
, instead of rewriting them like this
<Image source={require("../assets/relaxing.png")}
style={{ resizeMode: "contain", height: 280, width: 280 }} />
Next, In the function in the line 164, we can replace it with :
<Image source={changeImage()}
style={{ resizeMode: "contain", height: 280, width: 280 }} />
Hope you find it helpful
| import React from "react" | ||
|
|
||
| import LottieView from "lottie-react-native" | ||
|
|
||
| const Loader = () => { | ||
| return ( | ||
| <> | ||
| <LottieView | ||
| source={require("../assets/bouncy-balls-loader.json")} | ||
| autoPlay | ||
| loop | ||
| /> | ||
| </> | ||
| ) | ||
| } |
There was a problem hiding this comment.
I was not able to apply the animation, it's nice to see how you did it
sk-phan
left a comment
sk-phan
left a comment
There was a problem hiding this comment.
Hi Tiina,
Great job! I love the illustration and the idea. In general, the code is clean and well-written. I learned a few things when going through your code. Super nice! I added some humble ideas, hopefully you find them helpful :)
2 participants
No description provided.