Concepts of React Native

📄 Table of Contents

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

What

  • 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

  • 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 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

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

  • 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

  • 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 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

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.

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

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

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

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

2. There’s no 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.

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

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!

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

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.

Read more about React Native architecture here.

Handling API in React Native

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

Integrating an API in React Native

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

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.

🔘 Managing API Requests in React Native Using Axios

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?

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