Hi, we’re going to be looking at the awesome technology of React Native. We will learn and talk about React Native tutorial from zero to intermediate. React Native, in case you don’t know, is a library that builds up upon React and JavaScript and allows you to build native mobile apps, so apps for iOS and Android that use React and JavaScript for you during the build process, during development, but the real native apps that you distribute over the App Store’s that run natively on these devices. This guide mostly cover React Native Tutorial Android and React Native Tutorial iOS.
What is React Native? Why choose React Native?
React Native is a framework for building mobile apps using JavaScript and the React library. So if you don’t know anything what React is, I would suggest going back and watching some crash course on React JS. Alright, basically it’s a library for building interactive user interfaces with JavaScript, so React Native allows us to build cross-platform applications (iOS/Android).
We can develop one app that will run on Android and iOS which is incredibly valuable to businesses and individuals, instead of building an iOS app in Swift, and then a separate app in Java for Android. You can have a single source that will run on both platforms.
React native uses almost all the concepts that React JS uses including components application, state, props, properties, life cycles, etc. If you know React then you should have no difficulty at all understanding the fundamentals of how this framework works.
We’ve seen frameworks in the past that allow us to build mobile apps with JavaScript such as Cordova, were also known as PhoneGap, ionic, Sencha Touch and some others. These are called hybrid apps and these are basically web apps that run inside of a native container or a WebView. React Native apps are not hybrid apps. They don’t run inside of a WebView. They use the equal fundamental building blocks as real native apps that are built with Swift or Objective C or Java.
This makes them faster, gives the user a much better experience, much like you would with a real native app. Ionic and Cordova, they do deserve credit and have great technologies, but I do think that React Native is going to be the base technology for our mobile apps built with JavaScript.
Advantages of Building a React Native app
There are some of the advantages of building a React Native app over an actual native app. One of the biggest is that it’s cross-platform. So usually if a business makes the decision to build a great mobile app, they will start off with just one platform iOS or Android. I know that there are Windows and Blackberry and some others but we’re going to stay focused on the two big guys. They can choose to build one application for both. One Android, one iOS, and try to have the same experience but it becomes incredibly expensive. You would need a Java developer or several Java developers for your Android application. Then, a Swift or Objective-C developers for your iOS app and both of those totally cost an arm and a leg!
With React Native, you just need to know JavaScript and React and your application will run on both platforms flawlessly. So think about the difference in cost, between those two options and this isn’t for some clunky web app inside of a container, this is a real native app with much LESS expensive. Now, you can see that the potential of React Native.
It is obviously much easier to code JavaScript than those high-level compiled languages. So, you save massive amounts of time, even in development itself there’s no compiling. You do not have to keep re-compiling every time you make a change in code. It just updates and you can constantly see your work, your updated work. React Native is also open source and it is free. Well, these are all some really nice advantages to using React Native over a real native app development.
React Native Elements
Let’s begin with some of the features that are available with React Native. So, we have different UI components that we can include in our app and these are just some of them some of the key ones that will be going over:
- Input controls, like the TextInput,a Picker which is kind of like a drop-down but nicer, a Switch, a Slider which is a an element that you can drag across the screen.
- Touchable elements, now one of the biggest differences between a web app web mobile app and a native app is that with a web app when you tap a button you don’t really get any effect you get the standard browser effect which doesn’t feel very natural and with React Native we have these elements. We have TouchableHighlight, TouchableOpacity that makes it really feel like a native app. You get that highlight with that effect and when you touch an element it doesn’t have to be a button. It can be absolutely anything.
- ListView and ScrollView; which are an example a list of users or locations contacts, or whatever, may be we can put those in a nice ListView. We can use Flexbox to style it and make it looks really nice. We also have ScrollView for things that we want to scroll, whether it’s horizontal or vertical.
- Alert, Modal, ProgressBar
- StatusBar, we can customize the status bar with the battery life info and things like that, we can do that on both platforms.
- TabBarIOS, is a component exclusively for iOS devices, gives you the little tabs at the bottom of the screen.
- ToolbarAndroid, which is the toolbar at the top of the screen and that’s only available for Android devices.
- We can easily separate pages so that one will load if it’s on iOS one will load if it’s on Android.
React Native API for Device Interaction
React Native also have APIs for device interaction, such as:
- CameraRoll, where we can bring in images from the device into our application
- AsyncStorage, which we can use for storage on the device and it works almost identical to local storage in html5 local storage, except it’s asynchronous.
- Geolocation
- ImageEditor
- PushNotification
- Vibration, on iOS and Android you can even work with the vibration API
- Share / Messages, where we can send things in text messages.
React Native Setup Environments
As our development environment, you need to setup some prerequisite. Later in this tutorial we are going to be using Windows.
- Windows; you need to setup the Android SDK, specifically you need to have the SDK version 8.1 or also called Oreo at this point to use React Native as states on the main getting started page. Also you want to download Android Studio, and get that SDK installed, and you also want to setup the Android Virtual Device to view our application and test our application.
- MacOS; all you really need to do is set up Xcode with the simulator that will allow you to view and test your app.
- The easiest way, you don’t want to setup above, Expo is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code – no Xcode or Android Studio installation required. We’ll be using this for our tutorial.
React Native Installation
Using Expo
Allright, let’s go ahead and we will install React Native and we’ll set up our application. This tutorial covers on Windows but as long as you have your MacOS Xcode environment setup, almost everything I do is going to be the same on a MacOS. We are going to use Expo for React Native installation.
Make sure you have dependencies installed. Expo needs Node installed, and you can type this in CLI window to install Expo:
npm i -g expo-cli
And then type this command to make a new React Native project:
expo init MyProjectcd MyProjectnpm startThis will start development server.
Building Project with native code
This instruction is for you want to build native code in your project, as an example if you have an existing React Native app and want to integrate a module, or you have an “ejected” Expo app, you will need this guide.
The instruction is depend on your environment whether in Windows, MacOS, or Linux. But, it’s fine. The official “Getting Started” guide has all that you want. This guide will cover only in Windows. If you need other instruction, just follows the official guide at: https://facebook.github.io/react-native/docs/getting-started.
Installing dependencies
You will need to install following: Node, React Native command line interface, Python2, a JDK, and Android Studio.
I recommend using Chocolatey, a popular package manager in windows, to install Node and python2 and jdk8.
Open administrator command prompt (Right click “Command Prompt” and click “Run as administrator”), and run following command:
choco install -y nodejs.install python2 jdk8
And then install React Native command line interface. Node has npm that allow you to install React Native CLI package.
npm install -g react-native-cliFor Android Studio, you can follow from official Android Studio https://developer.android.com/studio/index.html as it covers most of the requirement you needed.
Creating New Application
With the React Native Command Line Interface allows you to create a new React Native app:
react-native init my-first-projectIf you want to create a new project with a specific package name, i.e: com.yourcompany.yourprojectname, you need to add a --package option:
react-native init my-first-project --option=com.yourcompany.yourprojectnameThis is not really required if you are integrating React Native into an existing application, if you “ejected” from Create React Native App, or if you’re adding Android support to an existing React Native app project (see Platform Specific Code).
Running React Native Application
If you use Expo, install the Expo client app in your own iOS or Android telephone and connect to the exact same wireless network as your PC. On Android, utilize the Expo program to scan the QR code in your terminal to start your own project. On iOS, follow onscreen instructions to receive a hyperlink.
If you use native code, you will need an emulator or a real device connected to your development PC/laptop.
Modifying your program
Now you’ve successfully run the app, let us change it. The app should reload automatically when you conserve your changes.That’s all!
Congratulations! You have successfully operate and altered your very first React Native app.
React Native Examples
Next tutorial, we’ll cover about a very simple app made with React Native. I hope you have familiarized yourself with Expo command line interface and React Native files structure. If not, please do so before going further.
React Native Firebase
Note: React Native Firebase depends heavily on the Firebase native SDKs which means that due to restrictions within Expo, there is no way to use React Native Firebase without ejecting your Expo app. So this guide will cover without Expo.
We can use Firebase with React Native, because since the 3.1 version of the Firebase SDK, the authentication and database parts are compatible with React Native.
React Native allow us to build our app looks and its functionality effectively acting as our front-end code while Firebase provides tools and services that our apps can connect to giving us the power we would normally get by running our own back-end.
To integrate Firebase with React Native, we use the React Native Firebase module this allows us to add all of the features of Firebase.
Installation
You need to install React Native Firebase module as in their guidance.
React Native Firebase module guide:https://rnfirebase.io/This command will install React Native Firebase module in your app using NPM:
npm install --save react-native-firebase
Setup Firebase Project
The first thing to do is you need to have an active firebase project. If you don’t have any, please create it first in: https://firebase.google.com/console
Go to https://firebase.google.com/console
Click “Add project”. A dialog box will show up.
Fill respected forms:
- Project name: your project name
- Project ID: change to your liking as necessary
- Locations and Cloud Firestore: change to your liking as necessary
- Click Create project
- Your project will be created in a few seconds/minutes
- Once created click Continue
Once done you will redirected to the project homepage as shown below:
Firebase Platform Specific Installation
This additional installation steps will be required by both Android and iOS, so please follow the platform specific guides bellow:
Example Usages
import firebase from 'react-native-firebase';firebase.auth() .signInAnonymously() .then(credential => { if (credential) { console.log('default app user ->', credential.user.toJSON()); } });Originally posted 2018-12-06 07:25:08.