100-days-of-react-native
100-days-of-react-native with WhiteBoard
This project serves as logs entries for the original react native project called WhiteBoard. I started this project on 10th October, 2019.
The project can be viewed at:
| View | URL |
|---|---|
Frontend Git 
|
https://github.com/shhdharmen/WhiteBoard |
Expo view 
|
https://expo.io/@shhdharmen/WhiteBoard |
| Backend Git
|
https://github.com/shhdharmen/white-board-strapi |
I am planning to build something with these requirements.
Logs
Day 0: October 10-11, 2019
Initial setup done
Today’s Progress:
- Read getting started docs for React Native and Expo.
- Created main project using Expo’s Managed Workflow with Typescript.
- Created both repos, logs and main project.
- Setup github actions to deploy and publish in main project.
Thoughts:
- It took some more time to complete initial setup, but that’s okay. I am happy with it
.
Links to work:
| Link | URL |
|---|---|
| Logs Project Github Pages :octclipboard: | https://shhdharmen.github.io/100-days-of-react-native/ |
| Main Project Git
|
https://github.com/shhdharmen/WhiteBoard |
Web 
|
https://shhdharmen.github.io/WhiteBoard/ |
| Expo
|
https://expo.io/@shhdharmen/WhiteBoard |
Day 1: October 12, 2019
Server and API setup
Today’s Progress:
- Created api server White Board Strapi project using Strapi
- Created 4 content-types in it:
- Notes
- Categories
- Colors
- Tags
- Created 4 content-types in it:
- Also deployed it on heroku
Link to work:
Day 2/3: October 14/15, 2019
Further authentication setup on server
Today’s Progress:
- I’ve setup policies so that logged-in user can see only owned notes, categories, tags.
- Added native base for UI kit, lottie for loader animation and react navigation for routing.
- Changed
primarytheme color of native base, guide here. - Created a
Maincomponent, which will hold all the navigations like below:-
HomeScreen- Currently it’s showing only loader. I will logically hide it and show dashboard page if logged in and login page if not. -
DashboardScreen- Just a skeleton -
LoginScreen- Just a skeleton -
RegisterScreen- Just a skeleton -
ForgotPasswordScreen- Just a skeleton
-
Thoughts:
- I will continue on how to store
jwttoken in react native and will implement login, register and forgot password next.
Link to work:
Day 4-5: October 18-19, 2019
Login, Auth flow and jwt token management
Today’s Progress:
- Upgraded
expo-cliversion - Read Authentication flows for React Navigation.
- Created animated routes.
- Read about environments and implemented.
- Used axios for HTTP client.
- Implemented show/hide for password field.
Link to work:
Day 6: October 31, 2019
Fetch notes
Today’s Progress:
- Fixed login UI.
- Fetched notes after login.
- Used
Cardof NativeBase to preview notes. - Added header in login and home screen.
- Added fonts:
PoppinsandAnonymousPro, thanks to https://fontpair.co/.
Link to work:
fonts, fetch notes, login ui corrections
Day 7: November 1, 2019
Change in content types, add note ui, settings ui, no notes ui
Today’s Progress:
- Created couple of UIs - No notes UI, Add Note UI, Settings UI.
- Added animations using react-native-animatable.
- Changed content types on backend and removed relationships.
- Added list-is-empty image when no notes are there.
- Created some shared components:
HeaderText(and input),TextLoaderto handle custom stylings.
Thoughts:
I really struggled with animations, but react-native-animatable made it easier at last.
Day 8: November 23, 2019
Colors, Archive, Edit and Delete Note
Today’s Progress:
- Used
react-native-color-palettefor color selections - Added update api calls
- Showing delete confirm dialog before actually deleting
- Archive note and undo it (by toast button)
Day 9: December 10th, 2019
Today’s Progress:
Fixed iOS specific issue. TouchableNativeFeedback is only working in android. So, made a shared component which will return TouchableNativeFeedback for android and TouchableHighlight for iOS.
Link to work:
Day 10: December 11th, 2019
Today’s Progress:
Added a searchbar with menu, search and thumb icons.
Link to work: