Step-by-Step Guide to Integrate Mobile App with React Native
React Native is a great way to quickly get your app up and running. You can use it if you are a beginner developer or an experienced one because this framework has been designed for everyone! It also helps that there’s plenty of documentation available on how everything works.
This technology has become the go-to choice for developers who need a quick turnaround on their projects. With its ability to provide components that work across several devices, it’s no wonder why more experienced mobile app builders are turning towards this technology rather than writing native code!
What is React?
React is a JavaScript-based library created by Facebook, which can be used to build user interfaces. React provides a way to manage to change data over time. React uses a component-based approach, dividing components into data (inputs), container (state), and output.
According to the JavaScript study, React is the most popular library out there:
React also encourages you to use declarative programming methods. Instead of giving code a set of directions on manipulating data, you give it simple statements saying what your data looks like in its initial state and what it should look like when it’s changed. This has two main benefits: It simplifies debugging because bugs are easier to track down when there’s less code to go through, and it keeps your code readable.
What is React Native?
React Native is a renowned framework for building native apps using React. It allows you to write Javascript just like you would with React but has that code execute in a completely different environment than what you’re used to. If you’re coming from regular React development, learning how to get started with React Native will be pretty straightforward. Here are some stats showing React Native is becoming more popular each day:
Furthermore, you’ll use your knowledge of JSX syntax and other common React patterns and apply them in a new way. If not, or if it’s been a while since you’ve looked at JavaScript, keep on reading! We’ve got an introduction that breaks down some of the fundamentals of JS, so they’re easier to understand.
Understanding the difference between React and React Native
React Native is a highly acknowledged framework for building native mobile applications using React. React Native also uses the same design as React, letting the developer compose a rich mobile UI from declarative components. The difference between these two is that React Native compiles your code into native iOS and Android views instead of rendering components in the browser.
It uses the same view system as React (so it doesn’t replace existing views) and thus works with existing JavaScript code and libraries, making it easy to learn for those who already know React. With React Native, you don’t build UIs in XML; instead, you use familiar JavaScript constructs — classes and function call — to create UIs that run on any device or platform where React Native runs.
Components, APIs, and native modules
There are a plethora of built-in components. However, there are many APIs and third-party libraries if you need something more specific. Below mentioned are some features that you can find in the React Native platform:
- View
- Text
- Image
- Text Input
- Scroll View
Here are some components and APIs that are specific to the Android platform:
- BackHandler
The BackHandler class provides an easy way to create a back stack for activities that support multiple navigations. This enables you to build more immersive applications where users can navigate through several different contexts, one after another.
An activity that supports multiple navigations is an activity that displays a back stack of entries when users press BACK. For example, if you’re reading an e-book on your phone, encouraging BACK returns you to your library; pressing it again returns you to a list of books.
- DatePickerAndroid
This new DatePickerAndroid class allows you to use a time picker dialog, providing several options for formatting time. It supports both 12-hour and 24-hour clock formats, relative times such as 5 minutes ago or tomorrow at 6:30 am, and can also support user-defined custom formats. The example below shows how to integrate DatePickerAndroid into your app.
- DrawerLayoutAndroid
A fragment represents a sliding menu. The SlideMenuFragment class conveniently implements a slide-out menu that you can use as your activity’s content view. To learn more about writing your SlideMenuFragment subclass, see Sliding Fragments.
You should also check out Adding Tasks to Your Task List to learn how to let users add tasks to their task lists directly from within your application (as well as make other common additions to TaskListActivity ).
- PermissionsAndroid
Adding new permissions to an app is pretty simple; developers need to do it when creating new projects. The framework defines a set of permissions that are granted by default. This includes INTERNET, READ_PHONE_STATE, ACCESS_COARSE_LOCATION, ACCESS_FINE_LOCATION, CAMERA, and other permissions needed for core functionality.
- ProgressBarAndroid
This component displays a horizontal bar that shows progress as a task completes. It can also be widely used as an alternative to a spinning wheel or another work-in-progress indicator.
ProgressBarAndroid represents an amount of work that remains relative to some maximum value, where 0 means no remaining work and one means all remaining work has been completed.
- ToastAndroid
A toast is a message that usually pops up on your screen. Toasts don’t take focus or block user interaction with an activity. They appear briefly at the top of your move, then disappear automatically after a short period (defined by you).
In addition to standard toast messages, you can also set actions or custom views as part of a toast message. Use a notification manager if you want your app to react to system events like these.
- ViewPagerAndroid
A ViewPager subclass that adds support for attaching click listeners to individual pages. This is an add-on to PagerTabStrip, so all its features (such as horizontal swipe animations) are also available when using ViewPagerAndroid.
Step by step process to integrate React Native with an existing mobile app:
Mobile app Integrate with react native is the best way to increase the speed of development, make more complex apps and implement features for both iOS & Android simultaneously. If you have any concerns about integrating it inside your native app, I can assure you that it will work out just fine.
For a seamless experience, it’s best to create your app from scratch using React Native. But if you want an easy way of adding user flows and screens without writing code yourself, this could be the answer!
Step 1: Prerequisite
First, you need to set up React Native on your system.
The easiest way to start using React Native is through the Create React native app (CRNA). It will help you avoid installing any libraries or tools necessary for writing code on your system, focusing solely on building out new applications!
You’ll need Node v6+ installed for CRNA to work well — however; we recommend using either NPM3/4 versions rather than its newest version, which has been reported as having bugs when used with yarn scripts.
Now, Install CRNA (Create React Native App) globally:
npm install -g create-react-native-app
or
$ yarn global add create-react-native-app
If you want to create a new app, run this command:
$ create-react-native-app your-app-name
$ cd your-app-name
The React Native project creates a directory called your-app name inside the working directory you’re currently using.
Inside this new folder, it will generate an initial project structure and install all dependencies needed by our application via npm script scripts.
- npm start
- npm test
- npm run ios
- npm run android
- npm run eject
If you eject an app from your device, it will require that Xcode or Android Studio environment be set up. You can use version control systems such as Git to revert if necessary and avoid any problems with lost data in future projects.
Step 2: Restructuring the existing project
If you need to integrate RN into your project but want it only for the React Native part of your application instead of both together, then here’s how.
You’ll create a folder called “android” inside out root directory (in this case at C:\YourProject). Next, copy over all files from /YourReactNanoApp/, including its project references and assets, so they end up in another subfolder called ‘Android.’ Now open those too within Studio 3.
Install JavaScript dependencies
- Move to the root directory of app /YourAndroidApp
- Create a file named package.json
- Paste the following code inside it:
{
“name”: “YourAndroidApp”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
}
}
Next, you need to ensure the yarn package manager is installed.
After that, Install the react-native and react packages. And, Open a terminal or command prompt. Then, navigate to the directory with your package.json file and run this command:
$ yarn add react-native
If you see a message which is similar to the below mentioned, you need not worry:
warning “react-native@0.52.2” has unmet peer dependency “react@16.2.0.”
This means you also need to install React:
$ yarn add react@version_printed_above
Step 3: Integrating React Native into the project
You need to add the React Native dependency to your mobile app’s build. Gradle file:
dependencies {
…
compile “com.facebook.react:react-native:+” // From node_modules
}
After that, add an entry for the local React Native directory to build.gradle.
It would help if you were sure to add it to the “all projects” block
Add it to android/build.gradle, and not to android/app/build.gradle
allprojects {
repositories {
maven {
url “/YourAndroidApp/node_modules/react-native/android”
}
…
}
…
}
You also need to make sure that this path is entirely correct!
Step 4: Adding permissions
It would help if you opened AndroidManifest.xml, located at the path android/app/src/main/AndroidManifest.xml, in Android Studio.
After that, add this permission to it:
<uses-permission android:name=”android.permission.INTERNET” />
Step 5: React Native code
You need to create an index.android.js file inside your root directory /YourAndroidApp. It will be the entry point for the React Native app.
ReactRootView
You need to create the new Activity within your Android Studio and call it MyReactActivity. After adding this code:
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName(“index.android.bundle”)
.setJSMainModulePath(“index”)
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// The string here (e.g. “YourAndroidApp”) has to match
// the string in AppRegistry.registerComponent() in index.js
mReactRootView.startReactApplication(mReactInstanceManager, “YourAndroidApp”, null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
After this, you need to pass some activity lifecycle callbacks to the ReactRootView and ReactInstanceManager. If you face any difficulty running this code, you can get help from any react-native development company.
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
:
You also need to pass back button events into React Native:
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
It will allow JS to control what happens when the user presses the hardware back button (for example, implementing navigation). When JS does not handle the back button press, the invokeDefaultOnBackPressed method is possible to get called. By default, it simply finishes your Activity.
Step 6: Opening the React App
After that, you need to add logic for opening the MyReactNative activity to launch the React Native mobile app as per the business logic of your mobile app.
Intent intent = new Intent(this, MyReactActivity.class);
startActivity(intent);
To run your mobile app, you need first to start the server. You need to run the following command inside your root directory /YourAndroidApp:
$ yarn start
//or
$ npm start
You can run the mobile app from Android Studio as usual and test your code.
Let’s Wrap Up:
React Native is one of the best frameworks for developers who need to build iOS and Android apps simultaneously. It’s constantly being updated, making integration easy with this software! If you need professional help in this process, you can hire react native developer that will help you in this process.
