📄 Table of Contents
- What & Why React Native
- web Apps vs Native apps vs Hybrid apps
- expo-cli vs react-native cli
- React JS vs React Native
- Traditional web development vs React Native
- Integrating an API in React Native
▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- 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.
- 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.
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.
◉ expo-cli vs react-native cli
npm install -g firstname.lastname@example.org # 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
- 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
Viewcomponent is similar to a
divtag, and a
Textcomponent is similar to a
- 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.
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.
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
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.
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
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.
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:
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:
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
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.
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
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!
5. It’s not transpiled
React Native Architecture
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;
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
catch. It’s similar to
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
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.