This article will give you examples of functional components in react native. step by step explain props in functional components react native. if you have a question about react native functional component then I will give a simple example with a solution. I explained simply step-by-step react native functional components.

In this example, Most of the react native developers are shifting from class-based components to functional components. You can even see changes in the examples given in the official documentation of react native.

In this create Functional component simple use text in this example.

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

const App = () => {
  return <Text>Hello World</Text>;
};

export default App;

We know props transfer information from one component to another. They are very useful while creating reusable components.

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

const Header = ({title}) => {
  return <Text>{title}</Text>;
};

export default Header;

Now, you can reuse the Header component as given below.

import React from 'react';
import Header from './Header';

const App = () => {
  return <Header title="Hello World" />;
};

export default App;

it was impossible to use State in functional components. Following is a functional component with TextInput that uses State with the help of useState hook.

import React, {useState} from 'react';
import {TextInput} from 'react-native';

const App = () => {
  const [input, setInput] = useState('');
  return (
    <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1}}
      onChangeText={(text) => setInput(text)}
      value={input}
    />
  );
};

export default App;