How to import components in React Native ?

React Native is a framework developed by Facebook for creating native-style applications for Android & iOS under one common language, i.e. JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Component

We know that React Applications are a collection of interactive components. With React Native, you can make components using either classes or functions. Originally, class components were the only components that could have state. But since the introduction of React Hooks API, you can add state and more to function components. The Components are the building blocks in React Native, which are similar to the container where all UI elements are gathered and help in rendering details in the foreground as a native UI on either Android or iOS devices. React comes with multiple built-in components such as Text, View, 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'); 

But now each module can have a default export or may export several named parameters, and if it is possible to export, it will surely be possible to import the same. Thus, with the recent ECMAScript version, every module may import the default export or several named parameters or even a valid combination.

Approach

React Native uses the same features as mentioned above, and you may treat each React Component as a module itself. Thus, it is possible to import React Native Components, and it is one of the basic operations to be performed. In React, we use the keyword import and from to import a particular module or a named parameter. Let's see the different ways we can use the import operation in a React Native 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

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: In this example, we are importing two basics built in components Text and View of React Native from the react-native library.

import * as React from "react";

// Importing components from react-native library.
import { View, Text } from "react-native";

export default function App() {
  return (

    // Using react-natives built in components.
    <View
      style={{
        flex: 0.5,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "green",
      }}
    >
      <Text
        style={{
          color: "white",
        }}>
        GeeksForGeeks
      </Text>
    </View>
  );
}

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• 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.
• For iOS users, simply scan the QR code using the Camera app.
• 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: In this example,  we will create a responsive Button which displays Alert Component, using the react-native Button component. 

import * as React from "react";

// Importing components from react-native library.
import { Alert, View, StyleSheet, Button } from "react-native";

export default function App() {

  // Alert is used to show alert messages.
  const onPressButton = () => {
    Alert.alert('Welcome To GeeksForGeeks..')
  }

  // StyleSheet is used to create styles for the components.
  const styles = StyleSheet.create({
    container: {
      flex: 0.5,
      justifyContent: 'center',
      alignItems: 'center',

    }
  })

  return (

    // Using react-natives built in components.
    <View style={styles.container}>

      <Button onPress={onPressButton} 
              title="Press Me" color="green" />

    </View>
  );
}

Output: