Project React Native APP - sensors #306
Conversation
…he phone is shaken a random quote will be fetched
There was a problem hiding this comment.
Mathilda, you shall be really proud with this project! This was a challenging week as first project with React Native and all new Expo tools. But you made it even above blue requirements as adding both shake sensor and API. And on top of that a Link to your Happy Tweets, making this site even more exciting for the user. The code is very well structured with perfection of indentations and spacing. I've been really trying to find any tips or suggestions - but without success. You should send this APP to every dog lovers you know! :-)
| 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 were to build an app using React Native. We should be using either a phone sensor like the accelerometer, an api-fetch or React Navigation. The app should be published using Expo. |
There was a problem hiding this comment.
Good start of ReadMe - its really convenient to adress the goal that you do here - in order for the reviewer to be aware of the basic needs.
| return ( | ||
| <FooterContainer> | ||
| <FooterText>To make someone else's day, please click the link below and write about somehing that made you smile today</FooterText> | ||
| <FooterLink onPress={() => Linking.openURL('https://spring2022-happy-tweets.netlify.app/')}>Happy Tweets</FooterLink> |
There was a problem hiding this comment.
To link this project into another project of yours is just brilliant. Makes this weeks project a little bit more dynamic and interesting as well as the viewer can get 2 of your built masterpieces:-)
Great work that you found the React Native structure of adding an URL/Link
|
|
||
| //----------------------------------------------// | ||
|
|
||
| const Title = styled.Text` |
There was a problem hiding this comment.
Structured and well named style components!
| const styles = StyleSheet.create({ | ||
|
|
||
| Image: { | ||
| width: 350, | ||
| height: 350, | ||
| borderRadius: 10, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Interesting to see how you added the styling of the Image in an own component. I styled it directly in the Image Style (line 73 below in your component). But was wondering a bit if I wanted to do more styling - how would adress it. Thanks!
| uri: image.url | ||
| }} | ||
| /> | ||
| <Button onPress={generateImage}> |
There was a problem hiding this comment.
Extra plus that you added a button as well as an alternative for the shaking. Makes it more usable if viewed in desktop.
| font-weight: 700; | ||
| `; | ||
|
|
||
| const Button = styled.TouchableOpacity` |
There was a problem hiding this comment.
TouchableOpacity - you really stretched your React Native knowledge a little bit more by using this type of button:-)
There was a problem hiding this comment.
It has been a pure pleasure code reviewing your very first mobile application! It's so important and nice to learn from other fellow students. The Linking part is definitely something I would love to try. Over all I find your app very satisfying to play around with, choosing between pressing a button and shaking the mobile device. So great job with this project, Mathilda!
| ## 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/@mathilda_karlsson/project-react-native-app?serviceType=classic&distribution=expo-go |
There was a problem hiding this comment.
Yeay! I managed to open your expo-app. Have tried on others but failed. So I got the opportunity to test your app and the functionality was there and so was the simple styling. You have added different features to your app which gives it a very user friendly approach!
| return ( | ||
| <FooterContainer> | ||
| <FooterText>To make someone else's day, please click the link below and write about somehing that made you smile today</FooterText> | ||
| <FooterLink onPress={() => Linking.openURL('https://spring2022-happy-tweets.netlify.app/')}>Happy Tweets</FooterLink> |
There was a problem hiding this comment.
I'm very impressed with this feature in your footer component. You show the user and fellow code reviewers on how to apply and work with linking URL. This is a component with a clean and easy understandable code to follow!
|
|
||
| //----------------------------------------------// | ||
|
|
||
| const FooterContainer = styled.View` |
There was a problem hiding this comment.
I would say this is easier and much more comfortable working with styling rather than using stylesheet. If you want to test yourself, I would encourage you to do so. You're a great learner so with a little more time you can do it. :D
| import { Accelerometer } from "expo-sensors"; | ||
| import styled from "styled-components/native"; | ||
|
|
||
| const styles = StyleSheet.create({ |
There was a problem hiding this comment.
Oh I see that you used StyleSheet here and it worked out great for you. Yeay!
| export const SensorComponent = () => { | ||
| const [image, setImage] = useState({}) | ||
|
|
||
| const generateImage = () => { |
There was a problem hiding this comment.
The pictures of the dogs are so cute!! This entire component is full with code but you manage to modify and structure it well so it gets easy to follow. I am happy that you found your way to add a new API address and apply that to the fetch. Now you have any problems finding and using API:s in your future projects. Small action but great impact!
| //----------------------------------------------// | ||
|
|
||
|
|
||
| const APIContainer = styled.View` |
There was a problem hiding this comment.
It's not easy naming variables but you have done it in a way that suits the purpose. This makes it easy to tell the difference between regular html and styling components. Good job!
4 participants
Link to project: https://expo.dev/@mathilda_karlsson/project-react-native-app?serviceType=classic&distribution=expo-go