Create an advance TO-DO app using React Native and Expo

Product Overview

To-do mobile application for keeping to-do records of past, present and future.

Development Setup

Requirement : 
1. Expo Cli
2. VS Code (IDE)

Expo Cli

make sure you have latest expo installed.

npm install -g expo-cli

Now initiate an expo project

expo init fact-todo
cd fact-tod
expo start
// choose blank template

Add React native elements for some community build awesome native elements.

expo install react-native-elements

Add Navigation to our project .. we would just need a stack navigator for now.

expo install @react-navigation/native @react-navigation/stack

and few other dependencies to run navigator

expo install @react-native-community/masked-view
expo install react-native-gesture-handler
expo install react-native-safe-area-context
expo install react-native-screens

Our package.json so far.

App.js

screens/welcome.screen.js

Now its time to create more screens such as todo.screen.js but before that lets add moment dependency . moment we will be using for handling dates.

expo add moment

ToDo Screen

in order to achieve this design we will be separating our to-do screen in components. We should remember that good react app is composition of components, even components are composition of various other components created by you or other developer (you should never invent the wheel again as it would be waste of time). So we need to understand the use of props and how the data follow between components. understanding these concept may some time becomes tedious and boring but trust me once you have a good hold on it you will remember your time invested in understanding the concept of props and unidirectional data flow entire your life. I do advocate that this is the most awesome concepts of react and one of the reason why react rocks!! so lets get going!!

So for now our todo screen will consist of two components:-
1. day-slider which will be a composition of two other components Dates and Date.

2. todos (list of todo) — more on it later.

We will be using some common color throughout our application so lets create constraints/color.js with code below

constraints/color.js

First create the screen for todo in screens/todo.screen.js as below

screens/todo.screen.js

this screen uses two components mainly DaySlider (that will contain slider code) and Todos (that will contain code for todos)

We will be creating four components in our components folder as below:

components/day-slider.js

components/dates.js

components/date.js

components/todos.js

Our design phase is almost complete and it looks like the target design. now it’s time to add business logic to it. which we will create in next part.