React Native ToDo app with NativeBase, Hasura & Redux

If you are new to the world of React Native, or even programming for that matter, one of the first things that you would do is go online and look for guidance on what to do to become a programmer.

You would then see multiple blog posts, tutorials and forums suggesting you to try and build a ToDo App.

The main reason for this is that a ToDo App is simple enough to get you started with any new framework. Also, A ToDo App covers some of the fundamental functions like Read, Write, Update and Delete.

Here is a React Native Todo App built by Rishichandra Wawhal. The App uses NativeBase for UI, Hasura for backend, and Redux for State Management.

Getting Started

Before getting started, make sure that you have the Hasura CLI tool installed in your system.

Installing the hasura CLI | Hasura 0.15 documentation

Clone the project

Type the following command into your command terminal to clone the app into your directory:

hasura quickstart roarman/native-base-todo-hasura

This command will also create a free hasura cluster for you.

Configure the project

Install the node modules by running the following command:

cd react-native && npm install

To get your cluster name, run:

hasura cluster status

Copy the cluster name, then go to react-native/src/hasuraAPI.js. Add your cluster name to this file.

clusterName = "buns47" //here "buns47" is the cluster name. Add your own.

Deploy the project with git push

git add . 
git commit -m "First commit"
git push hasura master

You can find the entire source code of the app here:

Hasura Hub - roarman/native-base-todo-hasura

If you liked this app, be sure to check out some of our NativeBase demo apps at https://startreact.com

I am Rajat S, a Technical Content Writer at GeekyAnts. Follow me on Twitter to know more about all the amazing things that are happening at GeekyAnts.

Thanks for reading! Please do 👏 if you liked this post and give us your feedback in the comments below.

Also check out BuilderX — A new design tool by GeekyAnts that writes React Native code for you!