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.
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.
It’s simple. Create ‘src/components/YOUR_FILE_NAME.js’ inside your project root folder.
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;
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.
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.
How to Hire a Backend Development Team: Reasons, Benefits, Process
Did you know that the backbone of every stellar app isn't its sleek design, but its robust backend? That's right! In the digital world, it's what's beneath the surface that truly counts. Backend development plays a pivot...
How Headless Shopify Can Increase Testing Efficiency & Improve Code Reusability
The landscape of eCommerce keeps changing, and the one who stays still gets left behind. Efficiency and adaptability are essential. However, there's a way to make sure you aren't among that crowd. The way is marked as Headl...
Top No-Code Tools for Growth Marketers
The No-code movement is significantly altering the way marketers work, and the stats back it up. A recent survey revealed that 82% of users adopted No-code tools during the pandemic, and 90% attribute faster company growth ...