Forem: Umang Darji

Firebase analytics in React native app

Umang Darji — Sun, 29 Mar 2020 18:23:13 +0000

In this post, you’ll learn how to implement the easy to integrate Firebase Analytics in React Native apps.

Complete code of this post can be found in the Github repository react-native-firebase-analytics

What is analytics

Analysis is focused on understanding the past; what happened and why it happened. Analytics focuses on why it happened and what will happen next.

Analytics is a free app measurement solution that provides insight on app usage and user engagement.

Organizations may apply analytics to business data to describe, predict, and improve business performance. Specifically, areas within analytics include predictive analytics, prescriptive analytics, enterprise decision management, descriptive analytics, cognitive analytics, Big Data Analytics, retail analytics, supply chain analytics, store assortment and stock-keeping unit optimization, marketing optimization and marketing mix modeling, web analytics, call analytics, speech analytics, sales force sizing and optimization, price and promotion modeling, predictive science, credit risk analysis, and fraud analytics. Since analytics can require extensive computation (see big data), the algorithms and software used for analytics harness the most current methods in computer science, statistics, and mathematics

Why is analytics important?

Internet marketing without analytics is like pointing at NYC and saying “the building is somewhere in there.” Internet marketing with analytics is akin to pinpointing the exact location of a specific building using satellite technology.

Analytics allow you to quantify the effects of making a change to your marketing strategy, and that’s invaluable to the process of improving and optimizing online marketing campaigns. The biggest benefit of utilizing proper analytics is being able to identify strengths and weaknesses.

Analytics essentially allow for a defined path of optimization that leads to better results on all fronts.

What is React-Native

TLDR; — React Native (RN) apps are more “native” than webview apps made by Cordova / Ionic. But React Native is yet to release a stable (1.0.0_) version of the framework.

React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

React Native applications render using real mobile UI components, not webviews, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. Facebook, Palantir, TaskRabbit etc are already using it in production for user-facing applications.

React Native

Firebase

Firebase is a Backend-as-a-Service (BaaS) platform. It started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and a variety of functionalities available on it.

Some of the quick integrations available with Firebase are

Email Authentication
Social logins
Real-time database
Analytics
Crashlytics
Push notifications
In-app messages
Remote config

and much more. Firebase is quickly growing to become the most popular mobile app back-end platform.

Enough of story-telling, let’s dive into — how to implement analytics in React Native apps

Structure

I will go ahead in step-by-step fashion so you can follow easily.

Create a Firebase project and find analytics options
Create a basic React Native app
Running the app on a device
Install firebase analytics dependency
Implement analytics in your app
Send analytics event from app to firebase dashboard
Check this event on Firebase dashboard.

So let’s dive right in!

Ouch! Let’s ….. not dive

1. Create a Firebase project and find analytics options

Go to Firebase and create your first project (or use an existing one). Your console should look like this

Your Firebase projects all in one place

Note — It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of this blog

Click on your project and you’ll enter the project’s dashboard. Look for the Analytics tab. This is where the magic will happen!

Analytics dashboard

For setting up options, you’ll first have to create an Android app in Firebase console.

Add a new Android app in Firebase

During the process, it will ask you to enter app’s package name and provide google-services.json. Make sure you keep the package name same as what you are setting in config.xml of your app. (If we create a new project called “HelloWorld” using react native CLI, by default package name for android project will be “com.helloworld” and default bundle identifier for iOS app will be “org.reactjs.native.example.HelloWorld”., don’t use the default package name)

Download google-services.json

2. Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.60

Create a blank react-native app (Replace myApp with your own name)

$ react-native init myApp

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

Step 3: Running the app on a device

To run the iOS app, you should specify simulator

react-native run-ios --simulator=”iPhone X”

To run Android app, you should start emulator first, either via Android Studio or adb , then call

react-native run-android

You’ll see the default start screen

Default start screen for React Native app

4. Install firebase analytics dependency

Install this module with Yarn:

yarn add @react-native-firebase/analytics
yarn add @react-native-firebase/app

Need to install the module manually? Follow this guide installation guides.

Android:-

The following steps are only required if you are using React Native <= 0.59 or need to manually integrate the library.

Update Gradle Settings

Add the following to your projects /android/settings.gradle file:

include ':@react-native-firebase_analytics'
project(':@react-native-firebase_analytics').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/analytics/android')

Update Gradle Dependencies

Add the React Native Firebase module dependency to your /android/app/build.gradle file:

dependencies {
...
implementation project(path: ":@react-native-firebase_analytics")
}

Add package to the Android Application

Import and apply the React Native Firebase module package to your /android/app/src/main/java/**/MainApplication.java file:

Import the package:

import io.invertase.firebase.analytics.ReactNativeFirebaseAnalyticsPackage;

Add the package to the registry:

protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactNativeFirebaseAnalyticsPackage(),

Rebuild the project

Once the above steps have been completed, rebuild your Android project:

react-native run-android

iOS:-

The following steps are only required if you are using React Native <= 0.59 or need to manually integrate the library.

Installation can be done via CocoaPods (recommended) or via Frameworks:

1. CocoaPods Installation

Add the RNFBAnalytics Pod

Add the RNFBAnalytics Pod to your projects /ios/Podfile:

target 'app' do
...
pod 'RNFBAnalytics', :path => '../node_modules/@react-native-firebase/analytics/ios'
end

Update Pods & rebuild the project

You may need to update your local Pods in order for the RNFBAnalytics Pod to be installed in your project:

$ cd /ios/
$ pod install --repo-update

Once the Pods have installed locally, rebuild your iOS project:

react-native run-ios

2. Manual Framework Installation

If your environment does not have access to Cocopods, it is still possible to install the project via Frameworks.

TODO

Device Identification

If you would like to enable Firebase Analytics to generate automatic audience metrics for iOS (as it does by default in Android), you must link additional iOS libraries, as documented by the Google Firebase team. Specifically you need libAdIdAccess.a and AdSupport.framework.

The way to do this using Cocoapods is to add this to your Podfile (though please use the most current Pod version supported by react-native-firebase):

ios/Podfile:

// ..
target 'app' do
// ..
pod 'RNFBAnalytics', :path => '../node_modules/@react-native-firebase/analytics/ios'
pod 'GoogleIDFASupport', '~> 3.14.0'
end

5. Implement analytics in your app

The Analytics package will automatically start tracking events such as when users clear app data, dismiss notifications and more. To view the full list of automatic events, see this page of the official Firebase documentation.

The package also provides a JavaScript API to allow for logging custom events and metrics throughout your application.

Import the Cloud Functions package into your project:

import analytics from '@react-native-firebase/analytics';

The package also provides access to the firebase instance:

import { firebase } from '@react-native-firebase/analytics';

Custom events

To log a custom event, use the logEvent method:

import analytics from '@react-native-firebase/analytics';
async function onProductView() {
     await analytics().logEvent('product_view', {
                 id: '123456789',
                 color: 'red', 
                 via: 'ProductCatalog',
      });
}

Attaching user data

User data can be attached to analytical events via the setUserId, setUserProperties and setUserProperty methods. Each Firebase project can have up to 25 uniquely named (case-sensitive) user properties.

import analytics from '@react-native-firebase/analytics';
async function onSignIn(user) {
 await Promise.all([
   analytics().setUserId(user.uid),
   analytics().setUserProperty('account_balance', user.balance),
 ]);
}

Tracking screen names

Similar to Analytics on the web, it’s important to understand the user’s journey within your application, for example, tracking drop off points during an e-commerce transaction flow. The Analytics package provides a method called setCurrentScreen to help track this.

import React, { useEffect } from 'react';
import { View } from 'react';
import analytics from '@react-native-firebase/analytics';
function BasketScreen() {
async function trackScreenView(screen) {
    // Set & override the MainActivity screen name
    await analytics().setCurrentScreen(screen, screen);
}
// Track a screen view once the component has mounted
useEffect(() => {
    trackScreenView('BasketScreen');
}, []);
  return <View />;
}

Resetting analytics data

In some cases, resetting all analytics data is required on certain events such as signing out of the application. To achieve this call the resetAnalyticsData method.

import analytics from '@react-native-firebase/analytics';
async function onSignOut() {
    await analytics().resetAnalyticsData();
}

Reserved Events

The Analytics package works out of the box, however a number of events are automatically reported to Firebase. These event names are called as ‘Reserved Events’. Attempting to send any custom event using the logEvent method with any of the following event names will throw an error.

Reserved event list

app_clear_data
app_uninstall
app_update
error
first_open
first_visit
first_visit
first_open_time
first_visit_time
in_app_purchase
in_app_purchase
notification_dismiss
notification_foreground
notification_open
notification_receive
os_update
session_start
screen_view
user_engagement
ad_impression
ad_click
ad_query
ad_exposure
adunit_exposure
ad_activeiew

6. Send analytics event from app to firebase dashboard

Prepare a simple event from our app and send it to all Firebase console. For sending app event to dashboard I am just creating one component named it Analytics.js

Import this component to your app.js File like this.

analytics screen

We have added three buttons here for three events

Custom Event
Set User Event
Reset Analytics Data Event

So when you click on any of these buttons you can your app events recorded in Firebase dashboard.

7. Check this event on Firebase dashboard.

Attention: if the app is running with -FIRDebugEnabled it shouldn't take more than a few seconds for events to start appearing on the DebugView.

Dashboard View:-

Analytics Dashboard View

Event View:-

Event Details View:-

Event Details view

Conclusion

In this post, we learnt how to implement Analytics using Firebase in React native apps. We also learnt how to handle different types of actions and see their data in the dashboard.

Complete code of this post can be found in the Github repository react-native-firebase-analytics(master branch)

Next Steps

Now that you have learnt about setting up Analytics in React Native apps, here are some other topics you can look into

Firebase — Integrate Firebase | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

React Native Full App

Difference between Redux and Flux

Umang Darji — Sun, 29 Mar 2020 17:35:25 +0000

In this post, we’ll try to compare — Flux and Redux. Both technologies allow you to manage state in your app. Both are a great tool because they allow developers to quickly store and manage state in his app.

Redux is a standalone state management library, which can be used with any library or framework. If your background is React developer, then you have used the Redux library with React. The primary use of Redux is that we can use one application state as a global state and interact with the state from any react component is very easy whether they are siblings or parent-child.

Redux Logo

Basic usage of Redux comes into picture when the app gets large and complex. In such apps, simple data management as parent-child becomes difficult using props. There are multiple components trying to communicate with multiple other components. In such cases, Redux comes in handy.

Redux can be broken down into few sections while building the application which is listed below.

Actions: “are payloads of information that send data from your application to your store. They are the only source of information for the store.” this means if any state change necessary the change required will be dispatched through the actions.

Reducers: “Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.” when an action is dispatched for state change its the reducers duty to make the necessary changes to the state and return the new state of the application.

Store: with help of reducers a store can be created which holds the entire state of the application it is recommended to use a single store for the entire application than having multiple stores which will violate the use of redux which only has a single store.

Components (UI): This is where the UI of the application is kept.

Middlewares: middleware can be used for a variety of things, including asynchronous API calls. Middleware sounds much more complicated than it really is. The only way to really understand middleware is to see how the existing middleware works and try to write your own.we will cover middleware in the next blog.

Redux workflow in simple schematic

What is the Flux?

Flux is a Javascript architecture or pattern for UI which runs on unidirectional data flow and has a centralized dispatcher. It is useful when your project has dynamic data and you need to keep the data updated in an effective manner. It was created by Facebook and complements React as view. This model is used to ease maintenance. It has three primary components: Views, Stores, and Dispatcher. As the MVC application grows, we find many numbers of views as models, which are all talking to each other, making it difficult to manage and debug.

Flux logo

Flux is more of a pattern than a framework and does not have any hard dependencies. However, we often use EventEmitter as a basis for Stores and React for our Views. The one-piece of Flux not readily available elsewhere is the Dispatcher. This module, along with some other utilities, is available here to complete your Flux toolbox.

Flux can be broken down into few sections while building the application which is listed below.

dispatcher: The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each store registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.

Store: In Flux, Stores are simply a place where data is read out from. More specifically, Views within a Flux architecture will be notified of changes within Stores via the Observer pattern, and then query for those data in order to update their own states.

View : This is where the UI of the application is kept.

Flux Work Flow

const someAction = {
  type: "Test",
  payload: {user: "Test User", age: 25},
}

This is a generally accepted convention to have a type and a payload for an action. The payload can be any valid JS type (array, object, etc ).

Top 10 Attributes to Consider While Selecting the State Management tool for any website.

To decide which one is better for State Management, lets first define the attributes based on which we will compare all of the above. And, these are:

Developed By
Stable Release
Initial Release
Github Stats
Store
Dispatcher
State
Workflow
Final Words (Pros and cons)

Developed By:-

Redux was created by Dan Abramov and Andrew Clark. Abramov began writing the first Redux implementation while preparing for a conference talk at React Europe on hot reloading.

Flux was created by Facebook For forcing an unidirectional flow of data between a system’s components.

Initial Release:-

Redux:- 2, June 2015
Flux:- June 2011

Stable Release:-

Redux:- 4.0.0 in April 2017

The major changes in the stable release are around our TypeScript definitions, bundled CommonJS and ES builds, throwing if you subscribe or getState from a reducer, and a bunch of other smaller things. The full changes are listed below.

Flux:- 3.1.3 on Nov 2016

The major changes in the stable release are added support for React 16

Github Stats:-

Flux:-

Github Stars:- 16331

Contributors:- 114

Total commits:- 394

Total open issues:-10

Total Closed Issues:-216

React:-

Github Stars:- 50499

Contributors:- 698

Total commits:- 2094

Total open issues:-27

Total Closed Issues:-1648

Store:-

With Flux it is a convention to have multiple stores per application; each store is a singleton object. In Redux, the convention is to have a single store per application, usually separated into data domains internally (you can create more than one Redux store if needed for more complex scenarios).

Flux:- Multiple Store

Redux:- Single Store

Dispatcher:-

Flux has a single dispatcher and all actions have to pass through that dispatcher. It’s a singleton object. A Flux application cannot have multiple dispatchers. This is needed because a Flux application can have multiple stores and the dependencies between those stores need a single manager, which is the dispatcher.

Redux has no dispatcher entity. Instead, the store has the dispatching process baked in. A Redux store exposes a few simple API functions, one of them is to dispatch actions.

State:-

The other bigger constraint is that the store’s state in Redux cannot be mutable (or really, shouldn’t be). There is no such constraint in Flux, you can mutate the state as you wish. The state’s immutability, in Redux, is achieved easily by making the reducers pure functions (with no side effects). Redux reducers always copy the state they receive and returns a modified version of the state’s copy, not the original object itself. While this is a big constraint, it makes life much easier long term.

Redux:- Immutable

Flux:- Mutable

Workflow:-

Having a similar state, action and unidirectional data flow, the Flux and Redux do have some workflow differences. Let’s understand the two technologies one-by-one.

How Flux Functions

Flux, in simple term, allows unidirectional data flow which is an essential part of keeping things predictable. You can understand this; you need to know how MVC architecture functions. The MVC architecture includes;

Action → Controller → Models →Views

In which Models and Views do not follow the bidirectional data flow which becomes extremely tough when complexity gets higher. There will be no clue to find exactly where the changes occur and that in result give rise to bugs.

While unidirectional data flow abided by Flux empowers applications to avoid the shimmering effect, and the process takes place something like the diagram below;

You may have got the precise idea of how Flux works.

How Redux Functions

As Redux is predictable state container for JavaScript apps, it has actions like Flux but here it’s a simple JavaScript object while using Redux, action will turn into functions and promises. It’s a small library and has been designed with a concept to be a predictable container for application state. Flux can be implemented along with a number of frameworks while Redux works to simplify and streamline the concept of (most of) Flux.

Redux is built on the concept of;

Actions → Store → Reducers → Subscriptions

As you can see in some cases, Flux matches the Redux. The two technologies are also similar in terms of unidirectional data flow and aligning state implying ‘type’ field.

Final Words:-

Flux and Redux are a very integral part of the development and it is equally important for developers to know their usages. They are a small but powerful tool which makes your applications’ user interface attractive and usable.

Some pros and cons of Redux and Flux

Redux

Predictable State
Work well with react
Easy Debugging
Log Everything
Test without browser
Hot reloading
State stored in a single object

Flux

Unidirectional Data flow
No MVCopen Source

Next Steps

Now that you have learnt the major differences between Redux and flux for state management in your app, you can also try

React Native life cycle hooks
How To integrate in React Native — Image picker| Integrate Firebase
Create Awesome Apps in React Native using Full App
Firebase Push notifications in React Native Apps

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

Async actions with Redux Thunk middleware in React Native apps

Umang Darji — Sat, 28 Mar 2020 14:35:39 +0000

This post will assist any developer to learn on how to implement async actions with the help of middleware (redux-thunk) in react native apps. We’ll approach the implementation by creating a simple application.

Complete source code of this tutorial is available in the React-native-redux-thunk-example

What Is React Native?

React Native logo

React Native is a JavaScript framework for writing real, natively rendering 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: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.

What is Redux?

Redux Logo

Basic usage of Redux comes into picture when the app gets large and complex. In such apps, simple data management as parent-child becomes difficult using props. There are multiple components trying to communicate with multiple other components. In such cases, Redux comes in handy.

Redux can be broken down into few sections while building the application which is listed below.

Components (UI): This is where the UI of the application is kept.

Middlewares: Redux allows us to put a middleware that sits between an action being dispatched and the action that reaches to the reducers. Two very popular middleware libraries that will allow for side effects and asynchronous activities are Redux Thunk and Redux Saga. We’ll learn more about thunk here.

Redux Thunk is the middleware that lets you call the action creators that return a function instead of the action object. That function then receives the store’s dispatch method, which is then used to dispatch the regular synchronous actions inside a body of the function once the asynchronous operations have completed. The thunk is a concept in programming where a function is used to delay the evaluation/calculation of an operation. I know it’s too much of jargon, so let’s see how it works in the app.

Redux workflow in a simple schematic

Steps for Implementing R`edux-thunk` in React Native app

We will follow these step-by-step instructions to create our React Native with Redux Thunk

Step 1: Create a Basic React Native app

Step 2: Running app on a device

Step 3: Install the necessary packages to connect your app with redux.

Step 4: Create the necessary folders inside Root.

Step 5: Create Actions.

Step 6:- Create rootReducer and postReducer.

Step 6: Create a Redux Store.

Step 7: Pass the Store to the React Native app.

Step 8: Connect React Native app to Redux store.

Step 9: Test your app

Step 10: What is the basic difference between redux-thunk and redux-saga?

So let’s dive right in!

Ouch! Let’s ….. not dive

1. Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.60

Create a blank react-native app (Replace myApp with your own name)

$ react-native init myApp

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

Step 2: Running app on device

To run the iOS app, you should specify simulator

react-native run-ios --simulator=”iPhone X”

To run Android app, you should start emulator first, either via Android Studio or adb , then call

react-native run-android

You’ll see the default start screen

Default start screen for React Native app

Step 3: Install the necessary packages to connect your app with redux.

npm

npm install redux react-redux redux-thunk

yarn

yarn add redux react-redux redux-thunk

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run npm ls react and make sure you don’t have a duplicate React installation in your node_modules. We recommend that you use npm@3.xwhich is better at avoiding these kinds of issues.

The React Redux docs are now published at https://react-redux.js.org .

If you want to know how it works, check out this link

Step 5: Create the necessary folders inside Root

Let’s keep this image in mind to help us understand which parts of Redux are implemented at what step.

To work with redux you can follow this folder structure for better code quality

Create the following folders.

actions
constants
reducers
components

Step 6: Create Constants and Actions

6.1 Inside the constants folder, create one file called index.js. Add the following line inside index.js.

const GET_PAGE_LIST = 'GET_PAGE_LIST';

6.2 Inside the actions folder, create one file called pageList.js. Add the following code inside pageList.js.

Actions are JavaScript objects that represent payloads of information that send data from your application to your Redux store.

Actions have a type and an optional payload. In our case, the type will be GET_PAGE_LIST and the payload pageList which we are assigning into our pageList variable in store.

import { GET_PAGE_LIST } from '../constants';

export function setPageList(pageList) {

return {

type: GET_PAGE_LIST,

payload: pageList,

};

export function getPageList() {

return async (dispatch) => {

try {

const apiReq = await fetch('http://dummy.restapiexample.com/api/v1/employees', {

method: 'GET'

});

console.log(apiReq);

await dispatch(setPageList(apiReq));

return apiReq || [];

} catch (error) {

console.error(error);

};

So, here we have defined an action that calls the API and gets a response from the server. Remember, the reducer is a pure function, and we do not want any asynchronous call inside reducer, all the asynchronous actions are called here inside actions.

But, we need to connect this action to our App.js component somehow. Otherwise, we cannot add the data into the Redux store. Also, we need to first create a store. But before that, we also need to create a reducer function. So, first, create a reducer → then create a store and → then connect the React Native application to the Redux store.

Actions created …

Step 6:- Create rootReducer and postReducer.

Now, inside the reducers folder, create one file called pageList.js.

Write the following code inside the pageListReducer.js.

import { GET_PAGE_LIST } from '../constants';

const initialState = {
pageList: []
};

const pageListReducer = (state = initialState, action) => {
switch(action.type) {
case GET_PAGE_LIST:
return {
...state,
pageList: []
};
default:
return state;
}
}

export default pageListReducer;

So, here, we have defined the function called pageListReducer that accepts the two arguments.

state
action

The first time, it will take the initial state of our application, and then we pass whatever argument, it takes that argument and operates based on the case execution. The second argument is action, which consists of type and payload. The payload is the count value, which assigned to count variable in store.

Remember here — we have returned a new state and not existing state. So we have modified the state in a pure manner.

Actions and reducer created

Step 7:-Create a Redux Store.

Inside the root folder, create one folder called store and inside this folder add one file called configureStore.js add the following code.

import { createStore, combineReducers } from 'redux';

import pageReducer from '../reducers/pageReducer';

import { applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

const rootReducer = combineReducers(

{ pageList: pageReducer }

);

const configureStore = () => {

return createStore(rootReducer, applyMiddleware(thunk));

export default configureStore;

Here, we have created the redux store and passed the reducer to that store. This store will ideally contain all the data that handles the app state.

The combineReducer function combines all the different reducers into one and forms the global state. So this is the global state of our whole application.

Step 8: Pass the Store to the React Native app.

Inside the root folder, you will find one file called index.js and inside that file add the following code.

Index.js

It is almost the same as React web application, in which we pass the Provider as a root element and pass the store and then via react-redux’s connect() function, we can connect the any react component to redux store.

Store connected to the app

Step 8: Connect React Native app to Redux store.

Finally, we connect our App.js component to the Redux store. For that, we need the connect() function from the react-redux library.

Connect which needs to be imported from react-redux and with the help of connect the properties will be mapped to the UI component.

mapStateToProps will contain all the state properties which will be available to the components of the app whatever properties that need to be accessed from the UI components need to be written into the mapStateToProps helper function.

mapDispatchToProps will contain all the necessary functions wrapped with action creators which will be mapped to the props of the app and can be called directly. The directory containing the below file is ./actions/pageList.js

Here, when we click on the get employee button, we get the Employees value from props and change it and then send it to the action with that value. Now that action returned the object with the action type and payload and based on the type the reducer will be executed and add that values inside the store.

Now, if the store’s values are changed, then we need to update the UI based on the new values. That is why the mapStateToProps function is created. So, when the store’s count get the new value, render function executed again and update the UI.

Step 10: Test your app:

Once you run the application the below UI will be rendered.

Once you click on any of the get employe buttons it will correctly fetch data from a server and render it on UI. Although, what we just did is nothing fancy for an app, remember everything is going through the whole “action-reducer-store-state” flow. This flow can handle large and complex apps, so you don’t get stuck in “props” loops.

(If you are from an Angular background, for ease of understanding, you can understand actions as something similar to methods in services which we can call from any component or page. Reducers are also similar functions, but they change the central store of the app. Store can be assumed as something similar to a $rootscope object which stores all the data at one place, and can be accessed from any page. Don’t draw a direct comparison between these things, this is just to help you understand the concept in an easier way.)

Hope this blog helps you to implement redux with middleware (thunk) in react native apps.

Step 10: What is the basic difference between redux-thunk and redux-saga?

In terms of implementation, Redux-Thunk and Redux-Saga couldn’t possibly be more different. However, in terms of what you can do with them… well, they’re actually very very similar. But not the same. Redux-Thunk and Redux-Saga differ in a few important ways.

But, first, let’s cover some background.

Redux-thunk and Redux-saga are both middleware libraries for Redux. Redux middleware is code that intercepts actions coming into the store via the dispatch() method.

An action can be literally anything.

But if you’re following best practices, an action is a plain javascript object with a type field, and optional payload, meta, and error fields. E.g.

const loginRequest = {

type: 'LOGIN_REQUEST',

payload: {

name: 'admin',

password: '123',

},

};

(by the way, this structure is called Flux Standard Action)

This is what the type signature looks like in TypeScript

type Action = {    
     type: string;    
     payload?: any;    
     meta?: any;    
     error?: boolean;
};

Redux-Thunk

In addition to dispatching standard actions, Redux-Thunk middleware allows you to dispatch special functions, called thunks.

Thunks (in Redux) generally have the following structure:

export const thunkName =   parameters =>   
     (dispatch, getState) => {         
   // Your application logic goes here      
 };

That is, a thunk is a function that (optionally) takes some parameters and returns another function. The inner function takes a dispatch function and a getState function -- both of which will be supplied by the Redux-Thunk middleware.

Here we have an example thunk that attempts to call a login API with a username and password. The thunk first dispatches an action indicating that the request is starting. It then makes the call. Finally, it dispatches either a success action or a failure action depending on whether or not the API call succeeded.

import * as api from 'api';

import { loginRequest, loginSuccess, loginFailure } from './loginActions';

export const loginThunk =

(name: string, password: string) =>

(dispatch: Function) => {

   dispatch(loginRequest());

   try {

      api.login(name, password);

   }catch (err) {

     dispatch(loginFailure(err));

     return;

   dispatch(loginSuccess());

};

When you dispatch your thunk, e.g. dispatch(loginThunk('admin', 'secret')); Redux-Thunk calls your inner function, which is essentially:

(dispatch: Function) => {

  dispatch(loginRequest());

  try {

     api.login('admin', 'secret'); // values from closure

  }catch (err) {

    dispatch(loginFailure(err));

    return;

  dispatch(loginSuccess());

};

Now that we’ve covered the basics of Redux-thunk, let’s look at Redux-Saga

Redux-Saga

Redux-Saga middleware allows you to express complex application logic as pure functions called sagas. Pure functions are desirable from a testing standpoint because they are predictable and repeatable, which makes them relatively easy to test.

Sagas are implemented through special functions called generator functions. These are a new feature of ES6 JavaScript. Basically, execution jumps in and out of a generator everywhere you see a yieldstatement. Think of a yield statement as causing the generator to pause and return the yielded value. Later on, the caller can resume the generator at the statement following the yield.

A generator function is one defined like this. Notice the asterisk after the function keyword.

function* mySaga() {    // ...}

We can rewrite the login functionality from before as a saga. It looks like this:

import * as api from 'api';

import { LoginRequestAction, loginSuccess, loginFailure } from './loginActions';

function* loginSaga() {

const action: LoginRequestAction = yield take('LOGIN_REQUEST');

const { name, password } = action.payload;

try {

yield call(api.login, name, password);

catch (err) {

yield put(loginFailure(err));

return;

yield put(loginSuccess());

Once the login saga is registered with Redux-Saga, it will begin executing immediately. But then the yield take on the the first line will pause the saga until an action with type 'LOGIN_REQUEST' is dispatched to the store. Once that happens, execution will continue.

The Biggest Difference

You might think the biggest difference is in the syntax. Although it’s true that writing and reasoning about thunks and sagas are quite different, there’s something bigger.

Thunks can never act in response to an action. Redux-Saga, on the other hand, subscribes to the store and can trigger a saga to run or continue when a certain action is dispatched.

Conclusion

In this post, you learned how to implement Redux with middleware(redux-thunk) in your React Native app. You learnt what are reducers, actions, and store, how the flow of data is managed in a Redux based app.

Now, chill

And that’s it! The application now uses Redux and Redux Thunk to fetch and display the data!

That wasn’t too difficult, was it?

And you’re now a Redux master :D

Stay tuned for more Ionic and React Native blogs!

Happy Coding.🤓👍🏼

Complete source code of this tutorial is available in the React-native-redux-thunk-example

Next Steps

Now that you have learnt about setting up Redux with middleware(redux-thunk) in React Native apps, here are some other topics you can look into

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

How to implement Redux in React Native apps

Umang Darji — Fri, 27 Mar 2020 04:19:43 +0000

This post will assist any developer to learn on how Redux works with react native by creating a simple application with basic data flow.

Complete source code of this tutorial is available in the React-native-redux-example

What Is React Native?

React Native logo

What is Redux?

Redux Logo

Basic usage of Redux comes into picture when the app gets large and complex. In such apps, simple data management as parent-child becomes difficult using props. There are multiple components trying to communicate with multiple other components. In such cases, Redux comes in handy.

Redux can be broken down into few sections while building the application which is listed below.

Components (UI): This is where the UI of the application is kept.

Redux workflow in simple schematic

Without further explanation, let’s get into the coding aspects.

Steps for Implementing Redux in React Native app

We will follow these step-by-step instructions to create our React Native with Redux

Step 1: Create a Basic React Native app

Step 2: Running app on device

‌Step 3: Add simple counter into the App.js.

Step 4: Install the necessary packages to connect your app with redux.

Step 5: Create the necessary folders inside Root.

Step 6: Create Actions and Reducer function.

Step 7: Create a Redux Store.

Step 8: Pass the Store to the React Native app.

Step 9: Connect React Native app to Redux store.

Step 10: Test your app

So let’s dive right in!

Ouch! Let’s ….. not dive

1. Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.60

Create a blank react-native app (Replace myApp with your own name)

$ react-native init myApp

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

Step 2: Running app on device

To run the iOS app, you should specify simulator

react-native run-ios --simulator=”iPhone X”

To run Android app, you should start emulator first, either via Android Studio or adb , then call

react-native run-android

You’ll see the default start screen

Default start screen for React Native app

‌Step 3: Add simple counter into the App.js.

Now we’ll changeApp.js to contain the UI required to render on the application with all the styling’s as shown below. The UI will contain two button’s and a text to show the count. All the class actions will be accessed using the this variable and all the state variable will be accessed using this.state which contain the current state of the app. Within the button onPress field, the actions will be called which are defined on the class in App.js.

So after adding this counter your App.js looks something like this.

Step 4: Install the necessary packages to connect your app with redux

In order to get redux to work with react-native few packages need to be installed as shown below

npm

npm install react-redux
npm install redux

yarn

yarn add react-redux
yarn add redux

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run npm ls react and make sure you don’t have a duplicate React installation in your node_modules. We recommend that you use npm@3.xwhich is better at avoiding these kinds of issues.

The React Redux docs are now published at https://react-redux.js.org .

If you want to know how it works, check out this link

Step 5: Create the necessary folders inside Root

Let’s keep this image in mind to help us understand which parts of Redux are implemented at what step.

To work with redux you can follow this folder structure for better code quality

Create the following folders.

actions
constants
reducers
components

Step 6: Create Constants, Actions, and Reducer function

6.1 Inside the constants folder, create one file called index.js. Add the following line inside index.js.

export const COUNTER_CHANGE = 'COUNTER_CHANGE'

6.2 Inside the actions folder, create one file called counts.js. Add the following code inside counts.js.

Actions are JavaScript objects that represent payloads of information that send data from your application to your Redux store.

Actions have a type and an optional payload. In our case, the type will be COUNTER_CHANGE, and the payload count which we are assigning into our count variable in store.

import { COUNTER_CHANGE } from '../constants';
export function changeCount(count) {
  return {
    type: COUNTER_CHANGE,
    payload: count
  }
}

The changeCount() function returns an action. Now based on that action, reducers function’s case is executed.

Actions created …

6.3 Inside reducers function, create one file called countReducer.js. Add the following code inside it.

A reducer is a pure function that takes the previous state and an action as arguments and returns a new state. The reducer is instrumental in keeping the current state of count updated throughout our app as it changes.

import { COUNTER_CHANGE } from '../constants';
const initialState = {
  count: 0
};
const countReducer = (state = initialState, action) => {
  switch(action.type) {
    case COUNTER_CHANGE:
      return {
        ...state,
        count:action.payload
      };
    default:
      return state;
  }
}
export default countReducer;

So, here, we have defined the function called countReducer that accepts the two arguments.

state
action

Remember here — we have returned a new state and not existing state. So we have modified the state in pure manner.

Actions and reducer created

Step 7:-Create a Redux Store.

Inside the root folder, create one folder called store and inside this folder add one file called configureStore.js add the following code.

import { createStore, combineReducers } from 'redux';
import countReducer from '../reducers/countReducer';
const rootReducer = combineReducers(
{ count: countReducer }
);
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;

Here, we have created the redux store and passed the reducer to that store. This store will ideally contain all the data that handles the app state.

The combineReducer function combines all the different reducers into one and forms the global state. So this is the global state of our whole application.

Step 8: Pass the Store to the React Native app.

Inside the root folder, you will find one file called index.js and inside that file add the following code.

Store connected to the app

Step 9: Connect React Native app to Redux store.

Finally, we connect our App.js component to the Redux store. For that, we need the connect() function from the react-redux library.

And finally, store is now connected to UI via State

Connect which needs to be imported from react-redux and with the help of connect the properties will be mapped to the UI component.

Here, when we click on the increment or decrement button, we get the count value from props and change it and then send it to the action with that value. Now that action returned the object with the action type and payload and based on the type the reducer will be executed and add that values inside the store.

Step 10: Test your app:

Once you run the application the below UI will be rendered.

Basic Redux Example

Once you click on any of the buttons it will correctly increment and decrement the count. Although, what we just did is nothing fancy for an app, remember everything is going through the whole “action-reducer-store-state” flow. This flow can handle large and complex apps, so you don’t get stuck in “props” loops.

Hope this blog helps you to implement redux with react native apps.

Conclusion

In this post, you learned how to implement Redux in your React Native app. You learnt what are reducers, actions and store, how the flow of data is managed in a Redux based app.

Now, chill

Stay tuned for more Ionic and React Native blogs !

Happy Coding.🤓👍🏼

Complete source code of this tutorial is available in the React-native-redux-example

The next post will be on how to implement async actions with the help of middlewares.

Next Steps

Now that you have learnt about setting up Redux in React Native apps, here are some other topics you can look into

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

React Native V/s Ionic V/s Flutter in 2019

Umang Darji — Fri, 27 Mar 2020 04:09:52 +0000

React Native V/s Ionic V/s Flutter in 2019

Type caption for image (optional)

In this post, we’ll try to compare — Ionic, React Native and Flutter framework. All three technologies allow you to build mobile apps for both iOS and Android. All three are great frameworks because they allow developers to quickly prototype and publish apps on multiple platform with single source code.

The first great thing is — You can publish apps without the need to learn Swift, Objective-C, Java or Kotlin! Instead, you’ll use JavaScript (for React Native, and Ionic) and Dart (for Flutter). Hence you’re able to create native apps for both platforms with one language instead of two — this obviously reduces the learning effort you have to take to build your mobile app by a lot!

Great! So how do these technologies differ, which one is the best choice for your next mobile project? Let’s take a look…

What is Ionic 4?

Ionic Logo

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

What Is React Native?

React native Logo

What is Flutter?

Flutter Logo

Flutter is Google’s portable UI toolkit for crafting high-quality native experiences for mobile, web and desktop in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine). See this architecture diagram for a better picture of the main components.

For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up the development of mobile apps and reduces the cost and complexity of app production across iOS and Android.

For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.

What’s the point of comparing these 3 Best Tools for Modern App Development?

When developers (or even non-developers) want to create an app for their startup or business, the first question that pops up in their mind is Which framework is best for app development. The question becomes important from cost, performance and time point-of-view.

We’ve got your back in case you are finding the best tool to develop a new mobile app or revamp existing app. This post tries to solve all your questions regarding best cross-platform app development tools and what to choose and when.

We also want to make one thing clear that what to choose and when always remains subjective and depends on many factors. But this post can help you decide the best framework according to your needs.

Flutter vs. React Native vs. Ionic

Flutter is a software development kit developed by Google by using the Dart programming language. React Native is an SDK developed by Facebook, and the designing of the mobile applications take place JavaScript. Ionic follows a different approach while compared to the other two. With Ionic, you will create a real native app using web app with HTML, JSS, and CSS. The wrapped web content ensures that you can re-use or re-code the code.

Top 11 Attributes to Consider While Selecting the Platforms for Cross-platform Mobile App Development

To decide which one is better for Cross-Platform Mobile App Development lets first define the attributes based on which we will compare all of the above. And, these are:

The Language Stack
Do not repeat yourself(DRY)
Rich pre-styled Component Library
Performance
User Interface
Ecosystem / Third-Party Libraries
Market and Community
Accessing Native Device Features
Supported Platforms
Popular Apps
Pricing

1. The Language Stack

With this metric, I want to explore which framework utilizes which programming languages and offer what benefits:

React Native: It utilizes JavaScript which is at present one of the most popular, dynamic and high-level programming language. It combines the advantages of JavaScript and React.JS and is backed by Facebook.

The solid side of React Native that makes it best among the other three frameworks in terms of PL is that it allows writing a few components in Swift, Objective-C or Java when developers require them. Utilizing native modules and libraries in React Native applications, you can manage computationally heavy operations like video handling or image editing.

Ionic framework: It uses HTML5, CSS, and JS to develop and run applications, and requires Cordova wrapper to access native platform controllers. Utilizing IONIC, you can also use TypeScript that improves the quality of the code.

Flutter: It utilizes Dart to develop high-quality applications for Android, iOS and the web. Dart is an amazing Programming language that offers plenty of benefits and is based on C/C++ and java. Despite being new, the language is soon expected to take the industry by storm.

Here is how you can rank these frameworks based on the advantages offered by their programming languages:

React Native (React)
Flutter (Dart)
Ionic Framework (Angular)

2. Do not repeat yourself (DRY)

With this metric, I want to explore how much of the code you write can be re-used for both platforms.

Ionic: Awesome re-usability! The “wrapped web app” concept ensures that you can easily re-use your code — you’re just building a wrapped web app in the end. The great component library of adaptive components (i.e. automatically styled for the platform the app runs on) also helps.

Flutter: Also really great to re-use. The widgets it ships with often don’t adapt to the underlying platform, instead you use Material Design on both platforms by default. The Flutter team is providing more and more iOS-styled components though. You can find out on which platform you’re running and manually swap widgets but that’s, of course, a bit more work than required by Ionic. If you need platform-specific re-styling, you can move the position of Flutter on the slider further to the right.

React Native: Also compiles to native defaults but only provides a basic set of components to start with. You have to style most of them on your own, hence more work is required to achieve appropriate styles on both platforms. Generally, code can be re-used though (since you still only use one language and libraries like Redux need no adjustment).

Here is how you can rank these frameworks based on the Code Reusability

Ionic Framework
Flutter
React Native

3. Rich pre-styled Component Library

How easy is it to build beautiful UIs? Do you have to create and style a lot of components (UI elements) on your own or do you have a rich suite of pre-built ones? Are the components adapting to the underlying platform automatically? That’s what this metric is about.

Ionic: Ionic in its core is a big set of pre-built (and pre-styled) components. The compiler/ toolchain which yields a native app is also part of the Ionic package (handled via its CLI) but it utilizes other packages like Cordova or Capacitor. The components provided by Ionic automatically adapt to the platform the app runs on and therefore, Ionic makes the creation of beautiful, native-looking apps a breeze!

Flutter: Flutter also ships with a comprehensive suite of built-in widgets. These mostly use the Material Design, some Cupertino-style (iOS style) widgets exist, too. More and more iOS-styled components are getting added. With all these widgets, you can quickly create nice-looking UIs without doing too much manual styling. Only if you need different looks for different platforms, some effort can be required since the widgets don’t adapt automatically.

React Native: A decent set of built-in components is provided but a lot of them need to be styled by you. And they’re non-adaptive, instead — just as with Flutter — you get alternatives for both operating systems. That requires adjustments in your code, where you have to choose, use and style widgets conditionally.

Here is how you can rank these frameworks based on the pre-styled Component Library

Ionic Framework
Flutter
React Native

4. Performance

This metric is the most important one and speaks for itself — how do the apps made in different frameworks perform from a run-time performance perspective?

React Native: The performance it provides is very similar to native applications as it renders code elements specifically to the native APIs. React additionally allow developers to use native modules written in native languages to write code for complicated operations. However, they can’t be reused across two platforms; their main purpose is to provide higher performance.

Ionic: In terms of performance, Ionic loses the game. Its performance isn’t as similar to React Native or flutter offers since it utilizes web technologies to render an application. This approach significantly decreases the speed. Also, it doesn’t utilize native components and tries to create a native look and feel by using web technologies.

The upside of Ionic is its quick testing process that runs instantly in a browser that streamlines the development process.

Ionic offers a poorer performance among these 3 as it’s a wrapped web app in the end. But this is often misunderstood! “Worse” sounds extremely bad but “worse” doesn’t actually mean “horrible” or even “bad”. Instead, you got worse performance than with the other approaches. In fact, on the devices we got these days, your app will probably run more than smooth! If you only (imaginary!) got 100fps instead of 105fps — would you notice a difference? You wouldn’t, so keep Ionic in your mind for your next app!

Flutter: When compared on the basis of app performance, it is the Flutter that takes the crown over its competitors. Because it has advantages of Dart and there is no JavaScript bridge for starting interactions with the device native components, the speed it offers is amazing.

Here is how you can rank these frameworks based on the performance they offer:

Flutter
React Native
Ionic

5. User Interface

Users judge apps within the first few seconds of usage and that’s why GUI of an app must be engaging while being easy — let’s see what these frameworks offer:

React Native: React Native modules associated with native UI controllers, which gives amazing user experience that is very close to native apps. It additionally utilizes the ReactJS library with extensive UI elements and streamlines the UI development.

Ionic: Ionic UI doesn’t utilize native elements at all and renders everything in HTML and CSS. Then it applies Cordova to give native mobile experience. Angular components that accompany the framework also enable Ionic apps look like the native ones.

Flutter: Flutter provides the best User Interfaces. No doubt Ionic give us cross-platform apps but their efficiency and performance cannot beat Flutter and React Native. They stuck and lack in responsiveness if an app is heavy and more native UI components are used.

Here is how you can rank these frameworks based on the UI they offer:

Flutter
React Native
Ionic

6. Ecosystem / Third-Party Libraries

What does the ecosystem look like? Is it easy to find help (on Stackoverflow etc) and are there enough third-party libraries available to add that one feature your app needs?

Ionic: Ionic uses JavaScript for its logic — and whilst you can use it with any (or no) JavaScript framework, it provides especially great support for Angular. Therefore, you benefit from these ecosystems. And the JavaScript, as well as the Angular ecosystem, is huge! Thousands of threads on Stackoverflow and packages on npm help you solve your problems.

Flutter: Flutter is seeing tremendous growth! You find quite a lot of discussions on Stackoverflow and third-party libraries and packages (on its own platform). Despite being relatively new, it’s already quite mature and has a decent ecosystem.

React Native: It uses JavaScript and React, hence you got those ecosystems available. Additionally, React Native on its own has quite a vibrant ecosystem and community, hence you find many threads on Stackoverflow and a lot of third-party packages that add missing functionalities. A downside is that you often need to rely on the ecosystem (like plugins, starters etc.) since only core features are included in React Native itself. React Native’s ecosystem in not as strong as others, and often keeps changing or the third-party plugins can’t keep pace with changing React Native

Here is how you can rank these frameworks based on the Ecosystem / Third-Party Libraries

Ionic
Flutter
React Native

7. Market and Community

Having a dynamic ecosystem is something worth being thankful for — but it matters how popular is an option? Let’s see:

React Native: React Native is the king when it comes to market and community recognition. The network of its developers is quickly growing and as of now has many experienced React Native Engineers. This makes it easy to kick start a React project. It utilizes an amazingly popular library (React) and the most essential web development language (JavaScript) and provides real native applications. These qualities make it a strong platform and are the reasons behind its fame.

Ionic: It is the second most popular framework after React. It empowers developers to build native mobile apps in the fastest possible way. Ionic has a huge community support, as well as a great marketplace where you can find a lot of starters and templates to jump start any app from Uber to Spotify.

Flutter: Flutter is a new framework for community right now and not very popular. But, it’s intensely advertised by Google that shows they want to make it a major thing in mobile world. Whilst it still has some tingle points, using it is fun and you can go rapidly from idea to prototype to app.

Here is how you can rank these frameworks based on their industry recognition and reliability:

React Native
Ionic
Flutter

8. Accessing Native Device Features

Your mobile apps most likely need access to some native device feature like the camera or GPS. How easy is it to get that access? And how easy is it for relatively new features (e.g. AR APIs provided by Android/ iOS)?

Ionic: Ionic uses Cordova or its own solution, Capacitor, to give you access to native device features. It provides a very decent set of packages to access common native device functionalities like the camera. You can also write your own wrappers around native functionalities and then include them in your code of course. Also, Ionic/Cordova and/or Angular plugins are very stable, and update readily with platform updates.

Flutter: Over the last year, the Flutter team put a lot of effort into providing official packages for some of the most common native device features you need access to. There also is a very vibrant ecosystem and hence you find a package for pretty much any native feature you might want to access. You can also write and connect real native code if you need to.

React Native: Being the most popular solution, you find a rich set of third-party packages as well as some built-in APIs for accessing native platform functionalities. Relying on third-party packages (which you mostly have to do) of course has the disadvantage that the core maintainers of that package might quit, hence the support is not on the same level as it is with Ionic or NativeScript.

Here is how you can rank these frameworks based on the Accessing Native Device Features :

Flutter
React Native
Ionic

9. Supported Platforms

React Native: Android 4.1+ , iOS 8+

Ionic: Android 4.4+ , iOS 8+ , Windows 10

Flutter: Not sure

10. Popular Apps

React Native: Facebook, Instagram, UberEats, Airbnb (they later removed RN from usage. Read More here — Why Airbnb left React Native)

Ionic: JustWatch, Pacifica, Nationwide and many more.

Flutter: Hamilton

11. Pricing

React Native: Completely open-source frameworks. Engineers can utilize this system and their libraries for free.

Flutter: Completely open-source frameworks. Engineers can utilize this system and their libraries for free.

Ionic: It is a free open source framework for developing cross-platform mobile applications. But, the organization offers its Pro Development Environment which is paid. The company guarantees that Ionic Pro accelerates the development process.

Final Words

Which Framework Is Best, When, And Why?

A broad comparison tell us this much

Ionic is popular for its easy learning curve due to web technologies while Flutter requires developers learning Dart to build apps. Also, Ionic is not a preferable choice for intense graphical apps or game development because of wrapper plugins that cause performance issues sometimes. Flutter is new and gradually growing with the support from best developers of Google and the community.

But, let us say that all these frameworks are best at their own. While choosing a framework for your cross-platform app development, you need to analyze many factors like budget, time, application size, platforms, and so on.

Let us know your views on different frameworks via comments below.

Next Steps

Now that you have learnt the major differences between Ionic framework, react native and flutter for mobile app development.

How To in React Native — Image picker| Integrate Firebase | Push notifications | Geolocation | Life cycle hooks
How To in Ionic — Image picker| Integrate Firebase | Push notifications | Geolocation | Video Player| RTL
Create Awesome Apps in React Native using Full App
Create Awesome Apps in IONIC 4 using Full App

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Type caption for image (optional)

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

Type caption for image (optional)

If you need a base to start your next Flutter app, you can make your next awesome app using Flutter Full App

Type caption for image (optional)
TitleSubtitleKicker

Facebook login in React Native apps

Umang Darji — Fri, 27 Mar 2020 03:49:53 +0000

In this post, you will learn how to implement a Facebook authentication in React native apps.

We will cook a sample app, where users can log in using their Facebook account. After login, the user can see their basic profile information on the home page.

Complete source code of this tutorial is available in the React-native-facebook-Login-Starter

Social logins — What and why

It’s helpful to use social sign-in with React Native for your users who would rather not create and remember another username/password combination. Instead, you can allow users to sign in with accounts they already own. You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. The user’s chosen provider will handle all of this for you. Plus, in mobile apps, the Facebook login is automatically done with the pre-installed Facebook app.

Facebook login — What and why

There are several reasons why you should use a Facebook login in your app

Ease of use — When a new user uses your app, only two buttons clicks are required to log in using Facebook. In another scenario, the user will have to type in an email/password and login
No “forgot password” — When your app uses Facebook login, the user does not have to worry about forgetting the password for your app’s login
No “verify email” — If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Facebook login will always have a valid email/phone number associated.
Single solution — Facebook log in can allow your users to use single login credentials across multiple devices
Facebook integration — If your app uses Facebook authentication, you can use Facebook APIs inside your app as well. This can include fetching user tweets etc.
Trust — Nowadays, people generally trust social logins moreover custom email logins. Social logins follow standard privacy protocols and hence are more reliable for information sharing

React Native Authentication

The React Native has been around for around 5 years and has been very popular among developers for its ease of usage over Swift / Java. Plus it requires you to have single source code for both an Android and an iOS app. What more can a developer ask for!

There are several ways of Authentication in React Native apps

Social logins — Social logins are a popular and easy way of authentication in mobile apps. You must have seen Google, Facebook, Instagram logins in almost all the modern apps. Social logins are easy to use and more reliable for quick integrations.
Back-end as a Service (BaaS) — You can use pre-built BaaS platforms which allows easy integration of authentication in your apps. Basically, these platforms provide you a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms.Firebase is the most popular among these for mobile apps
Create your own back-end — You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over user authentication. But this method is the most time taking one as well.

Steps for Facebook authentication

We will follow these step-by-step instructions to create our React Native app with Facebook authentication

Step 1: Create a basic React Native app

Step 2: Facebook Developer Console — Create your app

‌‌Step 3: Add your Platforms to Facebook

‌Step 4: Install the React Native FBSDK to connect your app with Facebook

Step 5: Running Apps

Step 6: Authenticate Users using Facebook

Step 7: Test your app on Android

1. Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.60

Create a blank react-native app (Replace myApp with your own name)

$ react-native init myApp

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

Step 2: Facebook Developer Console

The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our React Native application.

For that, you’ll need to go to the F acebook developer console and create a new app.

Create a new app in Facebook Developer console

Once we finish creating our app, we will go to the Facebook app dashboard and pick App Id from there. It will be required in installing the Facebook plugin in the app

Facebook Developer Console — App ID on top-left

‌‌Step 3: Add your Platforms to Facebook

We need to let Facebook know which platforms we’ll be using (if it’s just web, iOS, or Android).

‌In our case, we will add all platforms iOS and Android.

‌To add the platforms, go ahead inside your Facebook dashboard and click on Settings, then right below the app’s information you’ll see a button that says Add Platform, click it.

You’ll see several options for the platforms you’re creating

Options to create platforms

Add Platforms in Facebook dashboard

‌ Let’s start with iOS:- You’ll see a form asking you for some information, right now we just need the Bundle ID.

Create iOS app in Facebook console

‌Once you add the Bundle ID, just follow the process to create the app.

‌Android:- The difference is that instead of Bundle ID, Android calls it “Google Play Package Name.”

‌Step 4: Install the React Native FBSDK to connect your app with Facebook

Installation

Install JavaScript packages

Install the react-native-fbsdk package:

yarn add react-native-fbsdk

Or, if using npm:

npm install react-native-fbsdk

Finally, link the SDK to configure the iOS and Android projects:

react-native link react-native-fbsdk

Configure projects

Android

Assuming you have Android Studio installed, open the project with Android Studio.

Go to MainApplication.java under app/src/main/java/com/<project name>/ to complete setup.

import com.facebook.reactnative.androidsdk.FBSDKPackage;
// ...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FBSDKPackage()
      );
    }
};

Also, you need to add in your settings.gradle:

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that’s taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

iOS

The react-native-fbsdk has been linked by react-native link. The next step will be downloading and linking the native Facebook SDK for iOS.

Make sure you have the latest Xcode installed. Open the .xcodeproj in Xcode found in the ios subfolder from your project's root directory. Now, follow all the steps except the pod install (Step 2) in the Getting Started Guide for Facebook SDK for iOS. Along with FBSDKCoreKit.framework, don't forget to import FBSDKShareKit.framework and FBSDKLoginKit.frameworkinto your Xcode project.

If you’re using React Native’s RCTLinkingManager

The AppDelegate.m file can only have one method for openUrl. If you're also using RCTLinkingManager to handle deep links, you should handle both results in your openUrl method.

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  if ([[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options]) {
    return YES;
  }
if ([RCTLinkingManager application:app openURL:url options:options]) {
    return YES;
  }
return NO;
}

Troubleshooting

I cannot run the Android project.

Make sure you added the code snippet in step 3.1.
Make sure you set up a Facebook app and updated the AndroidManifest.xml and res/values/strings.xml with Facebook app settings.

I get a build error stating that one of the Facebook SDK files was not found — eg. FBSDKLoginKit/FBSDKLoginKit.h file not found.

Make sure that the Facebook SDK frameworks are installed in ~/Documents/FacebookSDK.
Make sure that FBSDK[Core, Login, Share]Kit.framework show up in the Link Binary with Libraries section of your build target's Build Phases.
Make sure that ~/Documents/FacebookSDK is in the Framework Search Path of your build target's Build Settings. You may have to select the All tab to see and search for the Framework Search Path.

I get build errors like Warning: Native component for "RCTFBLikeView" does not exist:

Make sure that libRCTFBSDK.a shows up in the Link Binary with Libraries section of your build target's Build Phases.

I get this build error: no type or protocol named UIApplicationOpenURLOptionsKey:

Your Xcode version is too old. Upgrade to Xcode 10.0+.

Step 5: Running Apps

To run the iOS app, you should specify simulator

react-native run-ios — simulator=”iPhone X”

To run Android app, you should start emulator first, either via Android Studio or adb , then react-native run-android .

You’ll see the default start screen

Default start screen for React Native app

Change the UI of this front page by changing app.js and the page will look like this

Step 6: Authenticate Users using Facebook

Usage

Login

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          onLoginFinished={
            (error, result) => {
              if (error) {
                console.log("login has error: " + result.error);
              } else if (result.isCancelled) {
                console.log("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    console.log(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => console.log("logout.")}/>
      </View>
    );
  }
};

Requesting additional permissions with Login Manager

// ...
import { LoginManager } from "react-native-fbsdk";
// ...
// Attempt a login using the Facebook login dialog asking for default permissions.
LoginManager.logInWithPermissions(["public_profile"]).then(
  function(result) {
    if (result.isCancelled) {
      console.log("Login cancelled");
    } else {
      console.log(
        "Login success with permissions: " +
          result.grantedPermissions.toString()
      );
    }
  },
  function(error) {
    console.log("Login fail with error: " + error);
  }
);

Now that the app is all connected to Facebook Auth, let’s write the actual code to call login/logout, etc functions.

First of all, I have created a separate file LoginController.js and imported it in App.js , just to maintain a good code structure.

My App.js looks like following (nothing fancy, I’m not even gonna waste a gist here)

import React, { Fragment } from 'react';
import LoginController from './LoginController';
const App = () => {return (<LoginController/>);};
export default App;

Yes, that’s it 😆

5.1 Implement a Facebook login button

In the LoginController.js , I add the Facebook login button using the following code

import { LoginButton, AccessToken } from 'react-native-fbsdk';
.....(inside render)
 <LoginButton
          onLoginFinished={
            (error, result) => {
              if (error) {
                console.log("login has error: " + result.error);
              } else if (result.isCancelled) {
                console.log("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    console.log(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => console.log("logout.")}/>
....

This shows the beautiful Facebook-Button as per their marketing guidelines.

Overall, my LoginController.js file looks like this (a bit long, I know)

Before Login
After login

Step 7: Test your app on Android

Let’s now build the app for iOS. I am using a simulator, but you can always use a real device as well.

Run the app on Android simulator using

react-native run-android

Here’s how my Facebook Login app works

Facebook Working

Conclusion

In this post, you learned how to implement Facebook login in your React Native app.

Complete source code of this tutorial is available in the React-native-facebook-Login-Starter

Next Steps

Now that you have learnt about setting up Push Notifications in React Native apps, here are some other topics you can look into

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

What’s new in Ionic React RC (and how to use it)

Umang Darji — Fri, 27 Mar 2020 01:30:17 +0000

If you are here, that means you have already heard about Ionic React RC is now out! and you are searching for how to create Ionic apps in react using Ionic React. If that’s true, then you are in the right place. Here I would be creating an Ionic app in React Using Ionic React. Need not worry, I would be taking you step by step how to make Ionic apps in React Using Ionic React.

The team behind Ionic announced the RC release of Ionic React. Developers can now make use of all the Ionic components in their React application. Ionic React ships with almost 70 components including buttons, cards, menus, tabs, alerts, modals, and much more. It also supports TypeScript type definitions.

What is Ionic? and why is Ionic React special

Ionic is an open source framework that consists of UI components for building cross-platform applications. These components are written in HTML, CSS, and JavaScript and can easily be deployed natively to iOS and Android devices, desktop with Electron, or to the web as a progressive web app.

Historically, Ionic has been associated with Angular, but this changed with its recent release, Ionic 4. Now, developers can use the Ionic app development framework alongside any frontend framework. The Ionic team has been working towards making Ionic work with React and Vue for a long time. React developers already have React Native to make native apps for iOS and Android, but with Ionic React they will also be able to create hybrid mobile, desktop, and progressive web apps. In the future, the team is also planning to make React Native and Ionic work together.

The Ionic team also recommends users to use TypeScript in their apps to get a better developer experience.

Ionic and React

Ionic has been gaining popularity in the last few years, and rightfully so. Making apps in Ionic is a breeze compared to Native languages (Java / Swift). Ionic framework’s domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.

React JS has come at a good time helping the developers to build highly engaging web apps and user interfaces quickly and efficiently. It allows you to break down the components and create a single page application with less coding. It is mostly popular for its shadow DOM, which it uses for limited scope DOM manipulation, which makes React apps faster. It is due to these major advantages that React JS has gained much spotlight.

For many years Ionic was stuck with Angular framework. But with Ionic 4, it has broken free of the framework restriction. Now Ionic 4 supports Angular, React and Vue JS frameworks.

In February 2019 the Ionic team announced Beta of Ionic React. Ionic React allows you to make your react frontend builds run everywhere, for example, iOS, Android, Electron and in the browser as a progressive web application (PWA) using any underlying framework.

Why is Ionic React needed

Explaining the motivation behind Ionic React, Ely Lucas, Software Engineer & Dev Advocate at Ionic wrote in the announcement,

“Ionic React RC marks the first major release of our vision to bring Ionic development to more developers on other frameworks.”

Though it is possible to import the core Ionic components directly into React projects, this method does not provide a good developer experience. Also, when working with web components in React, you need to write some boilerplate code to properly communicate with the web components.
Ionic React will essentially work as a “thin wrapper” around the core components of Ionic and will export them as native React components. It will also handle the boilerplate code for you. However, you still need to write a few features in the native framework such as page lifetime management and lifecycle methods. You can do this by extending the react-router package with @ionic/react-router.

Considering this is a release candidate, the team is not expecting many major changes. Sharing the team’s next steps, Lucas said,

“We will be looking closely at any issues that pop up during the RC phase and working on some final code stabilization and minor bug fixes…We also plan on creating some more content and guides in the docs to help with some best practices we’ve found when working with Ionic React.”

The team is now seeking developer feedback before they come up with the final release. If you encounter any issues, you can report it on the GitHub repo and tag the issue with “package react”.

To know further updates on Ionic React, you can also have a chat with the team who will be present at React Rally from August 22–23 at Salt Lake City, UT. This is a community conference that brings together developers of all backgrounds using React.js, React Native and related tools.

We at Enappd, already have an Ionic-React Starter Kit with beta version. We are quickly updating it to work with RC version.

Getting Started

1. Create a new react Project

If you haven’t already done so, grab the latest v5 release of the Ionic CLI:

npm i ionic -g

And create an Ionic React project by specifying the type of “react”:

ionic start MyReactApp --type=react

You will see that all of our standard starter templates are there, choose your favorite (I’ll choose a blank).

[INFO] Next Steps:[INFO] Next Steps:
- Go to your cloned project: cd .\MyReactApp
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Get Ionic DevApp for easy device testing: https://ion.link/devapp
- Go to your cloned project: cd .\MyReactApp
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Get Ionic DevApp for easy device testing: https://ion.link/devapp

2. Open the Project in the code editor of your choice

$ cd react-ionic
$ code .

3. Run the project in the browser

ionic serve

This command will search start script in your package.json file and run the command you mentioned in your start script. E.g.

“start”: “react-scripts start”

react-scripts start will build your code in development mode and run it on your browser

Ionic Blank Starter

so now you can see this screen on your browser

4. A look at a Package.json

Packages published to the registry must contain a package.json file. A package.json file lists the packages your project depends on, specifies versions of a package that your project can use, using semantic versioning rules.

At first glance it may look like there’s a lot going on, so let’s break it down, starting with the first three lines.

So what’s going on here? Well, the first three lines are very basic info about projects like name and version. The first being Name itself.

"name": "my-ionic-app",
"version": "0.1.0",
"private": true,

Required name and version fields

A package.json file must contain name and version fields.

The name field contains your package’s name, and must be lowercase and one word, and may contain hyphens and underscores.

The version field must be in the form x.x.x and follow the semantic versioning guidelines.

The next block is `dependencies`.

Dependencies are specified in a simple object that maps a package name to a version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.

Please do not put test harnesses or transpilers in your dependencies object. See devDependencies, below.

See semver for more details about specifying version ranges.

version Must match version exactly
>version Must be greater than version
>=version etc
<version
<=version
~version “Approximately equivalent to version” See semver
^version “Compatible with version” See semver
1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
http://... See ‘URLs as Dependencies’ below
Matches any version
"" (just an empty string) Same as
version1 - version2 Same as >=version1 <=version2.
range1 || range2 Passes if either range1 or range2 are satisfied.
git... See ‘Git URLs as Dependencies’ below
user/repo See ‘GitHub URLs’ below
tag A specific version tagged and published as tag See npm-dist-tag
path/path/path See Local Paths below

"dependencies": {
"@ionic/react": "^4.8.0-rc.0",
"@ionic/react-router": "^4.8.0-rc.0",
"@types/jest": "24.0.11",
"@types/node": "11.11.3",
"@types/react": "^16.9.1",
"@types/react-dom": "^16.8.5",
"@types/react-router": "^5.0.3",
"@types/react-router-dom": "^4.3.1",
"ionicons": "^4.6.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.0",
"typescript": "3.5.3"
}

The next block scripts.

The “scripts” property is a dictionary containing script commands that are run at various times in the lifecycle of your package. The key is the lifecycle event, and the value is the command to run at that point.

See npm-scripts to find out more about writing package scripts.

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Next block — `eslintConfig`

ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project. There are two primary ways to configure ESLint

Next block — Browserslist

The config to share target browsers and Node.js versions between different front-end tools. It is used in:

All tools will find target browsers automatically when you add the following to package.json:

"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

5. React in our Ionic app

We have already installed a plugin called @ionic/react which has all the dependency related to React Component in ionic.

6. React dependencies what we are using in this starter

These plugins are already installed in this starter.

React router is required for navigation purpose.

npm install react-router react-router-dom @types/react-router @types/react-router-dom

7. A look at a React Component

The base of our app will be in the src directory, and the main entry point will be our index.tsx. If we open our project in a code editor and open src/index.tsx, we should see the following:

So what’s going on here? Well, the first three lines are pulling in some dependencies.

The first being React itself. This allows us to write components in an HTML-like syntax called JSX. We’ll talk about JSX a bit more later on.
The second import is for ReactDOM. The ReactDOM.render method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.
The last import is the root component for our app, simply named App. This is our first React component and will be used in the bootstrapping process for our React app.

If we open App.tsx, we should see the following.

Let’s break it down too, starting with the first group of imports.

import React from 'react';
import { Route } from 'react-router-dom';
import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

Similar to index.tsx, we first must import React in order to use JSX.

The next import is from react-router-dom. We're importing Route, which is how we’ll match the app’s URL with the components we want to render
Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we’re only using IonApp, IonPage, IonRouterOutlet, and IonReactRouter.
IonReactRouter is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have deeper guide that goes over these differences in our React Navigation Docs.
The last important import is the Home component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later.
The CSS import is pulling in the utility styles from Ionic for things like padding, typography, etc.

After reviewing all of the imports, we now get to our first look at a React Component:

const App: React.FunctionComponent = () => (
<IonApp>
<IonReactRouter>
<IonPage>
<IonRouterOutlet>
<Route path="/home" component={Home} exact={true} />
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
</IonPage>
</IonReactRouter>
</IonApp>
);

This React component sets up the initial routing for our app, as well as include some core Ionic components for animations and layout (IonRouterOutlet and IonApp). One thing that stands out is that in React, to do data-binding, the value is passed in curly braces ({}). So in the Route component, we can set the value of component to the Home component from earlier. This is how React will know that that value is not a string, but a reference to a component.

8. Modify Current React Component

Now the App does not really have a lot to modify here. It's a basic example of a container component. With the Router logic set, all it's responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our Home component.

Currently, the Home component looks like so:

Home Blank

For now, I am just creating a simple signup form with them of ionic/react component.

So after editing your file something look like this

IonHeader is a bit self explanatory. It's a component that is meant to exist at the top of the page. IonHeader itself doesn't really do much by itself, aside from handling some flexbox-based layout. It's meant to hold other components, like IonToolbar or IonSearchbar.

IonContent is, as its name suggests, the main content area for our page. It's responsible for providing the scrollable content that users will interact with, plus any scroll events that could be used in an app.

Here in our IonContent, we're adding an IonList and a much more involved IonItemcomponent. Let's look at IonItem, as it's really the centerpiece here.

<IonList no-lines>
<IonItem>
<IonLabel color="primary">Username</IonLabel>
<IonInput value={this.state.username} name="username" type="text" required>
</IonInput>
</IonItem>
<IonItem>
<IonLabel color="primary">Password</IonLabel>
<IonInput value={this.state.password} name="password" type="password" required>
</IonInput>
</IonItem>
</IonList>

And for input, we are using IonInput

and we have imported all this component from @ionic/react something like this

import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonInput, IonButton } from '@ionic/react';

So after all this editing, our UI is something look like this:

Simple SIgn up from

Creating a new Route

Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let’s open our App.tsx file and add the new route.

With our router now having an entry for the route /login, we'll create the component needed, Login. This will exist in src/pages/Login.tsx

Let’s fill the Login.tsx with some placeholder content for the moment.

The content here is pretty straight forward, and should look familiar to the Home component. What is new is the IonBackButton component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?

Well in this case, the in-memory history is lost, so the back button disappears. To address this, we can set the defaultHref attribute value to the URL we want to navigate to if there is no history.

return (
  <>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="/home" />
        </IonButtons>
        <IonTitle>Log In</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent />
  </>
);

Here, when we reload, if there is no app history present, we’ll be able to navigate back to our home route.

What's Next?

Now that Ionic React RC is out, you can test it out and send the feedback to the developers. To report an issue or comment, head over to the GitHub repo and tag the issue with “package react”. You can also head over to the forums to ask questions or start a discussion.

For the Ionic Team, the focus is set on releasing Ionic React final “soon”. They are not expecting any of the APIs to have any more significant changes.

We also plan on creating some more content and guides in the docs to help with some best practices we’ve found when working with Ionic React. We will soon upgrade our Ionic-React Starter App from beta to RC (release-candidate)

To check how to create Ionic React app using Capacitor, check out my blog — How to make apps in Ionic using React and Capacitor

To read the full announcement, visit Ionic’s official website.

Next Steps

Now that you have learnt how to start developing in Ionic-React RC, you can also try the following for Ionic Angular apps

Ionic 4 Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic 4 Charts with — Google Charts | HighCharts | d3.js | Chart.js
Ionic 4 Social Logins — Facebook | Google | Twitter
Ionic 4 Authentications — Via Email | Anonymous
Ionic 4 Features — Geolocation | QR Code reader | Pedometer
Media in Ionic 4 — Audio | Video | Image Picker | Image Cropper
Ionic 4 Essentials — Native Storage | Translations | RTL
Ionic 4 messaging — Firebase Push | Reading SMS
Ionic 4 with Firebase — Basics | Hosting and DB | Cloud functions

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

How to use Geolocation, Geocoding and Reverse Geocoding in React Native Apps

Umang Darji — Fri, 27 Mar 2020 00:23:11 +0000

In this post, you will learn how to implement Geolocation React native apps. We will also learn how to Convert Geocode in Location address (Reverse Geocoding) and Location Address into Geocode(Geocoding) in a simple React native app.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

What Is React Native?

What is Geolocation?

The most famous and familiar location feature — Geolocation is the ability to track a device’s whereabouts using GPS, cell phone towers, WiFi access points or a combination of these. Since devices are used by individuals, geolocation uses positioning systems to track an individual’s whereabouts down to latitude and longitude coordinates, or more practically, a physical address. Both mobile and desktop devices can use geolocation.
Geolocation can be used to determine time zone and exact positioning coordinates, such as for tracking wildlife or cargo shipments.

Some famous apps using Geolocation are

Uber / Lyft — Cab booking
Google Maps (of course) — Map services
Swiggy / Zomato — Food delivery
Fitbit — Fitness app
Instagram / Facebook — For tagging photos

What is Geocoding and Reverse geocoding?

Geocoding is the process of transforming a street address or other description of a location into a (latitude, longitude) coordinate.
Reverse geocoding is the process of transforming a (latitude, longitude) coordinate into a (partial) address. The amount of detail in a reverse geocoded location description may vary, for example, one might contain the full street address of the closest building, while another might contain only a city name and postal code.

Post structure

We will go in a step-by-step manner to explore the anonymous login feature of Firebase. This is my break-down of the blog

STEPS

Create a simple React Native app
Install Plugins for Geocoding and Geolocation and get User Location
Get User Current Location (Geocoding)
Convert User Geolocation into an address (Reverse Geocoding)
Convert User Entered Address into Geocode (Geocoding)

We have three major objectives

Get User Current Location which we will get in latitude and longitude (Geolocation)
Convert that latitude and longitude in Street Address (Reverse Geocoding)
And again convert Street address entered by the user into latitude and longitude (Geocoding)

Let’s dive right in!

Step 1: — Create a simple React Native app

If you are coming from a web background, the easiest way to get started with React Native is with Expo tools because they allow you to start a project without installing and configuring Xcode or Android Studio. Expo CLI sets up a development environment on your local machine and you can begin writing a React Native app within minutes. For instant development, you can use Snack to try React Native out directly in your web browser.

If you are familiar with native development, you will likely want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.

Expo CLI Quickstart

Assuming that you have Node 10+ installed, you can use npm to install the Expo CLI command-line utility:

npm install -g expo-cli

Then run the following commands to create a new React Native project called “AwesomeProject”:

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

This will start a development server for you.

React Native CLI Quickstart

Assuming that you have Node 10+ installed, you can use npm to install the React Native CLI command-line utility:

npm install -g react-native-cli

Then run the following commands to create a new React Native project called “AwesomeProject”:

react-native init AwesomeProject

For details you can check this link.

Step 2 : — Install Plugins for Geocoding and Geolocation and get User Location

In Bare React Native Apps

react-native-geolocation-service

This library is created in an attempt to fix the location timeout issue on android with the react-native’s current implementation of Geolocation API. This library tries to solve the issue by using Google Play Service’s new FusedLocationProviderClient API, which Google strongly recommends over android's default framework location API. It automatically decides which provider to use based on your request configuration and also prompts you to change the location mode if it doesn't satisfy your current request configuration.

NOTE: Location request can still timeout since many android devices have GPS issue in the hardware level or in the system software level. Check the FAQ for more details.

Installation

yarn

yarn add react-native-geolocation-service

npm

npm install react-native-geolocation-service

Setup

Android

No additional setup is required for Android

iOS

You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation when using the app. In order to enable geolocation in the background, you need to include the NSLocationAlwaysUsageDescription key in Info.plist and add location as a background mode in the 'Capabilities' tab in Xcode.

Update your Podfile

pod 'react-native-geolocation', path: '../node_modules/@react-native-community/geolocation'

Then run pod install from ios directory

In EXPO managed apps,

you’ll need to run

expo install expo-location

Step 3: — Get User Current Location (Geocoding)

In Bare React Native Apps,

Since this library was meant to be a drop-in replacement for the RN’s Geolocation API, the usage is pretty straight forward, with some extra error cases to handle.

One thing to note, this library assumes that location permission is already granted by the user, so you have to use PermissionsAndroid to request for permission before making the location request.

For getting user location you have to import Geolocation API from react-native-geolocation-service package like this

import Geolocation from 'react-native-geolocation-service';

And add this function into your code

if (hasLocationPermission) {
        Geolocation.getCurrentPosition(
            (position) => {
                console.log(position);
            },
            (error) => {
                // See error code charts below.
                console.log(error.code, error.message);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge:          10000 }
        );
    }

So after adding all this code your file something look like this.

In EXPO managed apps,

For getting user location you have to import Location API from expo-location package like this

import * as Location from 'expo-location';

And add this function into your code

_getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }
let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
  };

So after adding all this code your file something look like this.

One thing to note, this library assumes that location permission is already granted by the user, so you have to use Permissions from ‘expo-permissions’ to request for permission before making the location request.

Step 4: — Convert User Geolocation into an address (Reverse Geocoding)

In Bare React Native Apps,

In this app, we are using react-native-geocoding package for Geocoding and Reverse Geocoding

react-native-geocoding

A geocoding module for React Native to transform a description of a location (i.e. street address, town name, etc.) into geographic coordinates (i.e. latitude and longitude) and vice versa.

This module uses the Google Maps Geocoding API and requires an API key for purposes of quota management. Please check this link out to obtain your API key.

Install

npm install --save react-native-geocoding

For Geocoding and Reverse Geocoding in your app you import Geocoder API from react-native-geocoding package like this

import Geocoder from 'react-native-geocoding';

And Then you have to initialize the module in your app(needs to be done only once)

Geocoder.init("xxxxxxxxxxxxxxxxxxxxxxxxx"); // use a valid API key
// With more options
// Geocoder.init("xxxxxxxxxxxxxxxxxxxxxxxxx", {language : "en"}); // set the language

And use this code respectively for Geocoding and reverse Geocoding

Geocoder.from(41.89, 12.49)
       .then(json => {
              var addressComponent = json.results[0].address_components[0];
           console.log(addressComponent);
      })
      .catch(error => console.warn(error));
// Works as well :
// ------------
// location object
Geocoder.from({
  latitude : 41.89,
   longitude : 12.49
});
// latlng object
Geocoder.from({
 lat : 41.89,
    lng : 12.49
});
// array
Geocoder.from([41.89, 12.49]);

Error Codes

In EXPO managed apps,

For geocoding of Address we are using react-native-geocoding so the installation and Initialize Steps are the same as Geolocation.

we will use this code for Reverse Geocoding

_attemptReverseGeocodeAsync = async () => {
    this.setState({ inProgress: true });
    try {
      let result = await Location.reverseGeocodeAsync(
        this.state.selectedExample
      );
      this.setState({ result });
    } catch (e) {
      this.setState({ error: e });
    } finally {
      this.setState({ inProgress: false });
    }
  };

Step 5: — Convert User Entered Address into Geocode (Geocoding)

For Reverse geocoding of Address, we are using expo-location so the installation and Initialize Steps are the same as Reverse Geocoding.

we will use this code for Geocoding

Geocoder.from("Colosseum")
      .then(json => {
          var location = json.results[0].geometry.location;
           console.log(location);
      })
      .catch(error => console.warn(error));

In EXPO managed apps,

For geocoding of Address we are using react-native-geocoding so the installation and Initialize Steps are the same as Geolocation.

we will use this code for Geocoding

_attemptGeocodeAsync = async () => {
    this.setState({ inProgress: true, error: null });
    try {
      let result = await Location.geocodeAsync(this.state.selectedExample);
      this.setState({ result });
    } catch (e) {
      this.setState({ error: e.message });
    } finally {
      this.setState({ inProgress: false });
    }
  };

Working Example of Geocode and Reverse Geocing in Your App

Conclusion

In this blog, we learned how to implement Geolocation React Native app. We also learnt how to Convert Geocode in Location address(Reverse Geocoding) and Location Address into Geocode(Geocoding) in a simple React Native app.

Next Steps

Now that you have learnt about how to implement Geolocation , Geocoding and Reverse Geocoding React Native app, here are some other topics you can look into

React Native life cycle hooks
How To in React Native — Image picker| Integrate Firebase
Create Awesome Apps in React Native using Full App
Firebase Push notifications in React Native Apps

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

AndroidX Support in React Native Apps

Umang Darji — Fri, 27 Mar 2020 00:12:11 +0000

In this post we’ll look into What is Android X and its support in React Native.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

What Is React Native?

AndroidX Overview

If you haven’t heard the term yet, AndroidX is the new open-source project being rolled out by Google to package libraries with Jetpack. Essentially, the old way of managing libraries was becoming overcomplicated and so Google decided to start cleaning up their act and use a new system, along with new library names.

AndroidX is a major improvement to the original Android Support Library. Like the Support Library, AndroidX ships separately from the Android OS and provides backwards-compatibility across Android releases. AndroidX fully replaces the Support Library by providing feature parity and new libraries. In addition AndroidX includes the following features:

All packages in AndroidX live in a consistent namespace starting with the string androidx. The Support Library packages have been mapped into corresponding androidx.* packages. For a full mapping of all the old classes and build artifacts to the new ones, see the Package Refactoring page.
Unlike the Support Library, AndroidX packages are separately maintained and updated. The androidx packages use strict Semantic Versioning starting with version 1.0.0. You can update AndroidX libraries in your project independently.
All new Support Library development will occur in the AndroidX library. This includes maintenance of the original Support Library artifacts and introduction of new Jetpack components.

Using AndroidX

If you want to use AndroidX in a new project, you need to set the compile SDK to Android 9.0 (API level 28) or higher and set both of the following Android Gradle plugin flags to true in your gradle.properties file.

android.useAndroidX: When set to true, the Android plugin uses the appropriate AndroidX library instead of a Support Library. The flag is false by default if it is not specified.
android.enableJetifier: When set to true, the Android plugin automatically migrates existing third-party libraries to use AndroidX by rewriting their binaries. The flag is false by default if it is not specified.

gradle.properties file-:

android.useAndroidX=true
android.enableJetifier=true

How to Migrate Android Support Packages into AndroidX in React Native ≥0.59

Step 1

First of all, I opened MyProject/Android/build.gradle and verified I am targeting Android Pie or later. It’s because AndroidX support is available for apps targeting API 28 or later. My build.gradle file was as given below:

##iframe0##

Step 2

Then I opened MyProject/Android/gradle.properties and added the following lines

android.useAndroidX=true
android.enableJetifier=true

Step 3

If you use React Native modules with native Java code that isn’t converted to AndroidX, and your app is AndroidX, you probably need jetifier.

The jetifier is an AndroidX transition tool in npm format, with a react-native compatible style

Why do you need Jetifier?

The standard AndroidX migration rewrites your current installed source code, and at build time dynamically re-writes any linked jar/aar/zip files. This is all a “normal” Android app needs.

React Native apps are not standard Android apps. React Native modules with native Java code usually distribute that code as source, and link the source code directly.

When you update your modules (or install them again after following the standard AndroidX migration), the freshly installed Java code from your react-native dependencies will not be translated to AndroidX anymore, and your build will fail.

So you have to perform an AndroidX migration on your linked source every time you update react-native modules that ship native Java code. That is what this tool does.it can rewrite the source in node_modules every time you call it.

Usage for source files

To jetify / convert node_modules dependencies to AndroidX

Imagine you have a react-native project. One of your library dependencies converts to AndroidX., and you need to use the new version.

So now you need to convert your app to AndroidX, but many of your react-native libraries ship native Java code and have not updated. How is this done?

First, use Android Studio’s refactoring tool to convert your app re: the Android developer docs
npm install --save-dev jetifier
npx jetify
npx react-native run-android (your app should correctly compile and work)
Call npx jetify run in the postinstall target of your package.json (Any time your dependencies update you have to jetify again)

Proof it works / how this is tested: https://github.com/mikehardy/rn-androidx-demo. You can clone that repo, run the script, and see it works. Please feel to make PRs to that repo, especially in App.js or in the dependencies included, if you would like to demonstrate success or failure for a specific module.

Inspiration: this jetify command was based on an idea from @janicduplessis — thank you Janic!

To reverse-jetify / convert node_modules dependencies to Support Libraries

Maybe you are in the position where you must not migrate to AndroidX yet. But your libraries have started to migrate and they ship AndroidX native Java code.

You can convert them back with reverse-jetify mode

Follow the instructions from above to convert to AndroidX, but add the -r flag to the npx jetify call.

If a library ships only as a jar/aar/zip file, you will have to use jetifier-standalone to convert that as well, but you can delay the AndroidX migration indefinitely with this style.

Usage for jar/zip/aar files

You may be a library maintainer, wanting to ship an AAR of your support code converted to AndroidX, or maybe you ship an AAR normally and you want to continue to support your non-AndroidX users even after you convert your library to AndroidX?

As part of your build process you can use this tool like so:

npm install jetifier (or maybe npm install -g jetifier to make it globally available)
npx jetifier-standalone <your arguments here> (use npx jetifier-standalone -h for help)

Conclusion

In this post, we learnt about “What is Android X”, and how to Migrate Android Support Packages into AndroidX in React Native ≥0.59. We also learn about what is jetifier.

Next Steps

Now that you have learnt about How to Migrate Android Support Packages into AndroidX in React Native ≥0.59, here are some other topics you can look into

React Native life cycle hooks
How To in React Native — Image picker| Integrate Firebase
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

A guide to React Native life cycle hooks

Umang Darji — Thu, 26 Mar 2020 18:04:26 +0000

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

When developing in React Native, every Component follows a cycle from when it’s created and mounted on the DOM to when it is unmounted and destroyed. This is what we refer to as the Component lifecycle.

React Native provides hooks, methods that get called automatically at each point in the lifecycle, that give you good control of what happens at the point it is invoked. A good understanding of these hooks will give you the power to effectively control and manipulate what goes on in a component throughout its lifetime.

Our lifecycle is broadly categorized into three parts: Mounting, Updating and Unmounting.

New Lifecycle Hooks

Component cycles

There are multiple reasons a component might re-render, and in each of them different functions are called allowing the developer to update certain parts of the Component.

Component creation

The first cycle is the creation for component, which usually happens the first time a component is encountered in the parsed JSX tree:

Constructor
componentWillMount
render
Create All Child Components
componentDidMount

Component re-rendering due to re-rendering of the parent component / Component re-rendering due to internal change

getDerivedStateFromProps
shouldComponentUpdate : — if return yes goto step 3 else stop here
getSnapShotBeforeUpdate
Rerender All Child Components WIth new Props
componentDidUpdate

Component re-rendering due to call to this.forceUpdate

getDerivedStateFromProps
getSnapShotBeforeUpdate
Rerender All Child Components WIth new Props
componentDidUpdate

Component re-rendering due to catching an error

Introduced in React 16 as “ErrorBoundaries”. A component can define a special layer which can catch errors and provide a new life-cycle method — componentDidCatch - which allows developers to provide self-repair actions for recovery or graceful handling of errors.

render If is populate any error move to step 2 else step 3
Show error data
Send new props to all child data
Thrown error in any life cycle method
Parent componentDidCatch()
render()

constructor

constructors are the basic of OOP — this is a special function that will get called whenever a new object is created. It’s very important to call a special function super in cases where our class extends any other class that also has a defined constructor. Calling this special function will call the constructor of our parent class and allow it to initialize itself. This is why we have access to this.props only after we’ve initially called super.

As mentioned, constructors are perfect for setting up our Component — create any fields (variables starting with this.) or initialize state based on props received.

This is also the only place where you are expected to change/set the state by directly overwriting the this.state fields. In all other instances remember to use this.setState

set initial state
if not using class properties syntax — prepare all class fields and bind functions that will be passed as callbacks

DON’T

cause any side effects (AJAX calls etc.)

deprecated — componentWillMount

This is a somehow special case — componentWillMount does not differ much from constructor - it is also called once only in the initial mounting life-cycle. Historically there were some reasons to use componentWillMountover constructor see this react-redux issue but please keep in mind that the practice described there is since deprecated.

Many will be tempted to use this function in order to send a request to fetch data and expect the data to be available before the initial render is ready. This is not the case — while the request will be initialized before the render, it will not be able to finish before the render is called.

Additionally, with the changes to React Fiber (post-React 16 beta release) this function might end up being called multiple times before the initial render is called so might result in triggering multiple side-effects. Due to this fact it is not recommended to use this function for any side-effect causing operations.

It is important to note that this function is called when using server-side-rendering while it is counterpart — componentDidMount will not be called on the server but on the client in such case. So if some side-effect is desired on the server part this function should be used as an exception.

A setState used in this function is “free” and will not trigger a re-render.

update state via this.setState
perform last-minute optimization
cause side-effects (AJAX calls etc.) in case of server-side-rendering only

DON’T

cause any side effects (AJAX calls etc.) on the client side

deprecated — componentWillReceiveProps(nextProps) In the latest version of react native app we can use this function as UNSAFE_componentWillReceiveProps(nextProps)

This function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the props passed, no matter if the prop value has changed or not since previous re-render phase.

This function is ideal if you have a component whose parts of the state are depending on props passed from parent component as calling this.setState here will not cause an extra render call.

Please keep in mind that due to the fact that the function is called with all props, even those that did not change it is expected the developers implement a check to determine if the actual value has changed, for example:

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
    // so we can perform some calculations based on the new value
  }
}

Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the renderfunction is actually called it is not recommended to use any side-effect causing operations here.

sync state to props

DON’T

cause any side effects (AJAX calls etc.)

static getDerivedStateFromProps(nextProps, prevState)

The new function which main responsibility is ensuring that the state and props are in sync for when it is required. Its main job is replacing componentWillReceiveProps

gDSFP is a static function and as such has no access to this — you are instead expected to return an object, which will be merged into the future state of the component (exactly like working with setState!)

The function is used when a component is updated but also when it is mounted, right after the constructor was called, so you no longer need to use constructor or class property form of state if you want to set initial state from props.

sync state to props

DON’T

cause any side effects (AJAX calls etc.)

shouldComponentUpdate(nextProps, nextState, nextContext)

By default, all class-based Components will re-render themselves whenever the props they receiver, their state or context changes. If re-rendering the component is computation heavy (e.g. generating a chart) or is not recommended for some performance reasons, the developer is given access to a special function which will be called in the update cycle.

This function will be called internally with next values of props, state, and object. The developer can use those to verify that the change requires a re-render or not and return false to prevent the re-rendering from happening. In other cases, you are expected to return true.

use for increasing performance of poor performing Components

DON’T

cause any side effects (AJAX calls etc.)
call this.setState

deprecated — componentWillUpdate(nextProps, nextState) In the latest version of react-native we can this functions as UNSAFE_componentWillUpdate(nextProps, nextState)

If the shouldComponentUpdate function is not implemented, or it decided that the component should update in this render cycle, another life-cycle function will be called. This function is commonly used to perform state and props synchronization for when parts of your state are based on props.

In cases where shouldComponentUpdate is implemented, this function can be used instead of componentWillReceiveProps as it will be called only when the component will actually be re-rendered.

Similarly to all other componentWill* functions, this function might end up called multiple times before render so it not advised to perform side-effects causing operations here.

synchronize state to props

DON’T

cause any side effects (AJAX calls etc.)

getSnapshotBeforeUpdate(prevProps, prevState)

Other of the two new functions, invoked in the so-called “pre-commit phase”, right before the changes from VDOM are to be reflected in the DOM.

It is used mostly if you need to read the current DOM state, for example, you have an application in which new messages are added to the top of the screen — if a user scrolled down, and a new message is added the screen could move and make the UI harder to use. By adding getSnapshotBeforeUpdate you can calculate current scroll position and maintain it through the DOM update.

Even though the function is not static, it is recommended to return the value, not update the component. The returned value will be passed to componentDidUpdate as the 3rd parameter

synchronize state to props

DON’T

cause any side effects (AJAX calls etc.)

componentDidUpdate(prevProps, prevState, prevContext)

This function will be called after render is finished in each of the re-render cycles. This means that you can be sure that the component and all its sub-components have properly rendered itself.

Due to the fact that this is the only function that is guaranteed to be called only once in each re-render cycle, it is recommended to use this function for any side-effect causing operations. Similarly to componentWillUpdateand componentWillReceiveProps this function is called with object-maps of previous props, state, and context, even if no actual change happened to those values. Because of that developers are expected to manually check if given value changed and only then perform various update operations:

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // we can perform any operations that would 
    // need the new value and/or cause side-effects 
    // like AJAX calls with the new value - this.props.myProp
  }
}

cause side effects (AJAX calls etc.)

DON’T

call this.setState as it will result in a re-render

An exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position/dimensions of some DOM nodes). Please take extra care to prevent against updating if the value did not in fact change as it might result in a render loop.

componentDidCatch(errorString, errorInfo)

A new addition in React 16 — this life-cycle method is special in the way that it can react to events happening in the child component, specifically to any uncaught errors happening in any of the child components.

With this addition you can make your parent-element handle the error by — for example — setting the error info in state and returning appropriate message in its render, or logging to the reporting system, e.g.:

componentDidCatch(errorString, errorInfo) {
  this.setState({
    error: errorString
  });
  ErrorLoggingTool.log(errorInfo);
}render() {
  if(this.state.error) return <ShowErrorMessage error={this.state.error} />
  return (
    // render normal component output
  );
}

When an error happens, the function will be called with:

errorString — the .toString() the message of the error
errorInfo — an object with a single field componentStack which represent the stack trace back to where the error occurred, e.g.:

in Thrower
    in div (created by App)
    in App

componentDidMount

This function will be called only once in the whole life-cycle of a given component and it being called signalizes that the component — and all its sub-components — rendered properly.

Since this function is guaranteed to be called only once it is a perfect candidate for performing any side-effect causing operations such as AJAX requests.

cause side effects (AJAX calls etc.)

DON’T

call this.setState as it will result in a re-render

componentWillUnmount

Use this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close/remove when no longer needed.

remove any timers or listeners created in the lifespan of the component

DON’T

call this.setState, start new listeners or timers

Conclusion

In this post, you learned about React js and React Native life cycle hooks.

Ionic 4 and Angular WooCommerce Tutorial

Umang Darji — Thu, 26 Mar 2020 01:04:16 +0000

This is Part-2 of two post series. In this post, you will learn how to implement the WooCommerce REST API Mobile App in Ionic 4 . 🔥 Part 1 of the series discusses how to use Wordpress Post Integration using Wordpress REST API In Ionic 4 app

You can check out this App it has all the ecommerce features already implemented:-Ionic 4 Woocommerce Complete app

Throughout this tutorial, we are going to build a full Ionic 4 eCommerce app with a WooCommerce backend designed for people who need an Android/iOS mobile app for their WooCommerce based store.

We are going to use Ionic 4 for front end and WordPress + WooCommerce for the back-end

What is WooCommerce?

WooCommerce is an open-source e-commerce plugin for WordPress. It is designed for small to large-sized online merchants using WordPress. Launched on September 27, 2011,[3] the plugin quickly became popular for its simplicity to install and customize and free base product.

What is Ionic 4?

You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

Tutorial requirements

This tutorial requires you to have

A local WordPress installation with WooCommerce installed and configured.
Or a hosted WooCommerce store which you can test with.
Node.js and Ionic CLI installed on your development machine.
Some working experience with Ionic 4.

We are not going to cover how to install WordPress and how to add the WooCommerce plugin since you can find many tutorials on the web already showing that.

Setting up a WooCommerce API?

This app uses basic authentication over SSL to pull products from the WooCommerce REST API.

To use the WooCommerce module, you must create a REST API key in WooCommerce: http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication

consumer key: ck_bc98995c28477bc2fce7bb5eb49e7cc839c71801

consumer secret: cs_66c7d6d45ae47e8a490f6fe8540298e1c77fd060

With the help of these two keys, you can access your woocommerce Project in your ionic app

Included features:

WP-API v2 and WooCommerce REST API v2 integration
User Auth
Product list
Single product pages
Add to cart
Cart modal
Basic multi-step checkout

Structure

We’ll follow a stepped approach to create a Music player app in Ionic 4. We’ll use an IONIC native plugin for music playback. Following are the steps

Step 1 — Create a basic Ionic 4 app
Step 2 — Set up your app for WooCommerce
Step 3 — Set Authentication in your app
Step 4 — Fetch Products from your WooCommerce with REST api
Step 5 — Basic Check Out Flow

So let’s dive right in!

Dive In

Step 1 — Create a basic Ionic 4 app

I have covered this topic in detail in this blog.

In short, the steps you need to take here are

Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
Install ionic cli using npm (my Ionic version is 4.1.0 currently)
Create an Ionic app using ionic start

You can create a sidemenu starter for the sake of this tutorial. On running ionic start ionic-4-local-notifications sidemenu , node modules will be installed. Once the installation is done, run your app on browser using

$ ionic serve

The app will launch on the browser. You can go to Inspect → Device Mode to see the code in a mobile layout. You can create a basic layout for triggering WooCommerce product.

Step 2 — Set up your app for WooCommerceHome Page

Step 2 — Set up your app for WooCommerce

For getting WooCommerce product in the Ionic app we will use WooCommerce API without any plugin.

Before we go into creating our views we set up the logic to retrieve all product. In our post, we will simply make a call to get a list of products, but you can get basically all data from the WooCommerce API like categories, tags, pages, reviews…

We will also limit our calls to only retrieve 10 Products at a time and also use the page parameter so we can later add some cool loading to our list.

In the very first step, we need to include the module to make Http calls to the API so we will import HttpClientModule from @angular/common/http which comes by default installed with IONIC package.

so change your app/app.module.ts to:

Now we will create pages for our app. We will have multiple pages in our app for handling Auth and Product checkout flow. so we will generate this page by command ionic g page — - . when we generate a page from this command we will not need to add routes in our app/app-routing.module.ts . This command generates it automatically.

so after adding routes your app/app-routing.module.ts something looks like this.

Step 3 — Set Authentication in your app

In Authentication flow of user, we will add This Features

Login User:-

You can create a basic layout for triggering User Login Flow.

For login user, you can use this function

Here you have to change URL value with your WordPress URL.

Register User: —

You can create a basic layout for triggering Register User Flow.

User Register Screen

For Register user, you can use this function

Here you have to change URL, consumerKey, consumerSecret with yours.

Step 4 — Fetch Products from your WooCommerce with REST API

we will divide this step into further points

Fetch products from woocommerce
Fetch product details
Add Product to the cart

Fetch products from woocommerce

You can create a basic layout for triggering Products List.

Product Page

For getting product list you can use this function.

Don't forget to change url, consumerKey, consumerSecret with yours

you can also filter your product according to your requirements like this:

In attr, we can use different parameters like tags, categories, etc

Fetch product details

You can create a basic layout for triggering Product details.

Product details

For getting product details you can use this function

You probably already know about You have to change url, consumerKey, consumerSecret, but I’m putting it here just to make sure you don't forget about it.

Add Product to the cart

for cart feature, we are using Storage API from @ionic/storage if you want to learn more about this You can refer to this link :- Ionic 4 — Save and Retrieve Data Locally on Device. Here we have explained all the storage features.

You can create a basic layout for triggering cart for the user.

Cart Page

And you can use these functions for User cart Flow.

Add Into cart

Get Data from cart

Remove Data From Cart

Step 5 — Basic Check Out Flow

You can create a basic layout for triggering checkout flow for the user.

Check Out Flow

In checkout flow, you can use three woocommerce functions

Get our all payment gateways
Update user Address
Create Order
Get all user orders

Get our all payment gateways: —

For getting all payment gateways you can use this function.

update user Address: —

For updating user address you can use this function

Create Order: —

For creating user order you can use this function

Get all user orders: —

For getting all user order you can use this function

Conclusion

In this blog you learnt how to implement WooCommerce in an Ionic 4 app. This feature is useful when want to build our own ECommerce Startup

That’s all for this blog.

Stay tuned for more Ionic blogs!

You can check out this App it has all the ecommerce features already implemented:-Ionic 4 Woocommerce Complete app

The Pros and Cons of This Approach

First, why would you want to build a WooCommerce app when you have a mobile website? Besides the obvious reason of being on the app store, here are a few benefits:

It’s really fast, way faster than your website.
The user experience is awesome, which could mean higher conversions.
It works offline or in places with a poor network connection.
It can be used as a native mobile app or a progressive web app.

There are also cons to this type of app, so it’s not for everyone. There are 2 major drawbacks to using the REST API in an app:

None of your customizations or plugins work in the app (custom checkout fields for example) You can customize the app, it just doesn’t automatically mimic your existing site.
You have to custom code payment gateways. The WC REST API does not support payments, so you have to do that yourself.

One solution to these problems is using an iframe to display your checkout, which would automatically use any customizations you made on your site. There are some big downsides to that approach, you lose some of the offline functionality and it’s a worse checkout experience.

I decided to go full API with this project, mostly for fun. It allows for more offline support, faster checkout, and better overall user experience.

Next Steps

Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Use Ionic 4 Full app for your next awesome app

Ionic and Wordpress Integration using Wordpress REST API

Umang Darji — Thu, 26 Mar 2020 00:27:47 +0000

This is Part-1 of two post series. In this post, you will learn how to implement Wordpress Integration using Wordpress REST in Ionic 4 app. Part 2 of the series discusses how to build a WooCommerce REST API Mobile App in Ionic 4.

Complete code of this blog post can be found at this github repo — ionic-wordpress-integration

What is Wordpress REST API?

The WordPress REST API provides API endpoints for WordPress data types that allow developers to interact with sites remotely by sending and receiving JSON. This enables developers to create, read and update WordPress content from client-side JavaScript or from external applications.

If you are new to WP REST API, I would suggest you go through the Key Concepts.

What is Ionic 4?

You probably already know about Ionic, but put this section in every blog just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

In this ionic tutorial, we will walk you through the process of creating an Ionic 4 app that pulls in WordPress posts and other content using the WP REST API.

Without further ado, this is what you are going to build!

Word Press App

Structure

We’ll follow a stepped approach to create a Music player app in Ionic 4. We’ll use an IONIC native plugin for music playback. Following are the steps

Step 1 — Create a basic Ionic 4 app
Step 2 —Set up your app for Wordpress post
Step 3 — Get Your WordPress Posts
Step 4 — Showing The WordPress Post Details

So let’s dive right in!

Step 1 — Create a basic Ionic 4 app

I have covered this topic in detail in this blog.

In short, the steps you need to take here are

Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
Install ionic cli using npm (my Ionic version is 4.1.0 currently)
Create an Ionic app using ionic start

$ ionic serve

The app will launch on the browser. You can go to Inspect → Device Mode to see the code in a mobile layout. You can create a basic layout for triggering Wordpress post.

Next, we’ll add the Wordpress posts our app

Step 2 — Set up your app for Wordpress post

For getting WordPress post in the Ionic app we will use Wordpress API without any plugin.

Before we go into creating our views we set up the logic to retrieve all data. In our post, we will simply make a call to get a list of posts, but you can get basically all data from the WordPress API like categories, tags, pages…

We will also limit our calls to only retrieve 5 posts at a time and also use the page parameter so we can later add some cool loading to our list.

so change your app/app.module.ts to:

Now we will create pages for our app. We will have a list of WordPress posts and also a details page for one post. so we will generate this page by command ionic g page — - . when we generate a page from this command we will not need to add routes in our app/app-routing.module.ts . This command generates it automatically.

so after adding routes your app/app-routing.module.ts something looks like this.

Step 3 — Get Your WordPress Posts

For getting posts from Wordpress we will use this function

async loadPost(url: string, page, showLoading) {
const loading = await this.loadingController.create({
message: 'Loading Your posts'
});
if (showLoading) {
await loading.present();
}
const route = this.url + 'wp-json/wp/v2/posts'
if (!page) {
page = '1';
}
return new Promise((resolve, reject) => {
var concat;
if (url.indexOf('?') > 0) {
concat = '&';
} else {
concat = '?';
}
this.http.get(route + concat + 'page=' + page)
.subscribe(data => {
if (showLoading) {
loading.dismiss();
}
this.items = data;
resolve(this.items);
},
error => {
if (showLoading) {
loading.dismiss();
}
reject(error);
this.presentToast(error.error.message)
})
});
}

Here we are using two params URL and another one page no.

URL is basically your word press URL where you have posted all of your blogs

for me it is :

https://swift-footed-config.000webhostapp.com/

you can change it with your one.

and pageNo we have added for cool navigation with infinite scroll.

The reason is that we implement infinite scrolling inside our view which will automatically load new posts once we reach (or approach) the end of the list! That looks

The reason is that we have also implemented ion-refresher inside our view which will allow the user to refresh post list when he wants to refresh.

So after adding all the code your homepage.ts something looks like this.

Some of those fields contain HTML characters, that’s why we sometimes use the innerHTML of elements and directly use the value which will then be displayed correctly.

To build our simple view, go ahead and insert this code in yout homepage.html

So after adding this all this code your post page something look like this

Post List Page

Step 4 — Showing The WordPress Post Details

So when user clicks on post link we will redirect him to Post details with ID of the post.

We could actually also pass the whole object to the next page using the state, but I still think using the ID approach is better as we don’t keep the information in the state and we actually got a URL to the post page that will work all the time, even with a refresh!

For us, this means we need to get the ID from the route snapshot and then retrieve the information for a single post using our service!

so for getting post information, we will add this code in our post details file

getPostDetails(id) {
const route = this.url + 'wp-json/wp/v2/' + posts/${id}?_embed
return this.http.get(route).pipe(
map(post => {
post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
console.log(post);
return post;
})
)}

so after adding this code your post details file something look like this

Regarding the view of the details page we’ll also keep it simple and just use the image (like we did before, remember the media_url is a field we created in the service!) and the actual post content.

Again, to display the HTML correctly we need to use innerHTML which will render the tags correctly.

There’s really not a lot more to the page, so finish your simple Ionic WordPress app by changing your pages/post/post.page.html to:

so after adding this code, your post details screen something look like this.

Post Details Screen

Conclusion

In this post, we learned how to use Wordpress post in Ionic 4 apps. And we have also learned how to get post details from specific post id and showing it to our page with the help of innerHTML

Complete code of this blog post can be found at this github repo —ionic-wordpress-integration

Next Steps

Now that you have learned the implementation of Wordpress in Ionic 4, you can also try

Ionic 4 Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic 4 Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic 4 Social Logins — Facebook | Google | Twitter
Ionic 4 Authentications — Via Email | Anonymous
Ionic 4 Features — Geolocation | QR Code reader| Pedometer
Media in Ionic 4 — Audio | Video | Image Picker | Image Cropper
Ionic 4 Essentials — Native Storage | Translations | RTL
Ionic 4 messaging — Firebase Push | Reading SMS
Ionic 4 with Firebase — Basics | Hosting and DB | Cloud functions

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

IONIC 4 Full App

Forem: Umang Darji

Firebase analytics in React native app

What is analytics

Why is analytics important?

What is React-Native

Firebase

Structure

1. Create a Firebase project and find analytics options

2. Create a basic React Native app

Step 3: Running the app on a device

4. Install firebase analytics dependency

Android:-

iOS:-

1. CocoaPods Installation

2. Manual Framework Installation

5. Implement analytics in your app

Custom events

Attaching user data

Tracking screen names

Resetting analytics data

Reserved Events

6. Send analytics event from app to firebase dashboard

7. Check this event on Firebase dashboard.

Dashboard View:-

Event View:-

Event Details View:-

Conclusion

Next Steps

Difference between Redux and Flux

What is the Flux?

Top 10 Attributes to Consider While Selecting the State Management tool for any website.

Developed By:-

Initial Release:-

Stable Release:-

Github Stats:-

Flux:-

React:-

Store:-

Dispatcher:-

State:-

Workflow:-

How Flux Functions

How Redux Functions

Final Words:-

Redux

Flux

Next Steps

Async actions with Redux Thunk middleware in React Native apps

What Is React Native?

What is Redux?

Steps for Implementing Redux-thunk in React Native app

1. Create a basic React Native app

Step 2: Running app on device

Step 3: Install the necessary packages to connect your app with redux.

Step 5: Create the necessary folders inside Root

Step 6: Create Constants and Actions

Step 6:- Create rootReducer and postReducer.

Step 7:-Create a Redux Store.

Step 8: Pass the Store to the React Native app.

Step 8: Connect React Native app to Redux store.

Step 10: Test your app:

Step 10: What is the basic difference between redux-thunk and redux-saga?

Redux-Thunk

Redux-Saga

The Biggest Difference

Conclusion

Next Steps

How to implement Redux in React Native apps

What Is React Native?

What is Redux?

Steps for Implementing Redux in React Native app

1. Create a basic React Native app

Step 2: Running app on device

‌Step 3: Add simple counter into the App.js.

Step 4: Install the necessary packages to connect your app with redux

Step 5: Create the necessary folders inside Root

Step 6: Create Constants, Actions, and Reducer function

Step 7:-Create a Redux Store.

Step 8: Pass the Store to the React Native app.

Step 9: Connect React Native app to Redux store.

Steps for Implementing R`edux-thunk` in React Native app

The next block is `dependencies`.

Next block — `eslintConfig`