A React Native CRUD application with a simple reminder form and screen. Instructions to view and interact with the current project version can be found below.
- React
- JavaScript
- React Native
- No Backend.
- Frontend only.
- No data storage.
- Designed on iPhone.
- Data does not persist.
- Minimal Android design time.
- A user can create a reminder.
- A user can see when they will be reminded.
- A user can set a reminder to complete in that list.
- A user can see a list of all the reminders they have created.
- A user will receive a local notification five seconds after reminder creation outside of App foreground as a proof of concept reminder notification.
This application was built as a code challenge, and is my first foray into React Native. I utilized Expo Go Quickstart within the official React Native Documentation and read through all visibly pertinent material. Afterwards I read through all pertinent Expo Documentation since I decided to leverage it.
- To add a reminder press the plus icon/button in the upper left hand corner. Doing so will pull up the create reminder form.
- To exit the create reminder form press the x icon/button in the upper left hand corner.
- To create a reminder navigate to the create reminder form, type your reminder in the "Write Reminder" text input field, and press the calendar button/icon to set a date and time. After completion press the submit button. Your newly created reminder should appear on the reminders list screen.
- To mark a reminder as complete tap the square and a check will appear to mark it as complete.
- To delete a reminder tap on the reminder itself.
- To see the reminder notification that is automatically set upon reminder creation you must be outside the app itself. The notification will appear with the title 'Reminder' and the reminder text and scheduled date/time as a string.
- Reminder notifications are not tied to the actual date/time itself currently, as the current notification function is a proof of concept.
- Screen - Reminders List
- Form - Create Reminder
- Schedule Reminder Modal
- Created Reminder
- Multiple Reminders
- Completed Reminder
- Local Notification
- Attempting to schedule the date/time of reminders force closes the application. This behavior was recently reported in the react-native-modal-datetime-picker repository, to which I also reported the same behavior in this project since it utilizes it.
- UI/UX on some phones overtakes status bar.
- UI/UX on app overtakes some phone status bars.
- Reminder Preview section shows undefined when app initially loads or is reloaded.
- Reminders with completion checkmarks inherit lack of checkmark from above non-completed reminders when deleted.
- Reminders spill off the lower half of the screen and are not scrollable currently.
- Local non-app foreground notifications appear on utilized iPhone for development, but not on other iPhones. I have pinpointed it to be due to Apple permissions. Expo-permissions has been recently deprecated and I am learning to implement its replacement.
- Outsource much of the functionality within App.js as separate imported components.
- Learn expo-permissions replacement and implement it since expo-permissions has been deprecated for ios notification permissions. This also should help resolve the issue of local notifications not displaying in the app foreground.
- Implement ability to scroll on reminder list screen when reminders reach the point of spilling out of the screen itself.
- Eliminate undefined, null, and dash mark on reminder preview in the create reminder form when no input has been entered.
- Transform current 24-hour time format to AM/PM time format, or create an option to switch between them.
- Make reminders actually set local notifications to the inputted scheduled reminder date/time instead of five seconds from hitting submit button.
- Add ability to edit already created reminders inputed text and scheduled date/time.
- Add ability to schedule reminders as repeating events.
- Implement TDD, since development speed was prioritized in this project's initial iteration.
To view and interact with this project follow the steps below:
- Navigate to this link that takes you to an Expo Snack of this project: https://snack.expo.dev/@justicepelteir/mvpreactnativereminderapp
- You can either elect to interact with the app by choosing option one "Run on your device" or two "Show embeded code" option that can be found in the navigation bar.
- Option one will require you to download Expo Go on your cellphone.
- Option two only requires a computer and for you to select how you would like to view/interact with it.
- For more detailed instructions on navigating Expo Snacks click the following link for the official snack documentation.
MIT