Time waits for no man has to be the most suitable proverb today as we barely see it going with mobile phones in our hands. That is why everything revolves around mobile phones with now over 5 billion users and counting. Mobile apps are released into the market every single day.

Android and iOS are figuring out ways to design apps that are cost-effective and time-saving yet with a revolutionary idea. In fact, every app development company in Toronto is firing on all cylinders to come up with innovative ideas.

To develop mobile apps for android and iOS, you need to learn native app development over web app development. They are different and cost-effective. So the hybrid mobile app and cross-platform mobile app development advancements came up.

With multiple frameworks out there, an app development company in Toronto would look for a shorter development cycle, cost-efficient, and better app performance.

Facebook’s JavaScript library project has turned into one of the most popular and fast-developing platforms React Native. It looks and feels truly “native”.

What is React Native?

React Native is a JavaScript framework to develop mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

In other words, native app development company in Toronto can write apps better than web apps that look and feel truly “native” with the familiar JavaScript library. For your information, Facebook is a hybrid mobile app as well.

As code can be shared between platforms, the React Native app makes it easy to simultaneously develop for both Android and iOS.

Why React native?

As I said, there are lots of cross-platform frameworks like Cordova, Phonegap, Ionic, and more.But why React native? What is the difference when you work with a native app versus a hybrid app?

They all are hybrid frameworks consisting of HTML and web views. Think of it if you create cross-platform native app development using a single javascript framework. 

Is it really amazing? What makes native apps special over web apps?

The beauty of React Native is you are building a native mobile app that feels like a native. It is a valuable skill to create an app using the React native app these days.

Getting started with React native 

As like other Javascript frameworks, we will need Nodejs to start working with React Native.

Install Nodejs and npm

To install Nodejs and npm follow up with this link Guide to install Nodejs and npm.

There are two ways of getting started with React native.

  • If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native having a lot of features. The most relevant feature for us is that it can get you writing a React Native app within minutes.

You will only need a recent version of Node.js and a phone or emulator. If you’d like to try out React Native directly in your web browser, you can try out Snack.

So assuming you have installed Node.js, you can use npm to install Expo CLI command-line utility.

npm install -g expo-cli

Then create your first React Native sample app with the name Myfirstapp.

expo  init  Myfirstapp
cd   Myfirstapp
npm  start # you can also use: expo start

Run your React Native application

Open it in the Expo app to load your JavaScript.

Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.

You’ve successfully run and now you can modify your first React Native app using Expo CLI.

Running your app on a simulator or virtual device

Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. To run the app on an iOS Simulator or an Android virtual device, refer to the instructions for React Native CLI Quickstart to learn how to install Xcode or set up the Android app development environment.

Once these are done, you can launch the app on an Android virtual device by running npm run android or on the iOS Simulator by running npm run ios (macOS only).

Let us say you are familiar with mobile development. In that case, you may want to use React Native CLI. It requires Xcode or Android Studio to get started.

With these tools, you should be able to get up and running within a few minutes. If they are not installed, it will take an hour to install and configure them.

If you are using Mac, follow these steps:

Node, Watchman and Cocoapods

Install Node and Watchman using Homebrew. Run the following commands in Terminal after installing Homebrew:

brew  install node
brew install watchman
gem install cocoapods

If you are using Windows, follow these steps:

Node, JDK and Python2. Install Node and JDK via Chocolatey, a popular package manager for Windows.

choco  install -y nodejs.install python2  jdk8

Install Android Studio and SDK then Configure the ANDROID_HOME environment variable. Add platform tools to environment variables to Path.

Creating a new React Native Mobile Application

Note: If you previously installed a global React-native-cli package, please remove it as it may cause unexpected issues. This is a step by step process on how to create an app with React native.

npx  React-native init FirstApp

Running your React Native application

For Android

cd  FirstApp
npx  React-native run-android

iOS

cd  FirstApp
npx  React-native run-iOS

You can even run projects directly from within Xcode on Mac.You will see your new app running on iOS and Android shortly.To modify your app, choose an open project in the code editor such as Vscode and modify App.js and the hit R in iOS Simulator. To reload the app, click ctrl+R in windows emulator to reload the app.s

To debug the React native app using the simulator, hit âŒ˜D, and for windows emulator click Ctrl + D. If you are using a physical device shake the device for debugging the app.

How to make a React Native Todo List App

First of all, what is a todo list? A todo list contains all the daily stuff which we need to work on. So the example of a todo list is a collection of the things you want to get done by the end of the day.

So in cases where we have to add and delete, I came up with the idea to store the key-value pair of each todo item.

Here you will create a sample app using React Native. You may not find too many details, but this will be a great sample to start developing complex ones down the road.

As we have completed the configuration, we will start creating the React native todo list app. Let’s start.

npx  React-native init TodoList

cd  TodoList

npx React-native run-android or run-ios

Installing libraries will be discussed later but for this program, we will install the local storage library React-native-community/asyncstorage.This is an asynchronous, unencrypted, persistent, key-value storage system for the React Native app.

Steps to install React Native Async Storage 

npm  i --save @React-native-community/aysnc-storage
Or 
yarn  add @React-native-community/aysnc-storage

After installing the library, execute the steps given below.

cd ios && pod install

Import this library to the main screen and store and get data using a key-value pair.In the code below, the async storage is the local storage; it serializes the data with string and gets back by deserializing it. It stores the data into local storage.

let Tasks = {

convertToArrayOfObject(tasks, callback) {

// console.log("callback",callback,tasks.split("||").map((task, i) => ({ key: i, text: task })))

return callback(

tasks ? tasks.split("||").map((task, i) => ({ key: i, text: task })) : []

);

},

convertToStringWithSeparators(tasks) {
console.log("convert to string:",tasks.map(task => task.text).join("||"))
return tasks.map(task => task.text).join("||");
},

all(callback) {

return AsyncStorage.getItem("TASKS", (err, tasks) =>

this.convertToArrayOfObject(tasks, callback)

);

},

save(tasks) { // stores the key-value pair [todo list item]

AsyncStorage.setItem("TASKS", this.convertToStringWithSeparators(tasks));

}

};

We save the tasks to the local storage after the state changes. You should remember to do that in the callback of this.setState as it’s async function. So you don’t end up saving the old data instead.

//this method is to add todos.

addTask = () => {

let notEmpty = this.state.text.trim().length > 0;

if (notEmpty) {

this.setState(

prevState => {

let { tasks, text } = prevState;

return {

tasks: tasks.concat({ key: tasks.length, text: text }),

text: ""

};

},

() => Tasks.save(this.state.tasks)

);

}

};

//this method is for deletion of todos

deleteTask = i => {

this.setState(

prevState => {

let tasks = prevState.tasks.slice();

tasks.splice(i, 1);

return { tasks: tasks };

},

() => Tasks.save(this.state.tasks)

);

};

This is how styling done in React Native, an object that refers to each element and it’s in camel case different from CSS.

This is defined as an external stylesheet.

import {StyleSheet} from 'react-native' //this is how stylesheet is defined

const viewPadding = 10;

//This styles are create externally in sepearate file.

export default StyleSheet.create({

container: {

flex: 1,

justifyContent: "center",

alignItems: "center",

backgroundColor: "#F5FCFF",

padding: viewPadding,

paddingTop: 20

},

list: {

width: "100%"

},

listItem: {

paddingTop: 2,

paddingBottom: 2,

fontSize: 18,

flex:1,

flexWrap:'wrap'

},

You can save data locally using AsyncStorage which uses different tools on different platforms to save the data.Styling the native app is done externally so we have learned how to implement external files for styling. Kindly refer the complete repository via the following link: Todo List App with ReactNative

          

      

There should be a proper end and even can mention the link of Github [todolist app].

With this, we have learned how to create a todo list using React Native app. I would like to hear what you think of the blog. Was this useful? Tell me in the comments and have a discussion to get those doubts sorted out. You will find useful insights when you talk to a React native development company in Toronto. That way, you get to know how the industry focuses on creating apps that people need to satisfy their requirements.