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.

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

const FunctionalComponent = () => {
  return (
    <Text>Hello, I am functional component!</Text>
  );
}

export 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.

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

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + " " + secondName + " " + thirdName;
}

const FunctionalComponent = () => {
  return (
    <Text>
      Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
    </Text>
  );
}

export 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.

import React, { useState } from "react";
import { Button, Text, View } from "react-native";

const FunctionalComponent = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

export 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.

import React, { Component } from "react";
import { Button, Text, View } from "react-native";
import FunctionalComponent from "./FunctionalComponent";

class ClassComponent extends Component {
  render() {
    return (
      <>
        <FunctionalComponent name="Munkustrap" />
        <FunctionalComponent name="Spot" />
      </>
    );
  }
}

export default ClassComponent;

Thanks for reading…