Concepts of React Native

Image for post
Image for post

📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

What

  • React Native is the future of mobile development. It’s a technology using which we can make CROSS-PLATFORM native apps, using single code base easing development process and maintainability.
  • React Native, being open source comes with the benefit of inspecting the code.
  • React Native comes with the feature of Hot Reloading.
  • Offers out of the box focus on UI and access to Native API.
  • React Native lets you create truly native apps and doesn’t compromise your users’ experiences.
  • With React Native, one team can maintain two platforms and share a common technology — React.

Why

  • If you need to develop an app for both iOS and Android, React Native is the best tool out there. It can reduce the codebase by about 95%, saving you time and money. On top of that, React Native has a number of open-source libraries of pre-built components which can help you further speed up the development process.
  • It’s also much faster and cheaper to build apps in React Native as opposed to building native ones, without the need to compromise on quality and functionality.

◉ Web Apps, Native Apps, Hybrid Apps, PWAs

A web app works via a web browser on the smartphone but requires either a cell signal or wi-fi to function.

A native mobile app is one that is installed directly on the smartphone and can work, in most cases, with no internet connectivity depending on the nature of the app. It is a smartphone application developed specifically for a mobile operating system (think Objective-C or Swift for iOS vs. Java for Android).

The native app can work much faster by harnessing the power of the processor and can access specific hardware like GPS.

Hybrid applications are, at core, websites packaged into a native wrapper.

PWAs can do most things native apps can and many native apps could easily be replaced by a PWA. … Android has significantly better support for PWAs and is developing rapidly, while support on iOS is limited and inconsistent.

  • React Native (from Facebook) => give close to real Native App as when developed in Java along with cotlina.
  • Flutter (from Google) => competitor of React Native from Google.
  • Cordova => gives Hybrid App.
  • Ionic => gave Hybrid App. Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web with a single code base. And with Ionic’s Platform Continuity, your app looks and feels at home on every device.

Summary

Native and hybrid apps are installed in an app store, whereas web apps are mobile-optimized webpages that look like an app. Both hybrid and web apps render HTML web pages, but hybrid apps use app-embedded browsers to do that.

Image for post
Image for post
WebApps vs Native Apps vs Hybrid Apps

◉ expo-cli vs react-native cli

npm install -g expo-cli@3.5.0 # if current version is giving problems with earlier node versions on your system.expo — versionexpo init helloworld

◉ Difference between React JS and React-Native

🔘 Setup and bundling

  • React-Native is a framework, where ReactJS is a javascript library you can use for your website.
  • When you start a new project with ReactJS, you probably will choose a bundler like Webpack and try to figure out which bundling modules you need for your project. React-Native comes with everything you need and you most likely wouldn’t need more. When you start a new project you will notice how easy is it to set up: it’s very fast and only takes you one command line to run in the terminal and you will be ready to go. You can start coding your first native app immediately using ES6, some ES7 features and even a few polyfills.
  • To run your app, you will need to have Xcode (for iOS, on Mac only) or Android Studio (for Android) installed on your computer. You can either decide to run it on a simulator/emulator of the platform you want to use or directly on your own devices.

🔘 DOM and Styling

  • React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way. Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app.
  • Most components provided can be translated to something similar in HTML, where for example a View component is similar to a div tag, and a Text component is similar to a p tag.
  • Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with ReactJS that renders any kind of HTML, SVG or Canvas. Although you might find alternative libraries for React-Native, react.parts has a Native category for you to find what you need.
  • To style your React-Native components, you will have to create stylesheets in Javascript. It looks similar to CSS, but it’s not exactly the same. This can be quite confusing at first, and you might reach a point where you wonder how you can create mixins like you would do with SASS, or how you can override the style of a component you want to reuse.

Then you understand React-Native is not made from web elements and can’t be styled in the same way. Fortunately, you will most likely find alternative solutions available in order to accomplish what you need.

🔘 Publishing

If you develop an app for both iOS and Android, you will need to learn how Xcode and Android Studio work in order to make sure everything is set up properly before the first deployment of your app on the App Store or the Google Play. For iOS, it works just like you will deploy a regular native app, although for Android, you will need to follow the React recommendation to sign your APK before uploading it to the Google Play.

If you miss the ability to simply type a single command line to publish an update of your native app like you would do it with a web app and a VCS properly setup, you can use the awesome Code Push to deploy code directly to the user, without the need of archiving, sending your app to the store and waiting for it to be ready. Code Push is great if you want to make a few improvements or bug fixes but is not recommended if you want to add entirely new features.

🔘 Animations and Gestures

Goodbye CSS animations! With React-Native, you’ll have to learn a completely new way to animate the different components of your app with Javascript. The recommended way to animate a component is to use the Animated API provided by React-Native. You can compare it to the famous Javascript library Velocity.js. It allows to create different kind of animations, timed or based on a velocity associated to a gesture, and can be used with different types of Easing. Overall you can do pretty much any kind of animation you would do on the web. React-Native also provides LayoutAnimation which is actually very cool and simple to use for transitions but only works for iOS at this point, as Android doesn’t support it very well.

To interact with user gestures, React-Native provides something similar to the Javascript touch events web API called the PanResponder. Getting it up and running can feel discouraging, but you will see it’s finally not that complicated. The PanResponder needs to be applied to a View (or Text or Image) of your component to enable the touch handler on this View. From there, the PanResponder provides a list of functions you can use to catch the different touch events, such as onPanResponderGrant (touchstart), onPanResponderMove (touchmove) or onPanResponderRelease (touchend). Those functions will give you access to the native event and the gesture state with information like all the touches and their locations as well as accumulated distance, velocity and the touch origin.

Image for post
Image for post
react-native-swipeout component using PanResponder

In my opinion, the main difficulty with the PanResponder comes when you have nested views/components with their own PanResponder, and you need to decide which one must be granted the control of the gesture. To learn more about Animated and the PanResponder, this article can be very helpful: React-native Animated API with PanResponder

🔘 Navigation

When I started to build my first mobile app with React-Native, I was wondering how to navigate between 2 scenes. The first thing that I’ve done was to search for an alternative to react-router, this famous library that most React web apps uses to transition between pages. I found a few libraries that do similar jobs, but there was always something I didn’t like about the ones I tried: either it was quite complicated to use, I wasn’t satisfied with the animations, wasn’t customizable the way I wanted it to be, or wasn’t behaving or working properly on both Android and iOS devices. Then I started wondering how navigation actually works, and I found the Navigator component provided by React-Native. I should have started from there, looking for an alternative of react-router was in my opinion not the best idea.

Image for post
Image for post
Transitions between scenes with Navigator

Most mobile apps don’t have plenty of scenes going in every direction like would do a web app, the Navigator component even though it might seem a bit complicated to use at first will provide you everything you need to manage the transition between scenes. Unless you build a very large scale mobile app that requires lots of different scenes and you are afraid to get lost at some point, I think you should stick with Navigator. You can also have a look to NavigatorExperimental, but in my opinion, it’s not ready yet to be used for production.

🔘 Platform specific code

Designing an app for multiple platforms with the same set of code can sometimes be a bit overwhelming and your code will start soon to look ugly. I’m sure you’ve been involved in similar issues while coding for modern browsers and the need to make things look “not too bad” on older browsers, adding a few sets of conditional code here and there in your CSS or even in Javascript.

When you build a Native app, it’s important to know the user interface and experience for iOS and Android might need to be different. This article explains it very well: Designing for both Android and iOS.

On the assumption you have the control over how your app will look like and behave, you have two choices:

  • You can define a universal design for your app to look exactly the same for both platforms as long as it stays intuitive and doesn’t confuse either platform users.
  • You can define sets of code for each platform, meaning you will have a different DOM, stylesheets and even maybe different logic and animations in order to follow the UI and UX guideline of the platform.

If you decide to go with the second point, React-Native can detect which platform you are running the code from and load the right code for the right platform. I would recommend you to have the main logic of your components defined in one file called index.js, then you’ll have the presentational components defined with individual files. For iOS and Android, you will have respectively index.ios.js and index.android.js files.

If you organize your folder structure following my recommendation, it will look like this:

/src
/components
/Button
/components
/Icon
/index.android.js
/index.ios.js
/Content
/index.android.js
/index.ios.js
/index.js

If you feel like having 2 different files is too much overhead for very minimal changes you can use the Platform module with a conditional statement.

Traditional web development vs React Native

Things that make React Native awesome and different from traditional web development.

1. There’s no HTML (or DOM) in react Native

Due to the lack of DOM, React Native doesn’t use tags like: div, section, span, input, etc. But don’t worry, almost every HTML tag has an equivalent React Native component, so we are able to use the same mindset of the web to develop with React Native components View, Text, TextInput, etc.

Image for post
Image for post

2. There’s no CSS

Due to the lack of markup, there’s no CSS in React Native. But don’t panic, we can style our app using almost the same mindset of traditional CSS.

Eg. marginBottom: 15

Important: React Native enforce us to use Flexbox layouts by default. So we don’t need to use float and display to build our layout structure.

Image for post
Image for post

3. You can’t run your web components on your mobile app

In my mind, if I had a style guide full of ReactJS web components, I would be able to use it inside React Native. Sharing components from web application to mobile app. But I was wrong… again!

The component based structure in React Native is different from the web.

Specially because mobile devices DON’T have DOM and don’t share the same markup language of the web.

So, we are not able to render web components in mobile devices, because we use React Native instead of ReactDOM.

4. It’s a real app!

As we know, React Native is a JavaScript based lib. Because of that, some people may think it’s a Hybrid application using WebView(like Cordova) or even a Progressive Web App.

Believe it or not, we can develop a native mobile app in JavaScript using React Native. These apps will run on mobile devices with native performance, all its features and no WebViews.There’s nothing to fear about React Native!

5. It’s not transpiled

When I first heard about React Native, I thought it would be an mobile application written in JavaScript, but transpiled to Native code. I can’t remember why I thought that, but I wasn’t the only one. Since I started working with React Native, people started asking me the same thing.

React Native Architecture

React Native has real JavaScript running inside your smartphone.

React Native is JavaScript code running on mobile devices for real. It uses the JavaScriptCore to run the code in a separated thread, in parallel with the Main Thread(Objective-C, Java, etc) and the Shadow Queue, the layout thread.

Image for post
Image for post

Read more about React Native architecture here.

Handling API in React Native

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message or check the weather on your phone, you’re using an API.

fetch is a fantastic networking API that was made for React Native, but because it is relatively new, there are a few things to be aware of when using it.

Promise: a Promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value, or reason for failure, will materialize. It will either give you a response or an error, i.e. rejection.

Lifecycle method in React Native

There are several lifecycle methods to React Native. We’ll use three of these lifecycle methods in this article; constructor, componentDidMount and Render.

Integrating an API in React Native

In React Native, we can use the .fetch() to suit our needs. You can simply call the URL through Fetch, and make requests to the server as needed.

🔘 Fetching data from an API for listing using .fetch()

We will now use the componentDidMount method, as I want the API to be called at the beginning of the app.

As an URL, I am using a dummy API, which you can easily find by Googling.

I used .fetch() to call the URL, and it then returned a Promise with then and catch. It’s similar to try and catch.

Once you are finished with the coding part, here’s how the screen will look to you.

Image for post
Image for post

🔘 Managing API Requests in React Native Using Axios

Axios is a promise-based HTTP client that works in the browser and in a node.js environment. It provides a single API for dealing with XMLHttpRequests and node’s HTTP interface. Besides that, it wraps the requests using a polyfill for ES6 new promise syntax. We can also intercept and cancel requests, and there’s built-in client-side protection against cross-site request forgery.

Using it inside a React Native project is simple! In this piece, we’ll use Axios to access the common HTTP or HTTPS API within a React Native application.

We start by adding Axios to our project by choosing any one of these commands to install Axios:

yarn add axios
npm install axios --save

Ionic or React-Native?

You might be in a dilemma to choose between these two or which framework is better and easy to learn.

Let me have the pleasure to make that ease that for you. If you are good with JS and want to learn something new and unique go for React Native as it is not dependent on any other framework and is purely JS based.

But if your main goal is to develop web apps along with mobile apps, then choose Ionic as Ionic is the only framework which will make this accessible and easy for you.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store