Posts by "Saad Ibrahim"

Implement deep linking in React Native apps using Universal links and URL schema

Implementing deep linking is an important part of building an app with a good user experience, it can allow you to launch your app from other apps, open links in the app instead of browser for a better experience, etc.

There are two ways to implement deep linking, one is called “Universal links” in iOS or “App links” in Android, and the other type is called URL schema. Based on your use case you can choose to implement both or one of them, you can find the difference between the two here.

In this video tutorial, I will show you how to implement deep linking in both iOS and Android using both methods.

Project Files

Useful Links

7 awesome Visual Studio Code extensions to supercharge your React & React Native development

Visual Studio Code is the editor of choice for a lot of React & React Native developers including me, deservingly so, it’s an amazing editor with a great ecosystem of extensions. Here are some of the extensions I personally use and recommend:

Live Share

The first one is live share, this is very useful when working remotely, it allows you and your teammates to collaborate and code at the same time, this is really useful for that pesky bugs that you can’t wrap your head around. as they say, two heads are better than one!

Animated gif of 2 people highlighting editing code in real-time together.

Extension link

File Utils

File Utils is pretty simple, it provides a much better way to work with files, you can easily create, duplicate, move, rename, delete files and directories.


Extension link


Gitlens adds a lot of Git capabilities to visual studio code, including my favorite git blame, which tells you who edited a piece of code last time so you can ask them for more context if needed or blame them for any mess-ups 😉 it also allows you to seamlessly navigate and explore Git repositories, adds powerful comparison commands, and so much more.

If you just want the git blame functionality, check out the appropriately titled Git Blame.

Current Line Blame

Extension link

Color Highlight

Color Highlight gives you a preview of any color written in your code, for example, if you write #FF0000, it will highlight that text in red color. It’s pretty nifty and works with React Native styles too in addition to CSS, SASS, etc.

Extension link

Code Spell Checker

This one does what it says, checks your code for spelling errors, it even supports camelCase. it adds a little more polish to your code and helps you avoid silly mistakes due to wrong variable names.


Extension link

Markdown Preview Enhanced

Very useful to write readmes for GitHub and for writing documentation, shows a preview for your markdown on the right. way better than browser-based online tools


Extension link

Bracket Pair Colorizer

This is pretty nifty as well, it basically makes it easy to differentiate between different blocks of code by changing the color of each pair of opening and closing brackets.


Extension link

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!

Add internationalization and right to left layout support to your React Native app using react-i18next

Internationalization is an important part of an app especially if you are targeting multiple countries or countries that speak multiple languages.

Here’s video a tutorial I have made that shows you how to add react-i18next to your react native app to add translations, how to switch the language, and most importantly how to handle Right to Left layouts for languages like Arabic, Urdu, Farsi, Hebrew, etc.

Project Files

Useful Links



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.

Tips for people working from home during the lockdown

With COVID 19 wreaking havoc on the social order, a lot more people are working from home. While not having to commute to work and working in your PJs may sound great, it is not always easy.

As someone who has worked remotely for a significant chunk of my career, it took me a lot of trial and error to get good at it. Below are some tips that help me stay productive, and avoid burnout, while working from home.

Have a routine

It is tempting to wake up and start working from bed (Trust me, I know), but it is very important to maintain a good routine. Get out of bed, shower, get dressed (even if it is your PJs) and have a healthy breakfast before you start your work day.

It is ideal to have consistent set of hours to work. Its best to follow your regular 9-5, even if your company doesn’t require it and make sure you take a midday break for lunch so it keeps you fresh and motivated for the rest of the day.

Do not let your work spill over to the next day, especially over to weekends even if your company allows it. That’s an easy way to feel like you never get a break, and get burnt out.

Know when to switch it off

It is easy to get carried away and keep working beyond your usual hours, especially if you are stuck at a problem, but it’s important to remember to switch off.

You are less likely to fix the issue at hand because you are already drained, and if you keep working late, you won’t be fresh the next day. Instead, stop working when your hours are up, have a relaxing evening and come back at it fresh the next morning.

Block distractions

Try to minimize distractions as much as possible. For digital distractions, I use a Google Chrome extension called block site, which basically does what it says. You can define a list of websites that you want to block while working e.g Youtube, Reddit, Facebook, etc, and it will not let you open those sites.

On the other hand, eliminating offline distractions is a bit more difficult, but not impossible. While having a separate office in your house is not always possible, I recommend keeping your desk in an isolated area in the house, away from everyone.

Using noise isolating headphones is an easy way to block out sounds or voices of family members talking so you don’t get distracted by them. There have been studies that prove that if you hear someone you know talking, you are more likely to get distracted.

Get Comfortable, but not too comfortable

Being comfortable is important, but there is a difference between being comfortable enough to work, and comfortable enough to fall asleep. Make sure it’s not the latter. Have a nice, ergonomic desk and a chair with great back support, and avoid working from your bed at all costs, that is a recipe for disaster and can also affect your sleep pattern.

Stay organized

Create a to-do list for your tasks, apart from your project management software, to breakdown the task into smaller chunks. It helps you stay focused, and it’s very satisfying to tick off the boxes as you get done with things.

Additionally, you can use something like Pomodoro timer to help boost your productivity.

And for the sake of your sanity, keep a clean desk. It’s easy to get messy because no one is watching.

Communicate more

At an office, communicating is easy because you can do it face to face, that is why having good communication skills become even more important when you’re working remotely. My favorite tool to stay in touch with my team is Slack. Use it when you have complex questions that can not be answered through text. I encourage calls among my team, even if it is a 5 minute quick call. A 5 minute call can be way more effective than typing for half an hour.

I hope these tips are helpful. Feel free to share tips that work for you in the comments, I’d love to read them!

Stay safe!

How to fix SDK location not found error when running “react-native run-android”

Welcome to “Troubleshooting React Native” series. I am writing this series for React Native beginners to provide simple solutions to common frustrating problems. With React Native you dont just have to deal with Javascript errors but also errors related to native Android and iOS build tools.

The error I am showing you now can be a real bummer since it is one of the first errors you might face when trying to setup React Native for Android development. The error usually says the following:

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.


Total time: 8.082 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have set up your Android development environment:

This one is pretty easy to solve, but it can be intimidating to see an error like this when you are just starting out.

The error that we see here is that React Native CLI isn’t able to locate the Android SDK, so we have to just tell it where to find it. To do that you need to do the following steps:

  • Open your React Native app directory.
  • Navigate to your-app/android/
  • Create a simple text file and call it
  • Add the following code to this file (Don’t forget to replace “your-username” with your actual username.):
sdk.dir = /Users/your-username/Library/Android/sdk
  • That’s it! run “react-native run-android” command again or use Android Studio to run the project.

I am hoping this helps someone out there just starting out with React Native. Watch this space for more articles like this one.

5 very useful open source React Native components

One of the best things about React Native is that it’s not even that old yet it has so many open source components and libraries you can use in your projects, here are 5 of the most useful ones that I have used in my projects and found very useful:

Airbnb React Native Maps

When I started using Airbnb maps for my project it was the only complete maps library for React Native out there, made by none other than Airbnb for thier own React Native app. Later on React Native team decided to make it the official map solution for React Native and I agree with thier decision. It’s a pretty awesome and robust solution to your mapping needs, I have used it for a directory app with great success and found it to be very performant as well.

React Native Swiper

This is probably one of the most commonly used one in my apps. You can use it create photo galleries and app intros. Simple and performant!

React Native Blur

Blur effects are a big part of iOS design language so it makes sense that you would want to use them in your Apps as well, this component allows you to implement blur effect in your apps with ease.

React Native Linear Gradient

Another component to help you make your app look pretty. Quite simple, does what it says.

React Native Lazy Load

This component can be really important for user experience if you have many images in a single view, you don’t want to load a lot of images at once especially on a mobile phones with limited and/or slow data packages. Apart from images it also allows you to lazy load views. I recently worked on a project where we had to make an API request only when the user had scrolled to the component, I ended up using an invisible Lazy Load view component to trigger the API request.

React Native Vector Icons

This is one of the best libraries out there. you can use it to add font icons to your projects easily, it comes pre bundled with some of the free ones like FontAwesome but you can also generate icons from custom font icons downloaded from places such as FlatIcon, very handy.

Hopefully some of you find these useful. I plan on making more such posts in the future so watch this space.

How to fix SDK build tools revision too low error when running “react-native run-android” command

Welcome to “Troubleshooting React Native” series. I am writing this series for React Native beginners to provide simple solutions to common frustrating problems. With React Native you dont just have to deal with Javascript errors but also errors related to native Android and iOS build tools.

In early days of developing with React Native, one of the problems you could face is get an error when you try to link a third party library with your React Native App, which is a very common thing to do. For example Facebook SDK (which powers Facebook Login and Facebook Analytics among other things). Sometimes it will occur when you are trying to compile an existing app. Here’s what the error says:

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ‘:app’.
> Could not resolve all dependencies for configuration ‘:app:_debugApk’.
> A problem occurred configuring project ‘:react-native-fbsdk’.
> The SDK Build Tools revision (23.0.1) is too low for project ‘:react-native-fbsdk’. Minimum required is 25.0.0

* Try:
Run with — stacktrace option to get the stack trace. Run with — info or — debug option to get more log output.


Total time: 2.113 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have set up your Android development environment:

Fortunately it’s a very simple fix, you just have to follow these steps:

  • Open Android Studio.
  • Go to File -> Open
  • Navigate to your-react-native-project/android, select it and click open.
  • Once it has analyzed your app it should show you error(s) on the bottom:
  • Click on “Update Build Tools version and sync project” underneath each error.
  • That’s it, you can run the app from Android Studio by clicking on the play icon or execute the “react-native run-android” command again from terminal. However before you do that make sure you have an emulator running or a phone connected as it won’t automatically launch an emulator instance.

You might see the same error when trying to link other libraries as well, and is not limited to react-native-fbsdk. However the procedure to fix it remains the same.

Hope this helps someone just starting out, if you are having any other issues let me know in the comments and I will help you figure it out!