Open In App

How to import components in React Native ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: Basically 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 is 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 now provides a more advanced module importing pattern. In the previous version, the developer had to use the module.exports = { // Define your exports here. }, but now each module can have a default export or may export no of 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 React Native Application.

  1. Importing 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
  2. 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

    And 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
  3. Importing a combination of Default Exports and Named Values: The title makes it clear what we need to see is that 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: First of all, we need to create 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 in our system to run Node Package Manager (npm) commands.

  • Step 1: Install React Native App.

    npm install -g create-react-native-app
  • Step 2: Create React Native Project.

    create-react-native-app myReactNativeApp
  • Step 3: Start the server by using the following command.

    npm run android

Project Structure: Above commands will create a myReactNativeApp 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.

App.js




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 to run the application: Start the server by using the following command.

npm run android

Output:

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

App.js




import * as React from "react";
  
// Importing components from react-native library.
import { Alert, View, StyleSheet, Button } from "react-native";
  
export default function App() {
  
  const onPressButton = () => {
    Alert.alert('Welcome To GeeksForGeeks..')
  }
  
  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>
  );
}


Step to run the application: Start the server by using the following command.

npm run android

Output:



Last Updated : 18 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads