React Native Functional Component Example

Copy 
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;

Copy 
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;

Copy 
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;

Copy 
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;