DEV Community: kpiteng

Manage multiple firebase projects in React Native

kpiteng — Sat, 02 Oct 2021 14:03:36 +0000

Hello Developers, We are using react-native-config to manage multiple environments in Project like Development, Staging and Production. If we have requirements to manage different firebase for Development, Staging and Production then? Today we will see how to manage multiple project environments with multiple firebase GoogleServices-Info.plist and google-service.json files.

Highlights of article -

Create React Native Application
Add Development, Staging, Production Target
Add Development, Staging, Production Schema
Link each Schema with each Target
Add Build, Set Pre-Actions and Select Run Target Executable
Place Development, Staging and Production GoogleService-Info.plist file
Link each GoogleService-Info.plist file with each Target
Update .podfile to share dependency with Development, Staging and Production Target
SetUp various environment in Android
SetUp Product Flavor
Place Development, Staging and Production google-services.json file in Android Application

Learn more about - Securing React Native Application

Learn more about - Top 10 React Tricks Every Developer Should Use

So, first let’s create React Native Application, and setup application icons & all. You can create new application using -



npx react-native init Shopping

Now, follow the steps, we will setup for iOS & Android.

Step - 1
Open iOS Project and Go to Target

Step - 2
Right Click on it and press duplicate, It will prompt with three option Duplicate and Transition to iPad, Duplicate Only and Cancel.

Step - 3
Press on Duplicate Only

Step - 4
Now rename Target name to Shopping-Development

Step - 5
Same way create another Target and rename it to Shopping-Staging

Step - 6
Now, it’s time to create Multiple Project Schema, Shopping, Shopping-Staging, Shopping-Development, Click on Project Schema and Press on Manage Schemas

Step - 7
Select your Project Schema (Shopping) and click on Settings Icon at bottom, and it will prompt with options, (Duplicate, Import, Export, etc),

Step - 8
Pressed on Duplicate, Now, it will create a new schema for you, Now Rename schema with Shopping-Development, same way duplicate and create schema with Shopping-Staging.

Step - 9
So, Finally we have three schema, Shopping, Shopping-Development, Shopping-Staging

Step - 10
So, Now we have three Schema and three Targets

Step - 11
Now, it's time to assign a target to each schema. We have three targets and three schemas, so we will assign one target to each schema. So, first select Shopping Schema, press on Edit Schema option.

Step - 12
Go to the Build Section from left, and make sure you have only one Targets Shopping. Also make sure for that target you have selected all Checkmark mentions on the screenshot. Also you should select only one target according to your requirement. If you can’t find it then click on the plus icon at bottom.

Step - 13
Which will prompt like this, select your Target according to your schema. So here, We are selecting Shopping.

Step - 14
Now, Go To Run Section - and choose Shopping.app as executable.

Step - 15
Now, To set react-native config env for Production environment, click on Pre-actions and add New Run-Script Action.

Step - 16
Copy the script code as shown in Screenshot, for Shopping Schema, we are referring env.production, same way for Shopping-Staging we refer env.staging and for Shopping-Development we refer env.development. So, Do this for Staging Schema, and Development Schema. Using this process we have assigned Target to our schema,

Step - 17
Now, it's time to assign GoogleService-Info.plist to our Target. We have three targets and we have three different firebase accounts each for Development, Staging, production. So you required three GoogleService-Info.plist, So, It’s time to add multiple GoogleSevices-Info.plist according to Environment. So, Create GoogleServices folder inside Shopping (Project) folder,

Step - 18
Create Development, Staging, Production folder inside GoogleServices folder according to your environment name and add GoogleService-Info.plist file into it.

Step - 19
While adding GoogleService-Info.plist for Production make sure you have select (checkmark) that target, in our case we select (checkmark) only Shopping Target. It means that .plist file specific to Shopping Target.

Step - 20
Same way while adding GoogleService-Info.plist for Staging, you only select (checkmark) only Shopping-Staging Target only.

Step - 21
If you have used custom Run Script and all, then you have to make sure all the scripts which are in Shopping (Main Target), might not be there for Shopping-Development, Shopping-Staging Target. Here, I have few scripts which are in Shopping Target, you can see [CP] Copy Pods Resources. Reason behind the [CP] scripts not copy because of while you do npx pod-install, at that time it will install / execute only Shopping Target’s [CP] Scripts.

Step - 22
So, the problem is with .podfile, if you see the pod file we have initially installed all dependencies for Shopping target, which we need to share with Shopping-Development, Shopping-Staging Target as well. So let’s modify our .podfile according.

Step - 23
For Android go to android/app/build.gradle and add three environment, Development, Staging, Production as shown in Screenshot.

Step - 24
In android/app/build.gradle inside android ... defaultConfig add flavorDimensions "default" as shown in Screenshot

Step - 25
Now, add productFlavors as mention in screenshot, you can specify different applicationId according to your Target/Environment.

Step - 26
Now, it's time to add multiple google-services.json according to Development, Staging and Production environment as shown in Screenshot.

That's it, now you can run your React Native Application with different Schema and it will take environment (URL/Constants), GoogleService-Info.plist and google-services.json according to your target.

Thanks for reading Blog!

KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | [Facebook]

Kubernetes Architecture

kpiteng — Sun, 05 Sep 2021 12:22:14 +0000

All you know about monolithic architecture, but when we migrate to micro-service architecture where everything resides according to modules in various containers. But containers are not scalable, not in-built load balancing and all. Think if your OS crashes where all your containers are, then the whole system stops working and the system shuts down. Also, if your users limit pitched threshold value, then you don’t have the option to create another container and manage users load.

To overcome this limitation and manage, scale your container Kubernetes comes into picture.

Let’s look into architecture,

Kubernetes is a container-orchestration solution for application deployment, scaling. It was designed by Google and now it is maintained by Cloud Native Computing Foundation.

Many popular Cloud Services like Google, Amazon, etc offer a Kubernetes based platform as a service or infrastructure as a service on which Kubernetes is deployed as a platform-providing service.

Kubernetes provides infrastructure that deploy, scale applications based on CPU Usage, User’s traffic and according specified set of rules. Kubernetes follows the master/slave architecture.

Kubernetes Master -

Kubernetes master is responsible for controlling the cluster, managing workloads and communication across the system. It contains various components like API Server, Controller Manager, Scheduler, etcd.

etcd -

It's a lightweight key-value data store, which stores the configuration details of the cluster. It also represents the overall state of the cluster at any time. Kubernetes API Server uses etcd’s watch API to monitor cluster and upgrade/downgrade configuration changes according to specified rules. Let’s say if the deployer has set five instances of pods that need to be running, this is stored in etcd. If it is found that only 4 instances are running, this difference will be detected by comparison with etcd data and Kubernetes will create an additional instance of the new pod.

API Server -

API Server serves the API using JSON over HTTP. API Server processes and validates REST requests and updates the state of the API object in etcd, so it helps clients to configure workloads and containers across Worker nodes.

Scheduler -

Scheduler selects the unscheduled pods of node. It tracks the resources. So based on resource requirements it can schedule pod in node.

Controller Manager -

Controller Manager drives actual cluster state toward the desired cluster state. It communicates with API Server to create, update and delete the resources it manages. It is also responsible to create/replace nodes if any node fails.

Nodes -

Nodes is a system where containers are deployed. Where Docker Image/ Services are running. It contains Kubelet, Kube-Proxy, Container.

Kubelet -

Kublet is responsible for running/starting/stopping and maintaining the node and ensuring containers (pods) on the node are healthy. Kubelet also monitors the state of the pod, if any is not in desired state, it re-deploys the same node.

Node status is checked on certain seconds. If it detects a node failure, the replication controller observes this state change and launches pod on other healthy nodes.

Kube-Proxy -

It’s an Implementation of network proxy and a load balancer. It’s responsible for routing traffic to appropriate containers based on IP and port number of the incoming requests.

Container Runtime -

Container is the core level of micro-service, which contains applications, libraries and dependencies. It is exposed through an external IP address. Kubernetes supports Docker containers to run inside pod.

Pod -

Pod is a scheduling unit in Kubernetes, Kubernetes contains one or more than one container and is located on the same node.

Each pod in Kubernetes is assigned a unique IP address within the cluster, which allows applications to use ports without the risk of conflict.

Inside the Pod, containers reference each other on localhost. But a container within one pod has no way to directly connect the container of another pod, for that container has to use Pod IP Address.

Thanks for reading Blog!

Redux Rematch - State Management

kpiteng — Thu, 02 Sep 2021 15:35:46 +0000

Rematch is an enhanced version of Redux with added few more features, clean architecture, less boilerplate for React Developers. Rematch uses the same redux concept and also has a persistor to persist store data.

Please download full source code from our GitHub.

Let’s look into architecture,

Provider -

<Provider store={store}>

Provider contains an argument store. Here, we need to pass our store object in store argument to initialize Rematch Store.

See What's new in React Navigation 6.x.

Store -

To initialize a store we need to pass models, plugins, redux, etc. Let’s check the syntax,

export default init({
    models,
    plugins: [loadingPlugin, persistPlugin],
    redux: {
      middlewares: [logger],
    },
  })

Models - Models contain state, reducer and effects in one instead of separate like Redux.

Plugins - Plugins contain Loading Plugins, Persist Plugins.

Redux - Contains middleware to perform some action in middleware between store & frontend.

See, How to improve performance of React Application?

Models -

Models are the core part of Store. Model contains state variables, reducers, effects. Frontend will dispatch action, which executes in effects and once effect computed task it will dispatch to reducer and reducer is responsible for updating state variables. So whenever the state variable is updated our component is also notified.

As you can see in Image, when UI Dispatch action it executes effects in model, once effect completed its execution it dispatches to reducers and reducer is only responsible to update state. Once the state gets updated it will re-render the UI Component.

export const TaskList = {
    state: {
      arrTasks: [],
      fetchError: undefined
    },
    reducers: {
      setTasks(state, payload) {
        return {
          ...state,
          arrTasks: payload,
        };
      },
      setError(state, payload) {
        return {
        ...state,
        fetchError: payload
        }
      }
    },
    effects: (dispatch) => ({
      async fetchTaskList() {
        try {
          const data = [
              { "taskID": 1, "taskName": "Task #1" },
              { "taskID": 2, "taskName": "Task #2" },
              { "taskID": 3, "taskName": "Task #3" }
          ]
          dispatch.TaskList.setTasks(data);
        } catch (error) {
          dispatch.TaskList.setError(error);
        }
      },
    }),
  };

Plugins -

Rematch allows various plugins, you can set Loading Plugins, Persist Plugins.

Loading Plugins -

When we dispatch any action, we have to wait for a fraction of time until we receive results (API Call, Local Operation). Redux in-built having plugins that manage and return us loading = true which effect (action) being in-progress.

You can create Loading PlugIns using createLoadingPlugin, and pass your model name/actionname in the whitelist. As you can see we have taskList (model), fetchTaskList (action). So after this code, whenever the fetchTaskList operation is in-progress we will get loading as true, once it’s completed we get loading as false.

import createLoadingPlugin from '@rematch/loading';

export const loadingPlugin = createLoadingPlugin({
  whitelist: [taskList/fetchTaskList'],
});

Discover Top 10 React Hooks Library

Persist Plugins -

Persist Plugins contains all required configuration like, whitelist, blacklist, version, storage, transforms, Let’s discuss each in details,

whitelist - Specify a list of models which you want to store in storage, even though you kill an application, restart application.

blacklist - Specify list of models which you don’t want to store in storage, so next time it will load with initial state, instead of saved state.

version - version of store,each to you deploy new application increase the version number, which help to migrate data from older version to newer version.

storage - Specify the storage when your store data is saved, for mobile applications ideally we prefer AsyncStorage, while in web we prefer default Web Storage.

transform - Specify Filters, many times you are required to blacklist a model (don’t want to store state value/ persist state value) but you want to store a few key/pairs only. So you can create whitelist filters for a few keys, and pass the model name in blacklist. So Rematch will only store key/pairs which you have sent in the whitelist.

Redux -

Redux contains middlewares, you can specify middlewares. You can create your own middleware to perform some action between UI Component and Effect which action dispatch by UI Component.

For example, let’s specify logger as middleware, so when you dispatch action, it will log in the console to track actions, same way whenever reducer updates the state at the same time logger also logs in console to update users about Rematch actions.

import logger from 'redux-logger';
redux: {
  middlewares: [logger],
}

Now Let’s take an example of a Model and dispatch actions from the Component.

Model - TaskList.js

export const TaskList = {
    state: {
      arrTasks: [],
      fetchError: undefined
    },
    reducers: {
      setTasks(state, payload) {
        return {
          ...state,
          arrTasks: payload,
        };
      },
      setError(state, payload) {
        return {
        ...state,
        fetchError: payload
        }
      }
    },
    effects: (dispatch) => ({
      async fetchTaskList() {
        try {
          const data = [
              { "taskID": 1, "taskName": "Task #1" },
              { "taskID": 2, "taskName": "Task #2" },
              { "taskID": 3, "taskName": "Task #3" }
          ]
          dispatch.TaskList.setTasks(data);
        } catch (error) {
          dispatch.TaskList.setError(error);
        }
      },
    }),
  };

Component - Tasks.js

import React, {useEffect} from 'react';
import {
    SafeAreaView, View, FlatList, Text
} from 'react-native';
import { connect } from 'react-redux';

function Tasks(props) {

    useEffect(() => {
      props.fetchTaskList();
    }, []);

    const TaskListItem = ({task}) => {
      return (
        <View style={{flex: 1, marginVertical: 10, marginHorizontal: 10}}>
          <Text>{task.taskName}</Text>
        </View>
      )
    }

    console.log(JSON.stringify(props.arrTasks));

    return (
      <SafeAreaView style={{flex: 1}}>
         <FlatList
            data={props.arrTasks}
            renderItem={({ item, index }) => <TaskListItem task={item}/>}
            keyExtractor={(item, index) => item.taskID}
        />
      </SafeAreaView>
    );
  }
  const mapStateToProps = ({ TaskList, loading }) => ({
    arrTasks: TaskList.arrTasks,
    loading: loading.effects.TaskList.arrTasks,
  });

  const mapDispatchToProps = ({ TaskList: { fetchTaskList } }) => ({
    fetchTaskList: () => fetchTaskList(),
  });

  export default connect(mapStateToProps, mapDispatchToProps)(Tasks);

As you can see in Tasks Component, We are dispatching fetchTaskList on load of Component. Will call effect in TaskList.js model. Once fetch operation completed it will dispatch setTasks (action), which calls function in reducers, and reducer will update state variables of arryTasks, which in result re-render our Tasks Component.

Please download full source code from our GitHub.

Thanks for reading Blog!

Microfrontends With React

kpiteng — Wed, 11 Aug 2021 05:04:37 +0000

All we know about Microservices, which helps to develop, deploy and maintain applications individually. Like Uber where booking and payment services are individually developed and deployed. Same way we can develop, deploy react applications individually. It means, your application is divided into various individual applications and easy to maintain, that concept known as Micro Frontends.

Today, we will see a React Website using Micro Frontends where we create three applications, Blogs App, Header App and Container App (Which glue Blog & Header and represent a single web application).

Please download full source code from our GitHub.

Create React Applications -

Let’s create three react application,

Blogs (Website Blogs App)
Header (Website Header)
Container (Actual Website, Where we merged Blog & Header)

npx create-react-app container
npx create-react-app blogs
npx create-react-app header

Blog Application -
Let’s create Constant add array of blogs,

export const arrBlogs = [
    {
      "blogID": 1,
      "blogName": "React Navigation",
      "blogDetail": "Hello Developers! Let's see what's new in React Navigation 6.x.",
      "blogURL": "https://www.kpiteng.com/blogs/react-nativagation-6.x"
    },
    {
      "blogID": 2,
      "blogName": "Securing React Native Application",
      "blogDetail": "Discover a ways to develop secure react native application.",
      "blogURL": "https://www.kpiteng.com/blogs/securing-react-native-application"
    },
    {
      "blogID": 3,
      "blogName": "Top 10 React Tricks Every Developer Should Use",
      "blogDetail": "Discover a set of React best coding practices, tips and tricks that should be known by all developers.",
      "blogURL": "https://www.kpiteng.com/blogs/top-10-react-tricks-every-developer-should-use"
    }
  ]

Let’s do code for Blogs Listing, Create a file Blog.js

import React, { useState, useEffect } from "react";
import {arrBlogs} from './Constant';
import {
 Link
} from "react-router-dom";
import "./App.css";

function App() {
 return (
   <div className="container mt-5">
     <div className="row">
     {
       arrBlogs.map((blog, index) => {
         return (
           <div className="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 mb-5">
             <div className="card">
               <Link to={{pathname: `/blogdetail/${blog.blogID}`, id: blog.blogID, item: blog}} >
                 <div class="card-body">
                   <h5 class="card-title">{`#${blog.blogID}`}</h5>
                   <p class="card-text">{blog.blogName}</p>
                   <p class="card-text">{blog.blogDetail}</p>
                 </div>
               </Link>
             </div>
           </div>
         )
       })
     }
     </div>
   </div>
 );
}

export default App;

Blogs are located at url.com/blogs, So we need to set up react-router-dom and history.

yarn add react-router-dom history

To see blog detail we need to setup code for BlogDetail, create file BlogDetail.js

import React, { useState, useEffect } from "react";
import {arrBlogs} from './Constant';
import "./App.css";

function BlogDetail(props) {

 const [blogDetail, setBlogDetail] = useState({});

 useEffect(() => {
   const blogID = parseInt(props.match.params.blogid);
   const index = arrBlogs.findIndex((blog) => blog.blogID === blogID);
   if (index !== -1){
     setBlogDetail(arrBlogs[index])
   }
 }, []);

  return (
   <div className="container mt-5">
     <div className="row">
       <div className="card">
         {
           Object.keys(blogDetail).length > 0 && <>
           <p>{`#${blogDetail.blogID}`}</p>
           <p>{blogDetail.blogName}</p>
           <p>{blogDetail.blogDetail}</p>
           <p>{blogDetail.blogURL}</p>
           </>
         }
         {
           Object.keys(blogDetail).length === 0 &&
           <p>We're sorry, Cound't find Blog</p>
         }
       </div>
     </div>
   </div>
 );
}

export default BlogDetail;

Finally, We have Constant, Blogs and BlogDetail. Now Let’s do code for Blogs, BlogDetail routing. Replace App.js code with following,

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from "history";
import Blogs from './Blogs';
import BlogDetail from './BlogDetail';
import "./App.css";

const defaultHistory = createBrowserHistory();

function App({ history = defaultHistory }) {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Blogs} />
       <Route exact path="/blogdetail/:blogid" component={BlogDetail} />
     </Switch>
   </Router>
 );
}

export default App;

Now, it’s time to run the application. We can see the list of Blogs and on press of the blog it redirect users to blog detail.

Header Application -
Here, We simply add header div to demonstrate Header Application. So, let’s add all required dependencies.

yarn add react-router-dom history

Let’s modify code for App.js

import React from "react";
import { createBrowserHistory } from "history";
import "./App.css";

const defaultHistory = createBrowserHistory();

function App({ history = defaultHistory }) {
 return (
   <div>
     <p>KPITENG (Header Application)</p>
   </div>
 );
}

export default App;

Now, let’s run the application, It will show a Simple Header.

So, we have two applications ready, Blogs Application - where we do code for Blogs Listing, Header Application - Where we do code for Showing Header In Application.

Container Application -
Now, it's time to setup our Container Application which actually use/merge both Header and Blogs Application into our Container Application (Our Main Website)

Let’s add react-router-dom, history to Container Application. After that let’s update code for App.js

import React, { useState } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { createBrowserHistory } from "history";
import MicroFrontend from "./MicroFrontend";

import "./App.css";

const defaultHistory = createBrowserHistory();

const {
 REACT_APP_HEADER_HOST: headerHost,
 REACT_APP_BLOGS_HOST: blogHost,
} = process.env;

function Header({ history }) {
 return <MicroFrontend history={history} host={headerHost} name="Header" />;
}

function Blogs({ history }) {
 return <MicroFrontend history={history} host={blogHost} name="Blogs" />;
}

function BlogDetail({history}) {
 return (
   <div>
     <MicroFrontend history={history} host={blogHost} name="Blogs" />
   </div>
 );
}


function Home({ history }) {

 return (
   <div className="container">
      <Header />
      <Blogs />
   </div>
 );
}

function App() {
 return (
   <BrowserRouter>
     <React.Fragment>
       <Switch>
         <Route exact path="/" component={Home} />
         <Route exact path="/blogdetail/:blogid" component={BlogDetail} />
       </Switch>
     </React.Fragment>
   </BrowserRouter>
 );
}

export default App;

SetUp Micro Frontends -

Think, how my Container app knows about Header Application and Blogs Application. Let’s set it up one by one.

*SetUp Web Application Port - *
Container Application - Port 3000
Header Application - Port 3001
Blogs Application - Port 3002

To do this, update package.json,

Container Application,

"scripts": {
   "start": "PORT=3000 react-app-rewired start",
 },

Header Application,

"scripts": {
   "start": "PORT=3001 react-app-rewired start",
 },

Blogs Application,

"scripts": {
   "start": "PORT=3002 react-app-rewired start",
 },

Now, Create .env file in root directory of Container Application,

REACT_APP_HEADER_HOST=http://localhost:3001
REACT_APP_BLOGS_HOST=http://localhost:3002

You know, React App bundle entire applications to main.js, Where we have functions to render, mount, unmount components.

Render Function Name: render{ApplicationName}
UnMount Function Name: unmount{ApplicationName}

So, Your Blogs App looks like,

renderBlogs
unmountBlogs

Same way, Header App looks like,

renderHeader
unmountHeader

Let’s create a MicroFrontend.js file in Container App, which has business logic for mount, unmount components.

import React, { useEffect } from "react";

function MicroFrontend({ name, host, history }) {
 useEffect(() => {
   const scriptId = `micro-frontend-script-${name}`;

   const renderMicroFrontend = () => {

     window[`render${name}`](`${name}-container`, history);
   };

   if (document.getElementById(scriptId)) {
     renderMicroFrontend();
     return;
   }

   fetch(`${host}/asset-manifest.json`)
     .then((res) => res.json())
     .then((manifest) => {
       const script = document.createElement("script");
       script.id = scriptId;
       script.crossOrigin = "";
       script.src = `${host}${manifest.files["main.js"]}`;
       script.onload = () => {
         renderMicroFrontend();
       };
       document.head.appendChild(script);
     });

   return () => {
     window[`unmount${name}`] && window[`unmount${name}`](`${name}-container`);
   };
 });

 return <main id={`${name}-container`} />;
}

MicroFrontend.defaultProps = {
 document,
 window,
};

export default MicroFrontend;

As you can see MicroFrontend component will take name, host and history as params. See the fetch function which fetch the asset-manifest.json from the host and create a script object using the main.js and it will use the render function to mount components.

SetUp Micro Frontends for Blogs Application -

Let’s install react-app-rewired package which overrides the build config without ejecting the app.

yarn add react-app-rewired

Create config.overrides.js in the root directory of blogs application and add the following code.

module.exports = {
   webpack: (config, env) => {
     config.optimization.runtimeChunk = false;
     config.optimization.splitChunks = {
       cacheGroups: {
         default: false,
       },
     };
      config.output.filename = "static/js/[name].js";
      config.plugins[5].options.filename = "static/css/[name].css";
     config.plugins[5].options.moduleFilename = () => "static/css/main.css";
     return config;
   },
 };

Now, let’s update scripts section of package.json file,

"scripts": {
   "start": "PORT=3002 react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-app-rewired eject"
 },

And final step in Blogs Application to update index.js,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

window.renderBlogs = (containerId, history) => {
 ReactDOM.render(
   <App history={history} />,
   document.getElementById(containerId),
 );
};

window.unmountBlogs = containerId => {
 ReactDOM.unmountComponentAtNode(document.getElementById(containerId));
};

if (!document.getElementById('Blogs-container')) {
 ReactDOM.render(<App />, document.getElementById('root'));
}

SetUp Microfrontends for Header Application -

Install react-app-rewired
Update package.json
Update index.js file

Finally, We run the Container App (Our Main Web Application)

Please download full source code from our GitHub.

Thanks for reading Blog!

React Navigation 6.x

kpiteng — Thu, 29 Jul 2021 03:39:21 +0000

Hello Developers! Let's see what's new in React Navigation 6.x.

Key Points -

Installation
Params are now overwritten on navigation instead of merging
By default, modals in iOS uses presentation style and in android it uses slide animation
Drawer now uses a slide animation by default on iOS
Headers by default in Drawer & Bottom Tab, No more need to add Stack Navigator
Material Top Tabs now uses ViewPager based implementation with native experience
UI Elements Library with rich feature component to be used in React Navigation

Installation

Minimum requirements
React Navigation 6 requires at least react-native@0.63.0. If you’re using Expo, your SDK needs to be at least 41.

NPM

npm install @react-navigation/native@next @react-navigation/stack@next

YARN

yarn add @react-navigation/native@next @react-navigation/stack@next

React Navigation using some core utilities and those are used by navigators to create navigation structures in the app.

Following libraries needs to be install -

react-native-gesture-handler
react-native-reanimated
react-native-screens 
React-native-safe-area-context

Install dependency -
NPM

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

YARN

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link.

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

Older versions of some libraries are longer supported, React Navigation requires newer versions of the following libraries:

react-native-safe-area-context >= 3.0.0
react-native-screens >= 2.15.0
react-native-tab-view >= 3.0.0
react-native >= 0.63.0
expo - 40+ (if you use Expo)

Recommended - Securing React Native Application

Params are now overwritten on navigation instead of merging -

When navigating to an existing component/screen, params are merged from the initial version. Example - Let’s say there is existing article screen with the following params:

{
  "articleTitle": "React Navigation",
  "articleBody": "Top React Navigation Library"
}

When you navigate with navigation.navigate ("Article", { "articleTitle": "Smart Home"}), so after param merge it will look like

{ 
  "articleTitle": "Smart Home", 
  "articleBody": "Top React Navigation Library"
}

So, Merging behavior is useful in a few scenarios, but it’s problematic in other cases. In React Navigation 6, no more default merge, instead it will be overwritten. If you want merge params then you can do it by explicitly by merge: true like this,

navigation.navigate({
  name: “Article”,
  params: { articleTitle: 'Smart Home' },
  merge: true,
});

Recommended - Top 10 React Hooks Library

By default, modals in iOS uses presentation style and in android it uses slide animation -

iOS -
mode="modal" is removed in favor of presentation: "modal", New presentation options there, allow developers to customer whether screen is modal or screen(basic).

iOS having presentation: "modal" - which shows a new presentation style modal introduced in iOS 13. It also manages status bar height in the header automatically, that ideally we did manually before.

Android -
Previously we didn’t have modal animation in Android, but now there is a slide from the bottom animation. If you don’t want to use new animation then you can change it using animation related options.

New presentation: "transparentModal" option to make it easier to bulier transparent modals. Developers can mix regular screens with modal screens in the same stack.

Recommended - How to improve the performance of React Native Application?

Drawer now uses a slide animation by default on iOS -

Installation -
NPM

npm install @react-navigation/drawer@next

YARN

yarn add @react-navigation/drawer@next

There is a new implementation based on the Reanimated Library v2, if it’s not available then it will take the old implementation. To force apply to the old implementation using - useLegacyImplementation={true} to Drawer.Navigator.

Slide animation is default in iOS, Still you want to keep previous behavior then you can specify, drawerType: "front" in screenOptions.

Headers by default in Drawer & Bottom Tab, No more need to add Stack Navigator -

TabScreen & Drawer now show a header by default similar to the screen in stack navigator.

If you want previous behavior not to keep the header then you can use, headerShown: false in screenOptions.

Material Top Tabs now uses ViewPager based implementation with native experience -

Installation
NPM

npm install @react-navigation/material-top-tabs@next react-native-pager-view

YARN

yarn add @react-navigation/material-top-tabs@next react-native-pager-view

The react-native-tab-view dependency is upgraded to the latest version (3.x) which now uses react-native-pager-view instead of Reanimated and Gesture Handler. Same like bottom tabs, the tabBarOptions prop was removed and the options from there were moved to screen's options instead.

Previously lazy props is on stack level now shift to lazy per-screen configuration for material top tabs.

UI Elements Library with rich feature component to be used in React Navigation -

React Navigation added a new package which contains multiple UI Elements related to navigation like, Header, Header Title, Header Background Component and many more. So developers can use those components in all navigations.

Installation
NPM

npm install @react-navigation/elements@next react-native-safe-area-context

YARN

yarn add @react-navigation/elements@next react-native-safe-area-context

import

import { useHeaderHeight } from '@react-navigation/elements';

Discover Element Library for more details!

Thanks for reading Blog!

Lerna Workspaces - Managing Projects With Multiple Packages

kpiteng — Sat, 24 Jul 2021 14:15:29 +0000

Lerna workspace allows to create/manage various packages, like app (react application), web (react.js application), common (common business logic/code) needs to be implemented both in react native and react.js.

Lerna workspace manages versioning so you can create a package for some of your functionality and want to share with other applications then you can easily integrate in other packages by adding that dependency in package.json like you do for other NPM/YARN packages.

Please download full source code from our GitHub.

Related Article - Share Code Between React Native & React.js

Learn more about Yarn Workspaces - Monorepo Approach

Step by Step Lerna Integration -

If you are using Lerna for the first time, you need to install Lerna Globally.

npm install --global lerna

Let's start by creating Lerna Project,

npx lerna init // initialize lerna workspace

After finish initialization you will get following folder/files directory,

lerna-workspace
  /packages
  lerna.json
  package.json

packages - You can put your web (Web App), app (Mobile App), common (Common Components) inside this directory

lerna.json - Contain configuration for packages

package.json - Contain dependency and lerna workspace settings

Initially in package.json you will get package name "name": "root", we will change it to "name": "@workspace/root", make sure "private": true to share packages under the workspaceSettings.

package.json

{
  - "name": "root",
  + "name": "@workspace/root",
}

Now, Go to lerna.json change it to following,

{
  "packages": [
    "packages/*"
  ],
  + "version": "independent",
  + "npmClient": "yarn",
  + "useWorkspaces": true
 }

Let's change workspace settings in package.json, Change it to following

{
  "name": "@workspace/root",
  "private": true,
  "devDependencies": {
      "lerna": "^4.0.0"
  },
  + "workspaces": {
      + "packages": [
      + "packages/**"
      + ]
  + }
}

We have setup everything in lerna.json and package.json, now lets create React.js application and common component directory

cd packages
npx create-react-app components --template typescript // common component
npx create-react-app app --template typescript // react.js web application

Monorepo hoist package to root, so dependency you have installed, actually installed on root node_modules instead of node_modules on each app component package.

If you see the folder structure, it will looks like,

lerna-workspace
 /node_modules
 /packages
   /app
      package.json
      ...
   /components
      package.json
      ...
 lerna.json
 package.json
 yarn.lock

Now, think you have two application using same components, instead of design & develop components separately, you can add it to /components packages and use that package wherever your want, let's see,

create-react-app-config - CRACO - help us to modify web package configuration, so let's install it,

yarn add --dev craco -W

Now, Let's change the package name for the app and components.

/packages/app/package.json

/packages/app/package.json
{
  - "name": "app",
  + "name": "@workspace/app",
}

/packages/components/package.json

{
  - "name": "components",
  - "name": "@workspace/components",
}

Let's add components dependency into app/package.json

{
  "dependencies": {
    + "@workspace/components": "0.1.0",
      ...
  }
}

We are using craco, so we need to change few settings in app/package.json scripts to following,

{
  "scripts": {
    + "start": "craco start",
    + "build": "craco build",
    + "test": "craco test",
    + "eject": "craco eject"
  }
}

Now, let's switch to root package.json and add scripts, Lerna has powerful scripts commands if you type build here in root package.json it will build for all child packages at the same instance.

/package.json
{
  + "scripts": {
    + "start": "lerna exec --scope @workspace/app -- yarn start"
  + }
}

Now, let's execute it, execute - yarn start, it will give errors and you can't find the modules craco.config.js which we don't have yet.

For instance let's change scripts in /app/package.json to following,

{
  "scripts": {
    + "start": "react-scripts start"
  }
}

And try to execute yarn start it will load your react app successfully. So our web app runs perfectly using lerna workspace.

Now, let's add a button in the web app and perform increment operation and save count value into state.

app/src/App.js

function App() {
  const [count, setCount] = useState(0);
  return (
    <button
      onClick={() => setCount((prev) => ++prev)}
      >
      Increment
    </button>
  )
}

Run the web app, counter increment works perfectly.

Now, let's pull button component in components, go to components directory,

cd components
cd src
mkdir components

Create new file Button.tsx inside packages/components/src/components, add following code,

import * as React from "react";

interface Props {
 onClick: () => void;
}

const Button: React.FC<Props> = (props) => {
 return <button {...props}>Increment</button>;
};

export default Button;

Now, go to packages/components/src/index.tsx and change to following,

import Button from "./components/Button";
export  { Button };

Let's add to packages/app/src/App.js
+ import { Button } from "@workspace/components";

function App() {
  const [count, setCount] = useState(0);

  console.log(Button);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        + Your count is {count}
        + <Button onClick={() => setCount((prev) => ++prev)} />
     </header>
   </div>
 );
}

export default App;

If you faced any compile error for App.tsx not found then, go to

packages/components/package.json and add

{
  + "main": "./src/index.tsx"
}

We need to hoist our packages so execute,

yarn lerna bootstrap // this will bootstrap application and make shared components/links components
yarn start

After yarn start you will faced error for loaders, because create-react-app webpack contain loaders, so we need to setup following,

cd packages/app/
touch craco.config.js

And add the following code in craco.config.js

const path = require("path");
const { getLoader, loaderByName } = require("@craco/craco");

const packages = [];
packages.push(path.join(__dirname, "../components"));

module.exports = {
 webpack: {
   configure: (webpackConfig, arg) => {
     const { isFound, match } = getLoader(
       webpackConfig,
       loaderByName("babel-loader")
     );
     if (isFound) {
       const include = Array.isArray(match.loader.include)
         ? match.loader.include
         : [match.loader.include];

       match.loader.include = include.concat(packages);
     }
     return webpackConfig;
   },
 },
};

As we have added craco.config.js so let's change scripts settings in /packages/app/package.json

{
  "scripts": {
    + "start": "craco start",
  }
}

And finally yarn starts, web app works fine with using Button (reusable code) from components package.

Lerna Scripts -

test scripts

Lerna allows you to run scripts and execute wherever you want to do in scripts. Let’s add some test scripts in root /package.json

// package.json
{
  + "scripts": {
    + "test": "lerna run test"
  + }
}

Also, add scripts in packages,

// packages/app/package.json
{
  + "scripts": {
    + "test": "echo app packages test scripts"
  + }
}

// packages/components/package.json
{
  + "scripts": {
    + "test": "echo component packages test scripts"
  + }
}

Now, if you run test script, lerna run test it will log run test scripts in two packages (app, components) and you will get log following,

lerna info Executing command in 2 packages: "yarn run test"
lerna info run Ran npm script 'test' in '@workspace/components' in 0.5s:
$ echo component packages test scripts
component packages test scripts
lerna info run Ran npm script 'test' in '@workspace/app' in 0.4s:
$ echo app packages test scripts
app packages test scripts
lerna success run Ran npm script 'test' in 2 packages in 0.9s:
lerna success - @workspace/app
lerna success - @workspace/components

scope scripts

So, you see, lerna runs test scripts in two packages. If you want to test script of specific packages you can do it by giving scope, Change root package.json,

// package.json
{
  + "scripts": {
    + "test": "lerna run test --scope=@workspace/app"
  + }
}

Now, let’s run the script npx run test, It will log following,

lerna notice filter including "@workspace/app"
lerna info filter [ '@workspace/app' ]
lerna info Executing command in 1 package: "yarn run test"
lerna info run Ran npm script 'test' in '@workspace/app' in 0.7s:
$ echo app packages test scripts
app packages test scripts
lerna success run Ran npm script 'test' in 1 package in 0.7s:
lerna success - @workspace/app

You see this time script executed in @workspace/component because we have specified scope.

You can can apply multiple packages in scope by specifying like,

scope with multiple packages

// package.json
{
  + "scripts": {
    + "test": "lerna run test --scope={@workspace/app,@workspace/components}"
  + }
}

It will log following -

lerna notice filter including ["@workspace/app","@workspace/components"]
lerna info filter [ '@workspace/app', '@workspace/components' ]
lerna info Executing command in 2 packages: "yarn run test"
lerna info run Ran npm script 'test' in '@workspace/components' in 0.6s:
$ echo component packages test scripts
component packages test scripts
lerna info run Ran npm script 'test' in '@workspace/app' in 0.3s:
$ echo app packages test scripts
app packages test scripts
lerna success run Ran npm script 'test' in 2 packages in 0.9s:
lerna success - @workspace/app
lerna success - @workspace/components

Lerna Versioning

Lerna contains packages, everytime you build/commit something, it allows you to increment the package version automatically using the following versioning script.

{
  + "scripts": {
    + "new-version": "lerna version --conventional-commits --yes",
  + }
}

Learn more about conventional commit and commitzen.

Conventional commit create Git Tag and ChangeLog and Increment package version for you so you can know what you changed in each release/commit. Let’s run a script, but before that commit your code and run the following.

Execute npm run new-version you will get following logs,

> lerna@1.0.0 new-version /Users/kpiteng/lerna
> lerna version --conventional-commits --yes

lerna notice cli v4.0.0
lerna info current version 1.0.0
lerna info Looking for changed packages since v1.0.0
lerna info getChangelogConfig Successfully resolved preset "conventional-changelog-angular"

Changes:
 - @workspace/app: 1.0.0 => 1.0.1
 - @workspace/components: 1.0.0 => 1.0.1

lerna info auto-confirmed 
lerna info execute Skipping releases
lerna info git Pushing tags...
lerna success version finished

This will create CHANGELOG.md file for you in both packages, Let’s look it, Go to /packages/common/CHANGELOG.md you will find following,

/packages/common/CHANGELOG.md,

If you see packages/app/package.json you will see version incremented,

// packages/app/package.json
{
  "name": "@workspace/app"
  "version": "1.0.1"
}

// packages/components/package.json
{
  "name": "@workspace/components",
  "version": "1.0.1"
}

diff scripts

Lerna diff script allows the user to check a screenshot of what exactly changed since the last commit, it is more like Git, Bitbucket - it’s showing what you have changed before the commit. So to do that, lets add script in root package.json

// package.json
  {
    "scripts": {
      + "test": "lerna run test --since"
      + "diff": "lerna diff"
  }
}

Also, let’s change something in code, go to /packages/app/src/App.js,

// packages/app/src/App.js
function App() {
  + const [counter, setCounter] = useState(0);
}

Now, let’s run the script npx run diff you will get log following

> lerna@1.0.0 diff /Users/kpiteng/lerna
> lerna diff

lerna notice cli v4.0.0
diff --git a/packages/app/src/App.js

 module.exports = () => {
   const [count, setCount] = useState(0);
+  const [counter, setCounter] = useState(0);
 }

Please download full source code from our GitHub.

Thanks for reading Blog!

Share Code Between React Native and React.js

kpiteng — Sat, 17 Jul 2021 11:08:31 +0000

Hello Developers! Many times we needs to reuse some code between React Native & React.js like state management code (Redux, Mobx, Apollo Client), utility & common functions, global constants, api call & common business logic. Today, we will learn to share code between React Native and React.js using Yarn Workspaces.

If you haven't checkout Yarn Workspaces I request you to check it first where I have explained SetUp Yarn Workspaces step-by-step.

Please download full source code from KPITENG GitHub.

Yarn Workspaces

Yarn Workspaces allow developers to create workspaces that share packages under the same workspace. Consider you have multiple packages and all are using common dependencies like graphql, axios, etc. To install dependency separately for each package (node_modules), Yarn Workspaces allow you to install packages at root level and you can access that dependency throughout all packages inside that workspaces. So with lots of installation, memory size will be reduced.

WML

Consider you have created a few common packages that you need to use for both React, React Native, Server (BackEnd), So whenever you change on common packages you need to add that updated package into your React, React Native node_modules. WML helps you to link your packages to where it is being used.

> wml add common /app/node_modules/@sharecode/common

This command line will copy common packages inside the app's node_modules.

nohoist

As discussed earlier in Yarn Workspaces, whatever dependency (npm, node_modules) you were installing for your packages, it will be installed on your root node_modules instead of individual packages. If you checked then react-native packages refer to node_modules inside /app directory. But actually it will be installed on root (node_modules) so to link react-native dependency we are using nohoist which helps you to link your dependency. To do this you need to add few lines of code in your /app/package.json

"workspaces": {
   "nohoist": [
     "react-native",
     "react-native/**",
     "react",
     "react/**"
   ]
 }

Steps by Step Integration

1) Create WorkSpace directory named - ReactShareCode

> mkdir react-share-code
> cd mkdir

2) Create package.json file and add following lines of code, which contains a list of packages under WorkSpace

{
   "private": true,
   "name": "react-share-code",
   "version": "1.0.0",
   "workspaces":  [
      "app", "web", "common"
   ]
}

Here, we have set up three packages (app, web, common) inside our Workspaces. We have app (React Native App), web (React.js Website), common (Common Code - Which used in React Native & React.js Website)

Now, let's create three projects, app (react native), web (react.js), common (common code between react & react native)

> npx react-native init app // this will create react native application
> npx create-react-app web // this will create react.js application

> mkdir common // this is our common directory for code share
> cd common

> yarn init -y // this will create package.json file with following code

/common/package.json
{
   "name": "common",
   "version": "1.0.0",
   "description": "...",
   …
}

Now, let's change some hierarchy of folder structure. Right now if you see,

> ls // it will print following
app web common package.json

You see, everything are on root folder, let's move app, web, common inside packages folder

> mkdir packages

> mv app/ packages/app/
> mv web/ packages/app/
> mv common/ packages/app/

You can directory drag your app, web, common folder directory to the packages folder. We have changed folder hierarchy, so we need to update root package.json according

Update react-share-code/package.json file look like this

{
   "private": true,
   "name": "react-share-code",
   "version": "1.0.0",
   "workspaces":  [
      "packages/*"
   ]
}

Till, all going well, If you see packages name it will be like “name”: “app”, “name”: “web”, “name”: “common”, but as per best coding practices we need to append project name, workspace name. So, lets change packages name

react-share-code/packages/app/package.json -

{
   - "name": "app",
   + "name": "@sharecode/app"
}

react-share-code/packages/web/package.json -

{
   - "name": "web",
   + "name": "@sharecode/web"
}

react-share-code/packages/common/package.json -

{
   - "name": "common",
   + "name": "@sharecode/common"
}

So, we have finish with

WorkSpace Creation
Project Creation (React Native, React.JS)
Common Folder Creation
Structure Folder Hierarchy Into packages directory
Updated packages name

Now, let's put some reusable code into a common directory.

Create file index.js inside common directory and add following line -

export const sharedVariable = “Shared Variable”;

Now, let's use this in React Native Project, to use code we need to add it as a dependency, So lets update /packages/app/package.json file

{
   "devDependencies": {
    + "@sharecode/common": "1.0.0"
   },
   + "workspaces": {
      + "nohoist": [
         + "react-native",
         + "react-native/**",
         + "react",
         + "react/**"
      + ]
   + }
}

Here, we have added @sharecode/common as a devDependency and added workspaces - nohoist to get reference of react-native.

Now, lets go to code /app/app.js

+ import {sharedVariable} from “@sharecode/common”;

return (
   + <Text>{sharedVariable}</Text>
)

Before start running project, let’s remove node_modules both /app and root /node_modules to reinstall packages

app > rm -rf node_modules ../../node_modules
app > yarn install // install node_modules

Now, let's run the react-native app, you will see Text Value “Shared Variable” which is fetched from common logic.

Same way, lets integrate it into React.js Application.

/web/index.js
+ import {sharedVariable} from “@sharecode/common”;

return (
   + <div>{sharedVariable}</div>
)

Run the react.js application you will get printed “Shared Variable”

That’s it, you have used the same code between React Native & React.JS.

What kind of code you can add into shared/common -

Redux/Redux Saga/Redux Rematch/Apollo Client/Mobx
Common API Imports
Common Themes/ Fonts Settings
Common Variables/ Constants
Common API Calls

You can add as much code as you require as per project needs.

Now, If you have changed anything in your common folder/ code, then to merge your latest common packages we are using WML.

app > wml ../common ./node_modules/@reactsharecode/common

Above command will copy code files of common into app/web node_modules under @reactsharecode/common packages.

To start linking you can do

app > wml start

Execute above WML commands whenever you have updated anything into your common packages, WML will merge code into app/node_modules/@reactsharecode/common and web/node_modules/@reactsharecode/common.

Please download full source code from KPITENG GitHub.

Thanks for reading Blog!

Yarn Workspaces - Monorepo Approach

kpiteng — Fri, 16 Jul 2021 04:03:29 +0000

See how Yarn Workspaces allow developers to develop mobile & web applications using monorepo approach, helps to split and share code between multiple packages.

Projects grow over time and some pieces of code can be useful elsewhere in other projects. Also we need to share code between projects like Redux, ApolloClient, MobX - State Management Library, Common Utilities, etc same for both React Native, React.js or other technologies.

Download full source code from KPITENG - Github

Monorepos

Many of us tried splitting a code into multiple packages knowing how difficult it is to manage across multiple packages at one time. To make this easier, we adopted a monorepo approach, or multiple packages repositories, which reduce the burden of writing code across packages.

Many projects used by JavaScript developers are managed as monorepos like, Babel, React, Jest, Vue, Angular.

What is Yarn Workspaces?

Yarn Workspaces is a feature that allows users to install dependencies from multiple package.json files in subfolders of a single root package.json file. Let’s say you have React.js & React Native Application and both using Redux, instead of installing Redux into React Native Project and React.js Project, Yarn installs it to root node_modules to reduce the size of project, making it simpler for developers.

Step By Step Integration

Set Up Yarn Workspaces -

Let’s create Project Folder Name - YarnWorkspaces

Create a file named package.json, Specify two things

{
   “private”: true,
   “workspaces”: [“common“, “app”, “web”, “server”]
}

Now, let's create folder directory

mkdir common
mkdir app
mkdir web
mkdir server

Now, let's jump into common folder

cd common
yarn init -y

Same way let’s go to server directory

cd server
yarn init -y

Go to common folder, Create file index.js

module.exports = () => {
   console.log("Hello from KPITENG");
}

Here, I have an export function which prints logs.

Now, let’s go to Server folder and create file index.js and paste following code,

const commonFunction = require('common');
commonFunction();

Now, let’s run this, but it will break because server doesn’t know common exists, to tell server we need to add dependency in server’s package.json

"dependencies": {
   "common": “1.0.0”
}

Now, let's do yarn install to link directory, Go to server directory and trigger,

yarn install

Now, let’s check our dependency are properly mapped, Go to root directory do,

> ls // It will print following folder hierarchy
common node_modules package.json server yarn.lock server

> ls node_modules // you can see common server directly inside it
common server

So, our dependency property links with workspaces, not let’s try our server/index.js

> node server/index.js // It will print following
Hello from KPITENG

If you want to change any message in common/index.js then it will automatically reflect using symlink

Let’s change common/index.js

module.exports = () => {
   console.log("Welcome to KPITENG");
}

And trigger,

> node server/index.js // It will print following
Welcome to KPITENG

Update Package Name - @sharecode

Till everything seems fine, Not it’s time to give a proper naming convention, Generally we prefer to append ProjectName/PackageName, In our case, lets change package name of common,

Go To - common/package.json

{
  - "name": "common",
  + "name": "@sharecode/common",
}

Go To - common/package.json

{
    - "name": "server",
    + "name": "@sharecode/server"
      "dependencies": {
        - "common": "1.0.0"
        + "@sharecode/common": "1.0.0"
      }
}

Go To - server/index.js

- const commonFunction = require(“common”)
+ const commonFunction = require(“@sharecode/common”)

Now, let's do yarn install to update package

> yarn install
> node server/index.js // it will log following
Welcome to KPITENG

Managing Folder Structure / Hierarchy -

Now, you see our common server packages are inside main directory, Let’s shift it to folder packages, let’s create folder packages inside ReactShareCode,

> mkdir packages

And move common and server packages inside it.

mv common/ packages/commom/
mv server/ packages/server/
mv app/ packages/app/

We also need to change our package.json from main folder

{
  - "workspaces": ["common", "server"]
  + "workspaces": ["packages/**"]
}

So, package will be changed, so let's rm node_modules and install again

> rm -rf node_modules
> cd packages/server
> rm -rf node_modules
> yarn install

It will install dependency again with update packages directory

Now, you can try,

> node packages/server/index.js // It will log following
Welcome to KPITENG

Now, If you want to install any dependency for your server packages

> cd packages/server
> yarn add graphql

It will install dependency in root node_modules and it will be added as dependency in server/package.json, It means node_module installed common / root node_modules. Let’s cross check it, Go to root directory

> ls
package.json node_modules
> ls node_modules // It will show graphql dependency
@sharecode graphql

It means there is one graphql package that will work for whole workspaces which is very nice in workspaces concept.

Download full source code from KPITENG - Github

What Next?

Learn, Share code between React Native & React.js using Yarn Workspace.

Thanks for reading Blog!

Securing React Native Application

kpiteng — Mon, 12 Jul 2021 13:57:30 +0000

Discover a ways to develop secure react native application.

Key Points -

Screenshot Prevention
Rooted/ Jailbroken Device Detection
SSL Pinning
Storage of Sensitive Data - API EndPoint / FB / Google / Firebase Keys
Local Storage
Deep Linking
Android Specific Security
iOS Specific Security
Authentication Methods
Data Encryption

1. Screenshot Prevention

iOS Integration -

Screenshot Restriction is not possible on Straight Forward Way, But you can do something like, When application InActive - add Blur Layer/ View on window and when Active - remove BlurLayer/View.

Add Following Lines of Code in AppDelegate.m

// AppDelegate.m
- (void)applicationWillResignActive:(UIApplication *)application {
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    [blurEffectView setFrame:self.window.bounds];
    blurEffectView.tag = 1234;
    blurEffectView.alpha = 0;
    [self.window addSubview:blurEffectView];
    [self.window bringSubviewToFront:blurEffectView];
    [UIView animateWithDuration:0.5 animations:^{
        blurEffectView.alpha = 1;
    }];
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
    UIVisualEffectView *blurEffectView = [self.window viewWithTag:1234];
    [UIView animateWithDuration:0.5 animations:^{
      blurEffectView.alpha = 0;
    } completion:^(BOOL finished) {
        [blurEffectView removeFromSuperview];
    }];
}

Android Integration -

In Android it’s quite simple to restrict user to prevent taking screenshot - Go to MainActivity.java

// MainActivity.java
// Import Following 
+ import android.view.WindowManager;
+ import android.os.Bundle

Add following lines of Code
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+   super.onCreate(savedInstanceState);
+
+   getWindow().setFlags(
+     WindowManager.LayoutParams.FLAG_SECURE,
+     WindowManager.LayoutParams.FLAG_SECURE
+   );
+ }

Another way to prevent for screenshot - Go to MainActivity.java, In onCreate method add lines marked as +.

// MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    + getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
}

2. Rooted/ Jailbroken Device Detection

iOS Integration -

To detect iOS devices is Jailbroken, use following code. You need to create React Native Native Module and integrated iOS Code in iOS Project.

We will check following to detect Jailbroken devices -

Check if Cydia is installed
Check if the app can edit system files
Check if the system contains suspicious files
Check if other suspicious apps (FakeCarrier, Icy, etc.) is installed
Check if Cydia is installed with alternative names (using URIScheme)

import Foundation
import UIKit

extension UIDevice {
    var isSimulator: Bool {
        return TARGET_OS_SIMULATOR != 0
    }

    var isJailBroken: Bool {
        get {
            if UIDevice.current.isSimulator { return false }
            if JailBrokenHelper.hasCydiaInstalled() { return true }
            if JailBrokenHelper.isContainsSuspiciousApps() { return true }
            if JailBrokenHelper.isSuspiciousSystemPathsExists() { return true }
            return JailBrokenHelper.canEditSystemFiles()
        }
    }
}

private struct JailBrokenHelper {
    //check if cydia is installed (using URI Scheme)
    static func hasCydiaInstalled() -> Bool {
        return UIApplication.shared.canOpenURL(URL(string: "cydia://")!)
    }

    //Check if suspicious apps (Cydia, FakeCarrier, Icy etc.) is installed
    static func isContainsSuspiciousApps() -> Bool {
        for path in suspiciousAppsPathToCheck {
            if FileManager.default.fileExists(atPath: path) {
                return true
            }
        }
        return false
    }

    //Check if system contains suspicious files
    static func isSuspiciousSystemPathsExists() -> Bool {
        for path in suspiciousSystemPathsToCheck {
            if FileManager.default.fileExists(atPath: path) {
                return true
            }
        }
        return false
    }

    //Check if app can edit system files
    static func canEditSystemFiles() -> Bool {
        let jailBreakText = "Developer Insider"
        do {
            try jailBreakText.write(toFile: jailBreakText, atomically: true, encoding: .utf8)
            return true
        } catch {
            return false
        }
    }

    //suspicious apps path to check
    static var suspiciousAppsPathToCheck: [String] {
        return ["/Applications/Cydia.app",
                "/Applications/blackra1n.app",
                "/Applications/FakeCarrier.app",
                "/Applications/Icy.app",
                "/Applications/IntelliScreen.app",
                "/Applications/MxTube.app",
                "/Applications/RockApp.app",
                "/Applications/SBSettings.app",
                "/Applications/WinterBoard.app"
        ]
    }

    //suspicious system paths to check
    static var suspiciousSystemPathsToCheck: [String] {
        return ["/Library/MobileSubstrate/DynamicLibraries/LiveClock.plist",
                "/Library/MobileSubstrate/DynamicLibraries/Veency.plist",
                "/private/var/lib/apt",
                "/private/var/lib/apt/",
                "/private/var/lib/cydia",
                "/private/var/mobile/Library/SBSettings/Themes",
                "/private/var/stash",
                "/private/var/tmp/cydia.log",
                "/System/Library/LaunchDaemons/com.ikey.bbot.plist",
                "/System/Library/LaunchDaemons/com.saurik.Cydia.Startup.plist",
                "/usr/bin/sshd",
                "/usr/libexec/sftp-server",
                "/usr/sbin/sshd",
                "/etc/apt",
                "/bin/bash",
                "/Library/MobileSubstrate/MobileSubstrate.dylib"
        ]
    }
}

Also, don't forget to add "Cydia" in LSApplicationQueriesSchemes key of info.plist. Otherwise canOpenURL will always return false.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>cydia</string>
</array>

Android Integration -
Rootbear library helps in detection of rooted devices. Simply follow steps of installation and using React Native Native Module you can access Rootbear functions to detection of rooted devices.

Library will check following to detection of Rooted Devices

checkRootManagementApps
checkPotentiallyDangerousApps
checkRootCloakingApps
checkTestKeys
checkForDangerousProps
checkForBusyBoxBinary
checkForSuBinary
checkSuExists
checkForRWSystem

It's simple to integrate in Code -

RootBeer rootBeer = new RootBeer(context);
if (rootBeer.isRooted()) {
    //we found indication of root
} else {
    //we didn't find indication of root
}

SafetyNet Android-only API that helps in the detection of rooted devices and bootloader unlocks. It also provides security against security threats, device tampering, malicious apps, and fake users.

The react-native-google-safetynet, which is a wrapper plugin for SafetyNet’s API, can also be used to verify the device of the user. The react-native-device-info plugin can be used to see if the app is being run on an emulator.

3. SSL Pinning

SLL Pinning can be done using 3 different ways

Public Key Pinning
Certificate Pinning
Subject Public Key Info (SPKI) Pinning

iOS Integration - Place your .cer files in your iOS Project. Don't forget to add them in your Build Phases - Copy Bundle Resources, in Xcode

Android Integration - Place your .cer files under src/main/assets/

Certificate Pinning With react-native-ssl-pinning -
iOS - drag .cer to Xcode project, mark your target and "Copy items if needed"

fetch(url, {
  method: "POST" ,
  timeoutInterval: communication_timeout, // milliseconds
  body: body,
  // your certificates array (needed only in android) ios will pick it automatically
  sslPinning: {
    certs: ["cert1","cert2"] // your certificates name (without extension), for example cert1.cer, cert2.cer
  },
  headers: {
    Accept: "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*", "e_platform": "mobile",
  }
})
.then(response => {
  console.log("response received:", response);
})
.catch(err => {
  console.log("error:", err);
})

Public Key Pinning With react-native-ssl-pinning -
iOS - drag .cer to Xcode project, mark your target and "Copy items if needed". No Extra steps needed for public key pinning. AFNetworking will extract public key directly from certificate.

Android - public key should be extracted by following command, simply replace google with your domain.

openssl s_client -servername google.com -connect google.com:443 | openssl x509 -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

import {fetch} from 'react-native-ssl-pinning';

fetch("https://publicobject.com", {
  method: "GET" ,
  timeoutInterval: 10000, // milliseconds
  // your certificates array (needed only in android) ios will pick it automatically
  pkPinning: true,
  sslPinning: {
    certs: [
      "sha256//r8udi/Mxd6pLOS73Djkex2EP4nFnIWXCqeHsTDRqy8=",
    ]
  },
  headers: {
    Accept: "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*", "e_platform": "mobile",
  }
})

Certificate Pinning With react-native-pinch -

import pinch from 'react-native-pinch';

pinch.fetch('https://my-api.com/v1/endpoint', {
  method: 'post',
  headers: { customHeader: 'customValue' },
  body: '{"firstName": "Jake", "lastName": "Moxey"}',
  timeoutInterval: 10000 // timeout after 10 seconds
  sslPinning: {
    cert: 'cert-file-name', // cert file name without the .cer
    certs: ['cert-file-name-1', 'cert-file-name-2'], // optionally specify multiple certificates
  }
})
  .then(res => console.log("response -", res);)
  .catch(err => console.log("error -",err);)

4. Storage of Sensitive Data - API EndPoint / FB / Google / Firebase Keys

Never store your API EndPoint, AccessKey, Firebase, Google/FB Social Key directly into Code. Your bundle can be decoded into plaintext and all information can be extracted.

It’s recommended to use react-native-config and react-native-dot-env to place your secure key, endpoint.

Note: react-native-config module doesn’t encrypt secrets for packaging, so do not store sensitive keys in .env file.

5. Local Storage

Developer often needs to store data locally, sometime developer prefer asyncstorage to store accesskey/ access-token/ user token. But AsyncStorage is un-encrypted storage, so information can be extract from AsyncStorage.

React Native does not provide solution for secure data storage. There are pre-existing solution in iOS & Android we all know about iOS Keychain and Android Keystore.

iOS Keychain -

In iOS we use Keychain Services which allows developers to securely store sensitive information like certificates, tokens, securekeys, passwords, and any other sensitive information like secrets of open platform services which we are using in our application.

Android Keystore -
The Android Keystore allows developers to store cryptographic keys in a container to make it more difficult to extract from the device. Once keys are in the keystore, they can be used for cryptographic operations with the key material remaining non-exportable.

To use iOS Keychain & Android Secure Shared Preferences from React Native, you can use following NPM.

react-native-encrypted-storage
react-native-keychain
redux-persist-sensitive-storage

Note: redux-persist-sensitive-storage uses react-native-sensitive-info with redux-persist. react-native-sensitive-info manages all data stored in Android Shared Preferences and iOS Keychain. Android Shared Preferences are not secure, but there is a branch of react-native-sensitive-info that uses the Android key-store instead of shared preferences. You can use that branch with redux-persist-sensitive-storage if you prefer.

6. Deep Linking

Deep linking is a way to open application from other sources. Deep Link contains textual data along with Link. Like yourappname://

Let's say you have E-Commerce application and your deep link is yourappname://products/1 means it will open your app with detail of product 1.

Deep links are not secure and you should not append any sensitive information in deep link.

Security issues while dealing with deep linking -
There is no centralised method of registering URL schemes. As developer, you can use any URL scheme you choose by configuring it in Xcode for iOS or adding an intent on Android.

Malicious app can hijack your data by also using the same scheme and then obtaining access to the data your link contains. Sending something like yourappname://products/1 is not harmful, but sending tokens is a security concern.

iOS allows one single URL Scheme to be claimed by multiple apps. For instance, sample:// can be used by two completely separate apps in their implementation of URL Schemes. This is how some malicious apps can take advantage of the URL Scheme and compromise users.

Security solutions to overcome deep linking security issue -
Apple introduced Universal Links in iOS 9 as a solution to the lack of graceful fallback functionality in custom URI scheme deep links. Universal Links are standard web links that point to both a web page and a piece of content inside an app.

When a Universal Link is opened, iOS checks to see if any installed app is registered for that domain. If so, the app is launched immediately without ever loading the web page. If not, the web URL (which can be a simple redirect to the App Store) is loaded in Safari.

Setting up a universal link (HTTP or HTTPS) login interface, and musing a random identifier to authenticate the received login token locally, prevents hijacking and malicious login token replaying.

7. Android Specific Security

Let’s see how to protect our APK or app bundle from reverse engineering attacks.

Hackers can easily access our Codebase by doing reverse engineering with APK or app bundle file. To avoid it we can add Pro Guard rules. Pro Guard obfuscates your code. So if someone reverse engineer it, it’s not readable and saves you from engineering attacks. Pro Guard also used to reduces APK size by removing unused code and resources. If your project contain any third party library then you can add the Pro Guard rules of that library in your rules file.

To enable Pro Guard rule we have to enable the minifyEnabled property in app/build.gradle file.

buildTypes {
    release: {
       minifyEnabled true
    }
 }

8. iOS Specific Security

Let’s see how we can restrict the insecure domains usage in iOS. It will save us from transport layer attacks. You can restrict insecure domains by configuring some properties within your Info.plist file.

Now, let’s see what you should add in your Info.plist file for that.

From iOS 9.0 Apple has introduced NSAppTransportSecurity which you can find inside info.plist file. Inside NSAppTransportSecurity there is one key NSAllowArbitraryLoads which is set to NO by default that means you are agreed with security benefits. In some cases while you are working with localhost or with HTTP domain if required then you have to make it YES otherwise you can’t make network request with those insecure domains.

There are chances that your app might get rejected while uploading it to apple store because you set NSAllowArbitraryLoads value as YES. To overcome that you can use NSExceptionDomains by providing a list of domains inside that. Application will consider like you have agreed to all over security benefits excepts the domain those domains which you have mentioned in NSExceptionDomains (although you have set NSAllowArbitraryLoads value as YES).

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  <key>NSExceptionDomains</key>
  <dict>
    <key>localhost</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

9. Authentication Methods

Nowadays OAuth has become more popular for Authentication between one application interacting with another application. Consider a case where your application communicates with an API to send/retrieve data from the server. How do servers know the coming request is authenticated? OAuth 2.0 makes the authentication process simple for you. Instead of sharing passwords OAuth allows authentication using Token. It's an approach to use JWT Token for API Authentication.

10. Data Encryption

Crypto JS is popular Javascript library for crypto standards. To store, send data to server it's approched to Encrypt data using CrytpJS. So, it's is not redable by enable directly.

Thanks for reading Blog!

Top 10 React Tricks Every Developer Should Use

kpiteng — Sun, 04 Jul 2021 08:04:29 +0000

Discover a set of React best coding practices, tips and tricks that should be known by all developers.

Key Points -

Use State Management Library (Redux, MobX, Apollo)
Use Event Listener instead of Static Method
Remove All Listener In UnMount
Config for Environment Setup || Test || Live || Staging
Use Context for Themes management Dark || Live Theme
Use Storybook - Isolated | | Reusable Component Development
Minimize use of third-party library || Instead create own Code Logic
Scale and Resize Images || Cache Images
Firebase Performance Monitoring
Avoid re-rendering using useMemo, useCallBack

1. Use State Management Library (Redux, MobX, Apollo)

Many times we are using local variables, array, objects declarations that are specific to components but what happens the same would be used in other components then, Use State Management Library so you can access your variables, array, objects though the app, you can update and listen for change in any component.

Redux, Redux Saga, Redux Rematch, MobX State Tree, Apollo are popular state management libraries which allow developers to access State Variables through the app and it will persist your data so next time the user comes back to application data fetched from storage and assigned to state variables.

2. Use Event Listener instead of Static Method

We are on one component and we want to call one function of the previous component or any other component at that time we are using static methods in the class component. Instead of using Static Method I approach using React Native Event Listeners. You can add a listener in a component where you want to listen and emit an event from where you want to call a function. It’s very simple to integrate.

Check out react-native-event-listeners

npm install --save react-native-event-listeners
or
yarn add react-native-event-listeners

import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            data: '',
        }
    }

    componentWillMount() {
        this.listener = EventRegister.addEventListener('yourEventName', (data) => {
            this.setState({
                data,
            })
        })
    }

    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }

    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit(‘yourEventName’, ‘Task Completed!’)
        })
    ><Text>Send Event</Text></TouchableHighlight>
)

3. Remove All Listener In UnMount

We are adding listeners to listen events like KeyboardListeners, EventListeners, NavigationEventListeners, TabEventListeners etc. When you add listeners on componentWillMount it will create listeners for you, but if you forget to remove it on componentWillUnMount then next-time when you back to component again it will create another listener object which conflicts with memory leaks and unexpected listeners behaviour. So best is to remove listeners in componentWillUnMount to it will free out memory and provide you un-interrupted behaviour.

Related Article - See how React Clean Architecture helps to write Clean, Structured, Modularized and Best Coding Practices for Rect Developers.

4. Config for Environment Setup || Test || Live || Staging

We are all using different environments like Test, Staging, Production/Live environment. There are different API URLs, Constant Variables, Keys, etc depending on Environment. So It’s recommended to use react-native-config to setup your configuration for Test, Stage and Live environment. Please follow steps provided in react-native-config and manage your environment.

5. Use Context for Themes management Dark || Live Theme

Nowadays we are used to Light & Dark themes, developers also developing applications that support both Light & Dark Themes. But being developers how we manage Styles, how to add/manage listeners. It’s recommended to manage themes using React Context API, you can set up Context in App.js and add Themes Listener in App.js so whenever a user changes theme App.js get notified and themes will be changed and all the components will be notified. So you can provide instant themes that change the effect to your users.

6. Use Storybook - Isolated || Reusable Component Development

Almost every application has components like TextInput, Button, etc that are used at various components. Instead of doing separate code for each component it’s recommended to create a common component and use it in Components, advantage of doing this you can manage it from one place and it will reflect your changes in the whole application.

What happens if I say show me the component you developed and change it’s property dynamically like color, etc, you need to import/implement it in one component and run the application, correct? Is there any way I can see all Reusable Components in one place, I can play with it, change various props and validate it.

Storybook will provide an interface where you see all your developed ReUsable components at one place. For that you simply create Story and improve your component into your Story. So the Storybook will render all the stories. It’s very simple to integrate. Please check out the Storybook article for more detail.

7. Minimize use of third-party library || Instead create own Code Logic

We are using too many third-party library, NPMs in our application for Small - Small tasks. Problem is whenever iOS, Android, React Native version upgrade we forget to upgrade our library, NPMs which break our application, Even we are not sure, Creator of Library, NPMs have updated with latest standard & security which cause break in our application.

Instead of using Third-Party Library, NPMs for Small-Small cases, it’s recommended to create your own code solution and so you can manage it, update it easily.

8. Scale and Resize Images || Cache Images

Image optimization is very important in React Native App Performance. If you have an E-Commerce kind application or Application where there is maximum Image Rendering and images are not optimized then it will consume more user’s memory which causes application crashes.
It’s recommend to do following -

Use PNG image instead of JPG
Use small resolution images
Use the latest WEBP format for Image - which helps to reduce binary size of iOS and Android.

Cache Images -
While having an ECommerce Or Heavy Image Showcase kind application it’s recommended to use Image Caching to show images faster without flickering. Prefer to use React Native Fast Image which works perfectly for both iOS & Android.

9. Firebase Performance Monitoring

Firebase Performance Monitoring helps developers to identify where and when performance can be improved, so that you can fix those performance issues and give consistent experience to users. It allows you to track HTTP Request Performance Traces, also you can do custom tracing according to your business needs.

It’s simple in integration and you will get a dashboard with reports. That's simple.

Related Article - How to improve the performance of a React Native App?

10. Avoid re-rendering using useMemo, useCallBack

Almost all applications have FlatList along with other components like Button, TextInput. FlatList reload FlatListItem on first time render, also whenever any of the state variables changes FlatList will reload again with It’s FlatListItem. These are unwanted re-rendering, actually nothing changed on FlatList Item. To avoid these re-rendering use useMemo hooks that will first check any of the props changed then only it will reload FlatListItem.

Related Article - Step By Step Integration Of React Hooks - useState, useEffect, useRef, useMemo, useCallback.

Thanks for reading Blog!

How to improve the performance of a React Native App?

kpiteng — Mon, 28 Jun 2021 03:13:21 +0000

See how you will boost your react native app performance, improve start-up time, decrease bundle size & memory usage.

Key Points -

Hermes
Avoid re-rendering using useMemo
Cache Images
Use nativeDriver with Animated Library
State Management With Redux/MobX/Apollo
Remove Console Log
Optimize Android App Size

1. Hermes

Hermes is an open-source JavaScript engine optimized for React Native. Hermes integration helps to improve start-up time, decreased memory usage, and smaller app size.

With Hermes your app will start at 2x speed, memory usage will decrease to 30%, android app bundle size decreased 30%, iOS Application performance will boost.

Let’s see how to integrate Hermes. Hermes supports iOS support after the 0.64 version. So make sure you upgrade your app using React Native Upgrade Helper.

Enabling Hermes -

Android -
Add following code line In android/app/build.gradle

project.ext.react = [
  entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
]

If you're using ProGuard, add following rules in proguard-rules.pro :

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

Clean the build

cd android && ./gradlew clean

iOS -
Edit ios/Podfile file with below code lines -

use_react_native!(
  :path => config[:reactNativePath],
  # to enable hermes on iOS, change false to true and then install pods
-    :hermes_enabled => false
+    :hermes_enabled => true
)

Install the Hermes pod

cd ios && pod install

That’s it, Now create your iOS & Android build and see application start-up speed, memory usage, and specially bundle size.

2. Avoid re-rendering using useMemo

useMemo hooks helps developers to avoid re-rendering of child components to improve the performance of react application. useMemo is used to handle memoization, meaning if any component receives the same props more than once, it will use previously cached props and render the JSX view and return component.

In the sample below I have taken FlatList and Button. First time Flatlist renders perfectly. Now when user pressed button new setCount will update state variable and whole component getting reloaded with FlatList even no values updated in Array. To avoid this I have wrapped FlatListItem (UseMemoListItem) with useMemo, so useMemo checks if any change in props then only it will render the JSX else it will return render & return the view previous props.

const technology = [
  { name: 'React Native' },
  { name: 'React.js' },
  { name: 'Next.js' },
 ];
 const [arrTechnology, setArrTechnology] = useState(technology);
 const [count, setCount] = useState(0);

 function UseMemoListItem({item, onChange, arrTechnology}) {
  return useMemo(() => {
    return (
      <View style={Styles.container}>
        <Text>{item.name}</Text>
      </View>
    );
  }, [item.status]);
 }

  return (
    <View style={Styles.container}>
      <Button title='Increment' onPress={() => setCount(count + 1)} />
      <FlatList
        data={arrTechnology}
        keyExtractor={(item) => String(item.name)}
        renderItem={({item, index}) => (
          <UseMemoListItem
            item={item}
          />
        )}
        ItemSeparatorComponent={() => <UseMemoListItemSeprator />}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );

3. Cache Images

React Native Image component allow developers to display Images in application, still there is few issues like -

Rendering number of Image (Product List - ECommerce Application)
Low performance in Caching Image Loading
Image flickering

To solve this issue React Native support in-build caching for iOS by enabling following lines of code.

<Image
  source={{
    uri: 'https://example.com/image.png',
    cache: 'only-if-cached'
  }}
  style={{ width: 400, height: 400 }}
/>

But, what to do for Android, there is a popular third-party library named - react-native-fast-image which will work perfect for iOS & Android. Using Fast Image you can give quick image rendering, caching mechanism and many more to application users.

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://yourimageurl.com/image.png',
            headers: { Authorization: 'token' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

4. Use nativeDriver with Animated Library

We are using animations in our Application, but sometimes it will not run smoothly as expected which impacts application render performance. To avoid flicker and run smooth animation, useNativeDriver which send animation to native bridge before animation start on component. This helps animations to be executed on separate javascript instance, which resulting in smoother animation.

It’s very simple to integration - useNativeDriver: true

Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // <-- Add this
}).start();

5. State Management With Redux/MobX/Apollo

Many times it is required to manage data locally means caching data which shows immediately to the user without interruption whenever the user comes back to the application. We are using AsyncStorage, Local Database Storage to store data and when the user comes back next time/ open application next time we are fetching data and keeping it in Global variables to access anywhere in the application.

To manage this in various screens and storing data into various arrays, object Prefer popular State Management Library like Redux, Redux Rematch, MobX and Apollo. These library will storage | mange | retrieve data for you and you can easily access throughout the app without any interruption.

6. Remove Console Log

All we are using console.log('Hello KPITENG!') to debug applications. While deploying an application if we keep console.log() then it will create performance issues due to javascript thread.

To remove console.log in Production, following simple installation and setup.

npm install babel-plugin-transform-remove-console

Now, modify the .babelrc file to remove the console statements, as shown below:

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

7. Optimize Android App Size

React Native Android apps contain -

Resources such as images, fonts, etc.
Four different binaries compiled for different CPU architectures
Javascript bundle with business logic
Other in-built files

While you are building an app this will combine all these and create a binary for you. To optimize binary size Android build in React Native by adding below line

Update following line in android/app/build.gradle

def enableProguardInReleaseBuilds = true

If you want to extract four different binary according your CPU architecture then,

def enableSeparateBuildPerCPUArchitecture = true

Thanks for reading Blog!

Axios vs Fetch

kpiteng — Tue, 22 Jun 2021 16:48:43 +0000

Hello Developers! All we are using either Axios OR fetch to communicate/exchange data with server. Both works perfect as per your requirement. Today we will go in detail and see how they are differ in terms of features they provide.

1. Request URL

Axios — has url in request object

axios
  .get(url, {
    headers: {
      'Content-Type': 'application/json',
    },
    timeout: 1000 * 60,
  })
  .then(res => {

  })
  .catch(err => {

  })

Fetch — has no url in request object.

 fetch(url)
  .then((response) => response.json())
  .then((json) => {  

  })
  .catch(() => {

  })

2. Package

Axios — third-party package that you need to install manually. 85.3k Star in Github — Well managed & rich features library.
npm i axios
Fetch — is in-build into most of the browser, no more need of installation.

3. CSRF Protection

Axios — having in-build support of CSRF (Cross site request forgery) to prevent cross-site request.
Fetch — doesn’t support CSRF

4. Request Data

Axios — request data contain object, you can directly sent JSON Object in request data

axios
  .post(url, jsonObject, {
    headers: {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then((res) => {
    if (res) {
      return res.data;
    }
  })
  .catch((err) => {
    return err;
  });

Fetch — request data should stringify

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(jsonObject),
})
.then((response) => response.json())

.then((json) => {

})
.catch(() => {

});

If you want to start New React Project — Check out React Clean Architecture

5. Response Parsing

Axios — in-built transform response to JSON for
developers

axios
  .post(url, jsonObject, {
    headers: {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then(res => {
    if (res) {
      return res.data; // Directly get JSON in Step - 1 Only - Managed by Axios
    }
  })
  .catch(err => {
    return err;
  })

fetch — has two step process, first response convert to json and then in second process developer will get json response

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(jsonObject)
}).then((response) => response.json()) // Response Convert To JSON in this Step - 1
  .then((json) => {
    // Get JSON Object Here in Step - 2
  })
  .catch(() => {


  })

6. Cancel Request

Axios — In case user left the screen/component, axios allow developers to Cancel request

const cancelTokenSource = axios.CancelToken.source();

 axios.get('/listing/1', {
  cancelToken: cancelTokenSource.token
 });

 // Cancel request
 cancelTokenSource.cancel();
 Fetch - doesn’t support Cancel API request

Fetch — doesn’t support Cancel API request

7. Request Interceptor

Axios — having in-build feature of intercept HTTP Request
Fetch — Doesn’t provide a way to intercept http requests.

8. Upload/Download Request Progress

Axios — Support developers to provide data transmission progress so developers can show loading indicator while user communicating with server
Fetch — Doesn’t support Upload/Download progress

9. Browser Support

Axios — have side browser capability support
Fetch — only support limited browsers & version , like Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1.

Thanks for reading Blog!