Facebook iconCreate, export and import components in React Native (vs JAVA)
Blogs/Technology

Create, Export, and Import Components in React Native (vs JAVA)

Nov 4, 20242 Min Read
Written by Murtuza Kutub
Create, Export, and Import Components in React Native (vs JAVA) Hero

What is a Component?

The Components are the building blocks in React Native which is similar to the container where all UI elements do accumulate and help to render details in the foreground as a native UI on either Android or iOS devices.

How to create a Component?

I assume that React Native is installed on your machine, If not no worries, Please refer my previous blog post on Environment setup.

import React from 'react';
import { Text, AppRegistry } from 'react-native';

const App = () => (
    <Text>Hello Component!</Text>
);

AppRegistry.registerComponent('ComponentDemo', () => App);

Copy-paste the above code snippets into index.js. You’re right to go. Yet confused? Chill! Let’s break the code into pieces in a better way.

       React Native                           JAVA

import React from 'react';             import java.util.*;
import { Text, AppRegistry } 
    from 'react-native';               import java.text.*;
const App = () => (                    public class App {
);                                     }
AppRegistry.registerComponent          package com.componentdemo
('ComponentDemo', () => App);

const — This is similar to a class in JAVA, which lets you declare a component block in React Native.

AppRegistry — is the kick starter helps to build React Native apps where all parent or root component should be registered using ‘registerComponent’ function.

Text — This is similar to TextView in Android and Label in iOS.

Partner with Us for Success

Experience seamless collaboration and exceptional results.

How to export a Component ?

It’s simple. Create ‘src/components/YOUR_FILE_NAME.js’ inside your project root folder.

Component demo

Create a component ‘Title’ and export it as a reusable component.

For Example:

export default Title; //Provides export access for the component

Code Implementation:

import React from 'react';
import { Text } from 'react-native';

const Title = () => (
  <Text>Hello Title</Text>
);
export default Title;

How to import a Component from different .js file?

Add the following import statement in the destination Component .js file.

import Title from './src/components/importcomponentdemo';

Complete code:

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './src/components/importcomponentdemo';
  const App = () => (
      <Title />
  );
AppRegistry.registerComponent('ComponentDemo', () => App);

Output:

Hello Title

Yes! You’re done. Now it’s possible to access <Title> property from the base file.

Partner with Us for Success

Experience seamless collaboration and exceptional results.

Author-Murtuza Kutub
Murtuza Kutub

A product development and growth expert, helping founders and startups build and grow their products at lightning speed with a track record of success. Apart from work, I love to network & Travel.

Phone

Next for you

What Is An Event Loop IN Javascript: A Beginner Guide Cover

Technology

Feb 5, 20255 min read

What Is An Event Loop IN Javascript: A Beginner Guide

JavaScript is a single-threaded, non-blocking, asynchronous programming language. It achieves this functionality through the Event Loop, which is the heart of JavaScript's concurrency model. Understanding the Event Loop is essential for writing efficient and responsive JavaScript applications. Javascript performs a synchronous task by virtue of ‘delegation’. This simply means that whenever the JS engine sees an asynchronous task, it delegates it to the browser, all while executing synchronous co

What is Kusho.ai and How to Use It in 8 Steps? Cover

Technology

Feb 4, 20254 min read

What is Kusho.ai and How to Use It in 8 Steps?

Tired of spending countless hours manually testing APIs? Struggling with bugs that slip into production? Building and maintaining reliable APIs shouldn't be a nightmare. That's where Kusho.ai comes in, an intelligent API testing tool designed to streamline your workflow, catch bugs before they break production, and ensure seamless integrations.  Whether you're a developer pushing new features or a QA engineer ensuring system stability, Kusho.ai's powerful automation, real-time debugging, and AI

GraphQL vs Rest APIS (Key Differences) 2025 Cover

Technology

Jan 31, 20259 min read

GraphQL vs Rest APIS (Key Differences) 2025

Choosing between GraphQL and REST API can be challenging for developers building web applications. Both approaches offer distinct ways to structure your API, each with its own strengths and trade-offs. The right choice can significantly impact your project's success, particularly regarding data efficiency and scalability. When building applications, developers often encounter issues with data retrieval, flexibility, and performance. These challenges become more apparent as applications grow in