Functional Components in React Native

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. Many of them are demonstrated using functional components.

In this react native tutorial, I am going to show you the basics of the functional components with some examples.

Simple Functional Component Example

Following is a simple functional component that has a Text component. It’s the basic syntax of function components in react native.

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

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

export default App;

Functional Component with Props Example

We know props are used to transfer information from one component to another. They are very useful while creating reusable components. Following is a function component named Header with text and a prop named title.

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;

Stateful Functional Component Example

Earlier, it was impossible to use State in functional components. Please note that there was no constructor inside a functional component. After the introduction of react hooks, adding a state within a functional component is easy. Following is a functional component with TextInput that uses State with the help of the 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;

Life Cycles in Functional Component Example

You can use the useEffect hook to integrate life cycles inside a functional component.

ComponentDidMount in Functional Component

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

const App = () => {
  const [input, setInput] = useState('');
  const [placeholder, setPlaceholder] = useState('');

  //ComponentDidMount
  useEffect(() => setPlaceholder('username'), []);

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

export default App;

In the above example, the value of the placeholder is changed to username after mounting. Always remember to leave the second argument of useEffect as empty (i.e. [ ]), otherwise useEffect will be called every time when the state changes.

ComponentDidUpdate in Functional Component

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

const App = () => {
  const [input, setInput] = useState('');

  //ComponentDidUpdate
  useEffect(() => console.log(input), [input]);

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

export default App;

What happens in the above example is the useEffect is called every time when the input value is changed.

I have covered the basics of react native function components and I hope this react native tutorial will help you.