How to import components in React Native ? - GeeksforGeeks

18 Aug, 2021
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.
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 LOCATIONImporting 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 LOCATIONAnd 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 LOCATIONImporting 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
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
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
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 LOCATIONAnd 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 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
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
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.
Installation of Node.js on Windows
Installation of Node.js on Linux
Step 1: Install React Native App.npm install -g create-react-native-app
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 2: Create React Native Project.
create-react-native-app myReactNativeApp
Step 3: Start the server by using the following command.npm run android
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:
Picked
React-Native
React-Native Component
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to redirect to another page in ReactJS ?
Difference Between PUT and PATCH Request
How to execute PHP code using command line ?
How to pass data from child component to its parent in ReactJS ?
How to Insert Form Data into Database using PHP ?