This a simple task app that runs Android/IOS. It can add, edit, delete, bookmark and mark as complete tasks. This is made with React Native frameworks and uses MMKV as storage and Redux toolkit with Redux Saga as state management.

The app prototype was first made using Figma before it undergo development. This ensure smoother development process and avoid redesigning while coding.

Figma Link

Getting Started

Note: Make sure you have completed the React Native - Environment Setup

Step 1: First clone this repository

git clone https://github.com/odenlerma/todo-app.git

Step 2: Install dependencies

Make sure you already have nodejs & npm installed in your system.

Go to folder and run the following commands:

npm install

#for IOS
cd ios && pod install && cd ..

Step 3: Run application

For Android

react-native run-android

# OR 
npx react-native run-android

For iOS

react-native run-ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

Troubleshooting

Android - Upgrade to JDK 17 issue

If you have encountered JDK issue, this is the workaround steps you can use.

1. Open Android Studio and open your project android folder.
2. Go to File > Settings > Build, Execution, Deployment > Build Tools > Gradle and change Gradle JDK to Embedded JDK JetBrains Runtime version 17.0.6 . Note the path of embedded JDK.

3. Click "OK"

4. Then we need to add the following line in our project. Go to android/gradle.properties

 org.gradle.java.home={path-to-your-Embedded-JDK}

5. Save and rerun app

If you can't get this to work, see the Troubleshooting page.

Deployment

Android - Google Playstore

Follow the following steps for Publishing to Google Playstore

Step 1: Generate an upload key

First we need to generate upload key and copy it to our project android/app directory. Follow the steps below on how to generate upload key.

For Windows

Open terminal and go to your jdk directory (eg. C:\Program Files\Java\jdkx.x.x_x\bin) and run the keytool below. Ensure replace my-upload-key and my-key-alias variable from keytool snippet

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

For macOS

Open terminal and locate JDK bin folder by running

/usr/libexec/java_home

Go to the the output JDK location and run keytool command. Ensure replace my-upload-key and my-key-alias variable from keytool snippet

sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Step 2: Set up Gradle variables

1. Place the my-upload-key.keystore file under the android/app directory in your project folder.
2. Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and edit the following (replace ***** with the correct keystore password, alias and key password)

#keystore
STORE_FILE=my-upload-key.keystore
KEY_ALIAS=my-key-alias
STORE_PASSWORD=******
KEY_PASSWORD=*****

3. Save changes.

Step 3: Generate AAB

Run the following command:

npx react-native build-android --mode=release

The generated file should be located inside android/app/build/outputs/bundle. This will be file you need to upload to Google Playstore console.

Notes: If you are to build for an update for an exisiting playstore app, remember to change versionCode and versionName from android/app/build.gradle

Testing release build of app

Run the following command to see release build of app

npm run android -- --mode="release"

Click here ror additional and more detailed steps

iOS - Apple App Store

Follow the following steps for Publishing to Apple App Store

Build app for release

1. Open .xcworkspace of you project in XCode.
2. Setup signing configurations. You will need an Apple Developer account here. Click here for additional guides.
3. Click Product > Archive . Make sure to set the device to "Any iOS Device (arm64)".
4. After the archive is completed, in the archive window, click on Distribute App.
5. Click on App Store Connect now (if you want to publish in App Store).
6. Click Upload → Make sure all the check boxes are selected, hit Next.
7. Choose between Automatically manage signing and Manually manage signing based on your needs.
8. Click on Upload.
9. Now you can find it in the App Store Connect under TestFlight.

Now fill up the necessary information and in the Build Section, select the build of the app and click on Save → Submit For Review.

Click here ror additional and more detailed steps

Dependencies

React Native MMKV

Repo: Link

This was used as storage for the tasks. This was used because it is deemed to be faster than AsyncStorage for local storage of data.

Supporting Articles: Link1 Link2

Redux Toolkit

Website: Link

This was used because it simplifies state management, reduces Redux boilerplate, supports async logic, and is officially supported by the Redux team. Since createStore was depreciated in Redux and it was suggested to use this instead.

Redux Saga

Website: Link

This was used because it will provide a middleware solution for managing side effects, such as asynchronous operations, in Redux applications.

React Native Animatable

Repo: Link

This was used for a ready-made and easy to use animation.

React Native Date Picker

Repo: Link

This was used for modal type picker for date.

React Native Modal

Repo: Link

This was used for root modal type and is more easier to use than built in modal of React Native

React SVG and React Native Lottie

Repo: SVG Lottie

This was used for customized icons within the app to match app aesthetics.

React Navigation

Website: Link

This was used for routing screens and passing parameters from one screen to another

Contributing

Looking to contribute something to TODO? Here's how you can help.

License:

The MIT License (MIT)

Copyright (c) 2024 odenlerma

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.