Navigate back to the homepage

React Native Functional Component Example

Infinitbility
React, React Native
June 27th, 2021 · 1 min read
React Native Functional Component Example

Hello Friends,

Welcome To Infinitbility!

This article will help you to create a functional component in react-native. Here, I will share the functional component example structure for your reference.

We are clear below some basic topics in this article

  1. How to create a functional component
  2. how to create functions in functional component
  3. How to create a state in functional component
  4. How to use a functional component in class component

Let’s start today topic React Native Functional Component Example

we start with the creation…

How to create a functional component

You have to just create a function with const and export like the below example. here you will also import and use other packages.

1import React from 'react';
2import { Text } from 'react-native';
3
4const FunctionalComponent = () => {
5 return (
6 <Text>Hello, I am functional component!</Text>
7 );
8}
9
10export default FunctionalComponent;

how to create functions in functional component

After creation, we have some common tasks then we have also the option to create functions in functional components and also how to use functions in a functional components like below.

1import React from 'react';
2import { Text } from 'react-native';
3
4const getFullName = (firstName, secondName, thirdName) => {
5 return firstName + " " + secondName + " " + thirdName;
6}
7
8const FunctionalComponent = () => {
9 return (
10 <Text>
11 Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
12 </Text>
13 );
14}
15
16export default FunctionalComponent;

How to create a state in functional component

React provide useState functionality to manage state in functional component, we have to just define const with useState like below example.

1import React, { useState } from "react";
2import { Button, Text, View } from "react-native";
3
4const FunctionalComponent = (props) => {
5 const [isHungry, setIsHungry] = useState(true);
6
7 return (
8 <View>
9 <Text>
10 I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
11 </Text>
12 <Button
13 onPress={() => {
14 setIsHungry(false);
15 }}
16 disabled={!isHungry}
17 title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
18 />
19 </View>
20 );
21}
22
23export default FunctionalComponent;

How to use the functional component in class component

After the creation of the functional component, we have to import the file with a component name in class component to use, you can also pass parameters ( props ) on the functional component like the below example.

1import React, { Component } from "react";
2import { Button, Text, View } from "react-native";
3import FunctionalComponent from "./FunctionalComponent";
4
5class ClassComponent extends Component {
6 render() {
7 return (
8 <>
9 <FunctionalComponent name="Munkustrap" />
10 <FunctionalComponent name="Spot" />
11 </>
12 );
13 }
14}
15
16export default ClassComponent;

Subscribe Our Newsletter You will get monthly free programming book

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

How to close react native app programmatically

How to close react native app programmatically

React Native exit app programmatically

June 26th, 2021 · 1 min read
Textarea in React Native

Textarea in React Native

React Native Textarea Example

June 25th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]