Posts in "ReactJS"

How to share code between React and React Native app using React Native Web and Yarn Workspaces

When I started at my current company we had to release an MVP for iOS, Android and Web in under three months. For iOS and Android ofcourse we went with React Native and in order to move fast I decided for the web app I will use React and share as much code as possible between the two using a monorepo system.

I decided to use react-native-web which allowed us to share UI code between the two as well and subsequently share more than 90% of the code. This approach allowed us to save a lot of development time which would be spent on coding a separate web app.

I will show you in this tutorial how you can do that.

Project Files

Useful Links


6 super useful libraries for React and React Native

I have been working with React and React Native for more than 4 years now and today I am going to share with you some great libraries that I find myself using again and again in my projects. Here they are:


Reselect is a simple “selector” library for Redux allowing you to create memoized selectors, from their description:

  • Selectors can compute derived data, allowing Redux to store the minimal possible state.
  • Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
  • Selectors are composable. They can be used as input to other selectors.


Apisauce is basically a wrapper over Axios, it adds standardized errors and request/response transforms to the API response. It also allows you to add monitors that you can use to record values, measure performance of API calls, perform logging, etc.

I personally use monitors for printing API responses to console in development and log/monitor our API failures.

It also allows you to add request transforms, which you can use to add user language in the headers of each API call for example.


Immer makes it easy to write reducers and makes it easy to work with immutable state, from their documentation:

Using Immer is like having a personal assistant; he takes a letter (the current state) and gives you a copy (draft) to jot changes onto. Once you are done, the assistant will take your draft and produce the real immutable, final letter for you (the next state).

Before Immer:

const byId = (state, action) => {
switch (action.type) {
return {
…action.products.reduce((obj, product) => {
obj[] = product
return obj
}, {})
return state

After Immer your code simply becomes:

import produce from "immer"

const byId = produce((draft, action) => {
     switch (action.type) {
         case RECEIVE_PRODUCTS:
             action.products.forEach(product => {
                 draft[] = product

No more spread operator hell!


react-i18next is, in my opinion, the best i18n library for React, which is a React wrapper for i18n, you can use it with both React and React Native, and it’s very powerful, it has everything you would need for having a multi-language app including functionalities like plurals, formatting, interpolation.

Redux persist

Redux persist basically allows you to save i.e persist your redux state to the device local storage so you can make sure the user retains their logged-in state and data between sessions.

While you could implement your own solution, Redux persist just handles a bunch of things out of the box, it warns you if the older data on the device doesn’t match with your new state after an upgrade, gives you helpers to migrate state if you have made massive changes to your state in a version upgrade, it allows you to select what to persist, how to merge the old state from the device and your application, what storage engine to use i.e async storage in react native and local storage in react js, etc. its really powerful.

React Hook Form

React Hook Form is the best form library for ReactJS, it helps you handle form validation among other things and it is really fast! it’s easy to use, works with both React JS and React Native and has a form builder that makes it easy to generate forms. It comes with really good documentation as well.

Styled Components

styled-components is my go-to library for handling styles in my react apps, I enjoy working with it because it allows me to write actual CSS in JS including things like media queries, do nesting, and a lot more things, it’s awesome and really powerful, and also works with React Native.

Are there any libraries that you like to use in your projects often, please comment below!

How to serve your React App’s JS and CSS files from a CDN

If you are looking on how to serve your React App that is bootstrapped with create-react-app from a CDN for better performance, I will show you how.

After creating a build, if you check the index.html file inside your build folder you will see that that its referencing all the assets from the static folder:

<script src="/static/js/main.560a2161.chunk.js"></script>

Now let’s add an environment variable which will make our app use our CDN url as the base URL, there are couple of ways to do so.

Either you can create an .env file in your project root and add a PUBLIC_URL property to it, like this:


Or you can set the PUBLIC_URL when building the project, in this manner:

PUBLIC_URL= yarn build

Now when run the build and check the generated index.html inside the build folder, you will see that it has automatically updated to reference the assets from your CDN url:

<script src=""></script>

You can now host the static folder on your CDN and your assets will be loaded from there.

Hope you found this tip helpful.