Week 16 - React Native App by Jenny Fiskaare#294
Conversation
jiiinCho
left a comment
jiiinCho
left a comment
There was a problem hiding this comment.
Great project with a through attention in styling and using pedometer function built in mobile! I cloned your project and run it locally because my iPhone is not able to run the deployed link in Expo go app. Unfortunately my iPhone was not able to detect any steps (which I still don't know why it does not work) but probably you already tested step detecting function. The app runs without any errors, maybe because my iPhone has small screen that caused display some text off from the screen. Feel free to get back to me if any comments are unclear :) great work!
| `; | ||
|
|
||
| const StepTitle = styled.Text` | ||
| font-size: 70px; |
There was a problem hiding this comment.
Maybe this font-size is a little bit too large in mobile screen?
| text-align:left; | ||
| font-style:italic; | ||
| opacity:0.7; | ||
| margin-bottom:-30px; |
There was a problem hiding this comment.
This can cause displaying the title text off from the mobile screen :)
|
|
||
| useEffect(()=>{ | ||
| subscribe() | ||
|
|
There was a problem hiding this comment.
you can unsubscribe function by returning it, for example
return () => _unsubscribe();
| updateStepCounter(result.steps); | ||
| }) | ||
|
|
||
| const _unsubscribe = () => { |
There was a problem hiding this comment.
to unsubscribe Pedometer.watchStepCount method, you can define const _unsubscribe function outside of const subscribe function! (now it is in const subscribe function block)
| }) | ||
|
|
||
| const _unsubscribe = () => { | ||
| subscription && subscription.remove(); |
There was a problem hiding this comment.
to be able to use subscription as state variable, you can use 'useState' hook and defined it in the begging of this SensorComponent scope :)
const [subscription, setSubscription] = useState(undefined)
then you would need to set the method to update subscription state after line 79, for example
setSubscription(subscription);
|
|
||
| // Checks if pedometer function is available on device | ||
|
|
||
| Pedometer.isAvailableAsync().then( |
There was a problem hiding this comment.
I briefly checked the document, https://docs.expo.dev/versions/latest/sdk/pedometer/, maybe this Pedometer.isAvailableAsync().then() method needs to be placed in useEffect method??!
| }, | ||
| "dependencies": { | ||
| "-": "^0.0.1", | ||
| "@expo-google-fonts/lato": "^0.2.2", |
| "react-native-shake": "^5.1.1", | ||
| "react-native-vertical-text": "^1.0.5", | ||
| "react-native-web": "0.17.1", | ||
| "styled-components": "^5.3.3" |
There was a problem hiding this comment.
Super great that you tried styled-component in this project! :)
3 participants
My reflections on how this week's project turned out:
Lack of time and a lot of technical issues. Fun, but challenging to understand what to install.
Things I'd like to have clarified or explained in more detail: