May 12
Practice React Native Project for beginners
I am not going to show you how to do it but I am attaching design files where you can practice multiple things related to React Native that you will do someday in your job project.
You will learn following things after doing this project.
- Flatlist
- Screen navigation
- Date Picker and Conversions
- Calendars
- Local storage Management
- Project structure
- Common reusable Components
Design Images, you don’t have to judge my design abilities. Show your creativity.
Design explanation
If user came first time, app should remember user’s email and password in local storage. Saving password is not good thing but we are only focusing on React Native and not doing it with backend. It’s just a practice project. Login page should have validations on email format and password length.
We have two tabs, home shows listing of stories and second shows calendar view.
User can add and edit Diary Stories. On add and edit your will learn how Date picker works. All entries should be saved in local storage and on edit it should update value in localStorage.
On Calendar view, hallow circles shows the entries available on that date. Filled circle shows selected date. On date select It shows diary story for that date.
On Story click from home or calendar It shows Story detail view.
npm packages
For Gradient view (multiple color buttons) You can use
For Date Picker Modal
For Date Picker
For Date conversion
For Calendar
I have attached useful npm packages those I have used multiple time and are very useful and simple. Although you can find better resources.
You can drop me a message anytime and we can have detail decision on issues you face. Also I would love to see your implementation.
