React Native App Archives - Biz4solutions blog

How to develop your first React Native Application?

Posted by Parija Rangnekar On May 08, 2023 Dec 20, 2023 Filed under React Native App No Comments

React Native is one of the most sought-after mobile app development frameworks. This Facebook-created framework has React as its base and uses JavaScript to build cross-platform applications. React Native apps share a single codebase for the Android and iOS operating systems. Developers write these apps in JSX and compile them into the native code. You’ll be able to customize this native code to suit specific project development requirements. As such, one could barely distinguish the cross-platform apps built with React Native from truly native apps.

Since React Native development teams can target several platforms and operating systems with the same codebase and development effort, its popularity is sky-high. This framework also comes with multiple other beneficial features. So, if you’ve not yet explored this profitable framework, it’s high time to consider it for your next project. This post provides step-by-step guidance to beginners on how to sail through their first React Native app development project.

Getting Started with Developing a React Native App

There are two options for getting started with the development process. You either employ Expo or the React Native CLI. Let’s explore the offerings and development steps of each of these approaches!

Get Started with Expo

If you are a novice in the mobile app development arena, I would recommend you to use “Expo Go” as it offers an easier and quicker way to build your first React Native application. Expo contains a set of services and tools best suited to the React Native environment. It comes with numerous handy features. Here are the most notable ones!

Using Expo, you get a wide variety of pre-built libraries and components including a feature-packed native runtime with several modules. React Native app developers can speedily prototype, create, and publish applications without having to worry about the underlying native code.

Expo Go speeds up the development process and reduces friction. Developers can effortlessly experiment with their innovative ideas. You only require a mobile phone device or an emulator and the latest Node.js version. You can run the app on a physical device without the need to install Android or iOS native SDKs. Expo Go also allows you to test your application directly on your mobile device when you carry out any modifications.

Expo is a great choice when you are working on simpler projects and need to develop an app quickly. However, with Expo Go, you cannot add customized native code. You can only use the built-in native modules offered by Expo. For using third-party native modules and libraries you need additional development steps.

Here are the key steps for getting started with Expo!

Step#1

Run the command npm install -g expo-cli in your terminal for installing the Expo CLI.

Step#2

Use the Expo CLI for creating a new React Native project; run the code expo init my-app in your terminal.

Step#3

Select your preferable template for the project. Some examples are “tabs,” “blank,” etc. Follow the prompts for setting up your project.

Step#4

After you create the project, run the command cd my-app in your terminal to navigate to your project directory.

Step#5

Run the command npx expo start or yarn expo start to start the development server.

Step#6

Install the “Expo Go” app on your Android or iOS mobile device. Connect it to the same wireless network that your computer is using. Now, use the “Expo Go” app to scan the QR code on your mobile device for viewing the app in development. For iOS devices, you can use the in-built QR code scanner provided by the default Camera app of iOS.

Step#7

Now, try making changes. Modify your app’s code and then save the files. Your changes will be reflected on the Expo Go app in real-time.

Step#8

Thereafter, run the command expo build:android or expo build:ios to create a production-ready version of your app.

This way, you’ll be able to create a standalone build of your React Native software solution. You can upload it to the Apple App Store or Google Play Store.

Get Started with React Native CLI

If you have some prior experience in creating mobile applications or have more complex development requirements, the React Native CLI is a preferred pick. Using React Native’s command-line interface, developers enjoy more flexibility and control over the development process. One can access the entire React Native API and can integrate the necessary native modules and libraries into the application. This approach proves particularly beneficial for developing complex apps that need advanced features and custom integrations.

Here are the key steps for getting started with React Native CLI!

Step#1: Install Dependencies

Install the React Native CLI and all the necessary dependencies for getting started. The official documentation includes the installation instructions based on your OS. These are the major steps:

Download and install Node.js and npm on your machine from the official website of Node.js at https://nodejs.org/en. You can use the popular Windows Package Manager “Chocolatey” for installing Node. It’s advisable to use an LTS version of Node. And, if you need to switch between various versions, you can use the “nvm-windows,” one of Node’s version managers for Windows. If you have a Node version already installed on your machine, ensure that it’s Node 14 or a more advanced version.

The next vital step is installing React Native CLI globally on your system. For this, open your terminal or command prompt and then enter this command:

npm install -g react-native-cli

Also, install a JDK (Java SE Development Kit) via “Chocolatey.” Follow these steps. Open the Administrator Command Prompt and right-click the Command Prompt. Then choose the option “Run as Administrator” and employ the command choco install -y nodejs-lts microsoft-openjdk11. Here, I recommend using JDK11 as issues might crop up if using higher JDK versions.

Step#2: Set a native Development Environment

Install either Xcode (for iOS development) or Android Studio (for Android development) on your machine. Now that you’ve installed Android Studio/Xcode, you need to configure them with React Native. Follow the detailed instructions provided in the official documentation for this purpose.

Create a new React Native project. For this, you need to open your command prompt or terminal and run the following command

npx react-native init MyFirstApp

You need to replace “MyFirstApp” with the name of your project.

Step#3: Run your React Native Application

To begin with, you need to start the JavaScript bundler “Metro.” “Metro ships with React Native. It accepts an entry file and different options and then, generates a single JS file that contains the code and all the dependencies. Then, start Metro by running this command inside your React Native project directory.

npx react-native start

Now, the development server for your project gets started. The Metro Bundler will start and will bundle JavaScript and other assets of the app.

Run your app in a device emulator by opening a new terminal window and navigating to your project directory. It’s necessary to open a new terminal because you need to allow the Metro Bundler to run in its terminal. Run this command Inside the new terminal:

“npx react-native run-android” (for Android apps)

“npx react-native run-ios” (for iOS apps).

This command will launch your app on an emulator or a connected device.

Step#4: Make Modifications

After you’ve successfully run the application, you can make the required changes. This is how you need to do it. Pick a text editor and open App.tsx in it. Then, edit some lines. For viewing the modifications, either click Reload from the “Developer Menu” or press the R key two times.

How to create a basic component in React Native?

Now that you’ve set up your app, open the project directory in your preferred code editor and begin writing the code.

This is how you can create a simple component in React Native.

import React from ‘react’;

import { View, Text } from ‘react-native’;

const MyComponent = () => {

return (

import MyComponent from ‘./MyComponent’;

);

};

export default MyComponent;

You can use this component in other parts of your application by importing it. Take a look at this example!

import MyComponent from ‘./MyComponent’;

const App = () => {

return (

<View>

<MyComponent />

</View>

);

export default App;

How to Style Your React Native Components?

You need to create stylesheets for styling your React Native Components. For this, you can utilize the “StyleSheet” API offered by the framework. With this API, you’ll be able to define styles in a separate file. You can import this and apply it to your React Native components.

Step#1

Create a new file in your project directory. Name the file styles.js. This file will contain your styles.

Step#2

Import the StyleSheet API from React Native in your styles.js file

import { StyleSheet } from ‘react-native’;

Step#3

Use the StyleSheet.create() method for defining your styles. In this method, an object is taken as an argument. Here, every key represents a style name and its value is an object having style properties.

Here’s an example in which we define two styles- container and text

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#F5FCFF’,

text: {

fontSize: 20,

textAlign: ‘center’,

margin: 10,

});

Step#4

Now, export your styles. For this, add “export default styles;” at the end of your styles.js file.

Step#5

Import your styles in your React Native component

import styles from ‘./styles.js’;

Now, use the style prop to apply the styles to your component

<View style={styles.container}>

<Text style={styles.text}>Hello, world!</Text>

</View>

Here, we’ve applied the container style to a View component and the text style to a Text component.

This way, you can create styles and apply the stylesheets to your React native components.

Are You Interested in Building a Top-Class Website or Mobile App?

Final Verdict

These steps will guide you in creating a functional React Native environment on your machine, sail through the app development process effortlessly, and also, style your React Native components. Pick the right approach – React Native CLI or Expo – based on your project development requirements. In a nutshell, the React Native CLI provides you more control over the development process and allows customization, but involves a lengthy configuration and setup process. The Expo approach, on the other hand, offers ease-of usage and streamlines the development process, but doesn’t offer the control and flexibility you need for integrating complex app functionalities.

Do not forget to refer to the official documentation of React Native for more detailed and specific insights. It’s also important to partner with the right React Native mobile app development Company. Professional agencies involve experienced resources who can execute the developmental steps flawlessly and get the coding right.

Deep Linking in React Native Apps: All you need to Know!

Posted by Parija Rangnekar On Mar 06, 2023 Dec 20, 2023 Filed under React Native App No Comments

Deep linking has become an essential component in today’s interconnected world. The term “deep linking” may sound new to many; but, most of you must have used the concept of deep linking in some form or the other.

Do you remember an instance wherein you’ve clicked on a link and it directly opened up a specific screen in an app installed on your device; without you having to navigate manually through the app? Or, for instance, you wanted your friend to read an article and shared the URL of that article. Your friend clicked on the link and got directed to the desired content in one go instead of having to launch the home page first and then search for the article.

Have you ever wondered how this happens?

Well, this is what deep linking does. Users click on a link and get redirected to a particular location in a mobile app or a website without having to waste time navigating via the main screen. Other examples include sharing the link for a YouTube video or Amazon product with a friend, opening a promotional link from a brand to go to a specific product page, and so on. In such scenarios, deep linking is essential as regular web links do not work effectively with native mobile applications.

This post is all about understanding how the concept of deep linking works and learning about its benefits. We will also discuss the key steps on how to implement deep linking in React Native mobile apps for the Android & iOS operating systems. We’ve picked the React Native framework as it is one of the most popular preferences for mobile app development these days.

What is Deep Linking?

Deep linking is a technique that enables one to link a particular content or screen inside a mobile application from an external source like another application or a website. Deep links are clickable links that send users straightaway to a particular location within a mobile app rather than an online store or a web link. This in-app location can be anything like a piece of secure content behind a paywall, an article, a product, or a login screen. Users can reach the desired in-app location by just clicking on an URL or resource without the need of searching for the page themselves.

How does the concept of Deep Linking work?

Deep linking specifies a customized URL scheme like universal links (for iOS devices) and an intent URL (for Android devices). When a user clicks on a deep link, the OS intercepts the link and opens up the relevant application if it’s installed on the user’s device. The information present in the deep link is then used by the application for navigating to the desired content or screen.

Deferred Deep links?

What if users get deep-linked into an application, but the application is not installed on their device? Here, deferred deep links come into the picture. If a user clicks on a link and the app to which the link belongs is not downloaded; the user gets directed to the App Store instead. Here, the users are directed to the exact location of the App Store where they can install the intended app with just a single click. And, once the app gets installed the specific screen opens up at once.

What are the Benefits of Deep linking?

Deep linking saves the users’ time and enhances the user experience significantly.

Deep links are great tools for business brands to boost user retention as well as conversion rate. Brands can tie promotional campaigns and incentives to deep links; redirecting users to their product page with just a single click. This way, brands can easily convince users to try out new products or services. For instance, a music app owner would like to promote a new music album. So, the owner invests in advertising and ties up with a famous website. The music album cover with a deep link gets displayed on that website as an ad campaign. When the website users click on the deep link, they are redirected to the specific page in the music app and can listen to the album.

Furthermore, you can track deep linking campaigns and check how your campaigns perform. Deep linking also improves your SEO rankings and minimizes the churn of your application.

How can you implement Deep Linking in React Native apps?

The react-navigation library provides the Linking module for deep-linking React Native apps. This proves handy for React Native developers.

You need to define a deep link schema in the application that will map specific URLs to the relevant app screens. react-navigation provides components like the Linking module and the NavigationContainer to define the schema. After defining the schema, it can be used for handling the incoming deep links. You need to register a callback function with the help of the addEventListner method provided by the Linking module for handling the incoming deep links. When the app gets launched via a deep link, the callback function is called. This callback function can be used for navigating the desired screen in the application.

Configuring Deep Linking in iOS and Android

You need to configure a mobile app with an URL scheme (a unique URL). This URL scheme is responsible for locating and launching the app installed on the user’s smartphone device. To make the app navigate to a screen, you have to set up prefixes that match the URL scheme on which the app got configured. Then the screens need to be mapped within the app with their respective paths. When the path gets attached to the URL, the app is able to directly navigate to specific screens.

Configuring deep links is a bit different for the iOS and Android operating systems. Let’s take a look at how professional React Native developers implement deep linking for Android and iOS!

Configuring deep links in React Native Android Apps

Step#1 Defining Deep Links

Open the Manifest file and define the deep links that you plan to use in your app so that users can directly navigate to a specific page within the app. Here, you need to define a deep link for that specific page.

Here’s how you can define a deep link in your AndroidManifest.xml file:

<activity

android:name=”.ProductActivity”

android:label=”Product”>

<intent-filter>

<data

android:host=”example.com”

android:pathPrefix=”/products”

android:scheme=”http” />

<data

android:host=”example.com”

android:pathPrefix=”/products”

android:scheme=”https” />

</intent-filter>

</activity>

Step#2 Configuring the intent filter

Go to android/app/src/main and from there open the file named AndroidManifest.xml. Now, you need to configure the intent filter for every deep link. The intent filter specifies the amount of data and the actions that your application is capable of handling.

Step#3 Intent Handling

You need to handle the intent in your application’s activity. This intent will launch your application from a deep link. For intent handling, you need to extract data from the intent and determine that particular location or specific screen inside your app that you want the users to be directed to.

Thereafter, your project needs to be rebuilt in the Android emulator.

Configuring deep links in React Native iOS Apps

Set up your URL scheme under URL types in Xcode. Modify the ‘AppDelegate’ file and rebuild the project in the iOS emulator. Now the iOS project is opened in Xcode.

Step#1 Defining the URL scheme

Define a customized URL scheme for your application. This URL scheme is a unique way for your app to get identified. Other websites or apps will use this unique identifier to launch your application.

Open the file info.plist. Add a new URL type on the top of this file. The URL scheme can be input in the identifier and URL schemes field. Then expand item 0 (zero), select the URL Schemes, and name item 0. This name is the one that your application will be linkable as. For instance, the name of your app is “OurApp.” The URL scheme will look like this “ourapp://” or “ourapp://detail?id=123”.

Step#2 Handling Code implementation

Now, you need to implement the code that will handle the deep link. Go to the ‘AppDelegate’ file and add a method for handling the scheme. When your app will get launched through the URL scheme; this method will get called. The URL will be received by this method. The necessary information will be extracted from the URL and the right screen will get displayed in your app.

Step#3 Testing

Now, the deep link needs to be tested. For this, you can use the tool Safari or any other third-party applications that support the deep linking concept. For example, you are using Safari. Open the URL that had the defined URL scheme in Safari. Thereafter, your app launches with the correct screen.

Step#4 Universal Link Handling

Besides adding custom URL schemes, your app can also be configured to support universal links – standard HTTPS links used by other apps or websites – to launch your app. This is how you need to handle universal links. Configure the entitlements of your application. Then, create the relevant code for universal link handling and implement the code in the delegate of your app.

Now, you can rebuild your project in the iOS simulator.