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
- How to create a functional component
- how to create functions in functional component
- How to create a state in functional component
- 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';34const FunctionalComponent = () => {5 return (6 <Text>Hello, I am functional component!</Text>7 );8}910export 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';34const getFullName = (firstName, secondName, thirdName) => {5 return firstName + " " + secondName + " " + thirdName;6}78const FunctionalComponent = () => {9 return (10 <Text>11 Hello, I am {getFullName("Rum", "Tum", "Tugger")}!12 </Text>13 );14}1516export 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";34const FunctionalComponent = (props) => {5 const [isHungry, setIsHungry] = useState(true);67 return (8 <View>9 <Text>10 I am {props.name}, and I am {isHungry ? "hungry" : "full"}!11 </Text>12 <Button13 onPress={() => {14 setIsHungry(false);15 }}16 disabled={!isHungry}17 title={isHungry ? "Pour me some milk, please!" : "Thank you!"}18 />19 </View>20 );21}2223export 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";45class ClassComponent extends Component {6 render() {7 return (8 <>9 <FunctionalComponent name="Munkustrap" />10 <FunctionalComponent name="Spot" />11 </>12 );13 }14}1516export default ClassComponent;
Thanks for reading…
Follow me on Twitter
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.