Skip to content

Conversation

@tiiliu
Copy link

@tiiliu tiiliu commented May 7, 2022

No description provided.

Comment on lines +12 to +15
let [fontsLoaded] = useFonts({
WorkSans_300Light,
WorkSans_400Regular,
})
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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))
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps, you can add .catch error here, in case the API is not successfully fetched


const changeImage = () => {
switch (fetchedData.type) {
case "social":
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice to see you apply switch-case here

Comment on lines +110 to +144
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 }} />
}
Copy link

@sk-phan sk-phan May 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +1 to +15
import React from "react"

import LottieView from "lottie-react-native"

const Loader = () => {
return (
<>
<LottieView
source={require("../assets/bouncy-balls-loader.json")}
autoPlay
loop
/>
</>
)
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was not able to apply the animation, it's nice to see how you did it

Copy link

@sk-phan sk-phan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants