Importing a components in React Native

React Native is a popular open-source framework developed by Facebook for building native mobile applications using JavaScript and React. It allows developers to create apps for both Android and iOS using a single codebase.

• Enables cross-platform development with one common language (JavaScript).
• Provides native-like performance and user experience.
• Supports both Android and iOS platforms with reusable components.

Component

React Native apps are built using reusable components, created with either class or function syntax, where Hooks enable function components to manage state and behavior while rendering native UI on Android and iOS.

• Components are the core building blocks that structure and render the UI
• Components can be class-based or function-based
• Hooks allow state and lifecycle features in function components
• React Native renders native UI for Android and iOS
• Built-in components include View, Text, Image, ScrollView, TextInput, etc.

Importing Component

The world of JavaScript is always moving, and one of the latest ECMAScript versions now provides a more advanced module importing pattern. In the previous version, the developer had to use the following command.

module. exports = { // Define your exports here. };
const module = require('./file'); 

With modern ECMAScript, a module can export a default value, multiple named exports, or both, and these can be imported individually or in combination as needed.

Approach

In React Native, each component acts as a module, allowing built-in or custom components to be imported using the import and from keywords in different ways within an application.

Importing the default export

Each module in reacts native needs at least one default export. In order to import the default export from a file, we can use the location of the file and use the keyword import before it, or we could give a specific name i.e. COMP_NAME to the import which makes the syntax as the following.

import COMP_NAME from LOCATION

Importing named values

Every module can have no named parameters, and in case we need to import one we should use the syntax as follows.

import { COMP_NAME } from LOCATION

Similarly, for multiple imports, we can use a comma ( , ) separator to separate two-parameter names within the curly braces. As shown below.

import { COMP_NAME1, COMP_NAME2, ... , COMP_NAMEn } from LOCATION

Importing a combination of Default Exports and Named Values

The title makes it clear that what we need to see is the syntax of the same. In order to import a combination, we should use the following syntax. 

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

Now let's start with the implementation.

Step-by-Step Implementation

First of all, we need to create a react native application in our system. for the creation of react native application we need to follow the below steps.

Prerequisite: We need to install Node.js on our system to run Node Package Manager (npm) commands.

• Installation of Node.js on Windows
• Installation of Node.js on Linux

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template blank

Note: Replace the app-name with your app name for example : react-native-demo-app.

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Above commands will create a react-native-app named react native application folder on your system specified location. As shown below.

Example 1: We are importing two basics built in components Text and View of React Native from the react-native library.

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

• For the Android Emulator, press "a" as mentioned in the image below.
• For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Output:

Example 2: We will create a responsive Button which displays Alert Component, using the react-native Button component. 

Output: