Posts in "React Native"

React Native

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

January 29, 2021 0 Comment Saad Ibrahim read

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

https://github.com/saadibrahim/react-native-deep-links

Useful Links

React Native ReactJS

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

September 15, 2020 0 Comment Saad Ibrahim read

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

https://github.com/saadibrahim/universal-react-app

Useful Links

Screenshot

React Native ReactJS

6 super useful libraries for React and React Native

May 27, 2020 0 Comment Saad Ibrahim read

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

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

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

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) {
         case RECEIVE_PRODUCTS:
             return {
                 …state,
                 …action.products.reduce((obj, product) => {
                     obj[product.id] = product
                     return obj
                 }, {})
             }
         default:
             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.id] = product
             })
     }
 })

No more spread operator hell!

react-i18next

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!

React Native

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

May 27, 2020 0 Comment Saad Ibrahim read

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

https://github.com/saadibrahim/react-native-rtl-tutorial

Useful Links

Screenshots

React Native

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

July 20, 2017 0 Comment Saad Ibrahim read

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 local.properties 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.

BUILD FAILED

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:
https://facebook.github.io/react-native/docs/android-setup.html

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 local.properties
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.

React Native

5 very useful open source React Native components

July 18, 2017 0 Comment Saad Ibrahim read

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.

https://github.com/airbnb/react-native-maps/

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!

https://github.com/leecade/react-native-swiper

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.

https://github.com/react-native-community/react-native-blur

React Native Linear Gradient

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

https://github.com/react-native-community/react-native-linear-gradient

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.

https://github.com/magicismight/react-native-lazyload

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.

https://github.com/oblador/react-native-vector-icons

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

React Native

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

July 16, 2017 0 Comment Saad Ibrahim read

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.

BUILD FAILED

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:
https://facebook.github.io/react-native/docs/android-setup.html

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!