REACT NATIVE: How can I change the example code to function component with hooks?

Question

How can I change the example code to function component with hooks? In my example I want to use function component and also hooks but I am new to it and would be happy to help with this subject. The code is an example of modals. The code allows to perform several opening types of modals and I would like to know how to change it to a function component.

import React, { Component } from 'react';
import { Text, TouchableOpacity, StyleSheet, View } from 'react-native';
import Modal from 'react-native-modal';


export default class Example extends Component {
  state = {
    visibleModal: null,
  };

  _renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.button}>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  );

  _renderModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello!</Text>
      {this._renderButton('Close', () => this.setState({ visibleModal: null }))}
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        {this._renderButton('Default modal', () => this.setState({ visibleModal: 1 }))}
        {this._renderButton('Sliding from the sides', () => this.setState({ visibleModal: 2 }))}
        {this._renderButton('A slower modal', () => this.setState({ visibleModal: 3 }))}
        {this._renderButton('Fancy modal!', () => this.setState({ visibleModal: 4 }))}
        {this._renderButton('Bottom half modal', () => this.setState({ visibleModal: 5 }))}
        <Modal isVisible={this.state.visibleModal === 1}>
          {this._renderModalContent()}
        </Modal>
        <Modal
          isVisible={this.state.visibleModal === 2}
          animationIn={'slideInLeft'}
          animationOut={'slideOutRight'}
        >
          {this._renderModalContent()}
        </Modal>
        <Modal
          isVisible={this.state.visibleModal === 3}
          animationInTiming={2000}
          animationOutTiming={2000}
          backdropTransitionInTiming={2000}
          backdropTransitionOutTiming={2000}
        >
          {this._renderModalContent()}
        </Modal>
        <Modal
          isVisible={this.state.visibleModal === 4}
          backdropColor={'red'}
          backdropOpacity={1}
          animationIn={'zoomInDown'}
          animationOut={'zoomOutUp'}
          animationInTiming={1000}
          animationOutTiming={1000}
          backdropTransitionInTiming={1000}
          backdropTransitionOutTiming={1000}
        >
          {this._renderModalContent()}
        </Modal>
        <Modal isVisible={this.state.visibleModal === 5} style={styles.bottomModal}>
          {this._renderModalContent()}
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'lightblue',
    padding: 12,
    margin: 16,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 22,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  bottomModal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
});

Answer 1

It's actually very simple, note the changes I made:

• no more this
• no more render function
• use of useState

import React, { useState } from "react";

export default function Example() {
  const [visibleModal, setVisibleModal] = useState(null)

  _renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.button}>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  )

  _renderModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello!</Text>
      {_renderButton('Close', () => setVisibleModal(null))}
    </View>
  )

  return (
    <View style={styles.container}>
      {_renderButton('Default modal', () => setVisibleModal(1))}
      {_renderButton('Sliding from the sides', () => setVisibleModal(2))}
      {_renderButton('A slower modal', () => setVisibleModal(3))}
      {_renderButton('Fancy modal!', () => setVisibleModal(4))}
      {_renderButton('Bottom half modal', () => setVisibleModal(5))}
      <Modal isVisible={visibleModal === 1}>
        {_renderModalContent()}
      </Modal>
      <Modal
        isVisible={visibleModal === 2}
        animationIn={'slideInLeft'}
        animationOut={'slideOutRight'}
      >
        {_renderModalContent()}
      </Modal>
      <Modal
        isVisible={visibleModal === 3}
        animationInTiming={2000}
        animationOutTiming={2000}
        backdropTransitionInTiming={2000}
        backdropTransitionOutTiming={2000}
      >
        {_renderModalContent()}
      </Modal>
      <Modal
        isVisible={visibleModal === 4}
        backdropColor={'red'}
        backdropOpacity={1}
        animationIn={'zoomInDown'}
        animationOut={'zoomOutUp'}
        animationInTiming={1000}
        animationOutTiming={1000}
        backdropTransitionInTiming={1000}
        backdropTransitionOutTiming={1000}
      >
        {_renderModalContent()}
      </Modal>
      <Modal isVisible={visibleModal === 5} style={styles.bottomModal}>
        {_renderModalContent()}
      </Modal>
    </View>
  )
}

Answer 2

Complete Functional Component Code:

import React, { useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View } from "react-native";
import Modal from "react-native-modal";

const Example = () => {
  const [visibleModal, setVisibleModal] = useState(null);

  const _renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.button}>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  );

  const _renderModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello!</Text>
      {_renderButton("Close", () => setVisibleModal(null))}
    </View>
  );

  return (
    <View style={styles.container}>
      {_renderButton("Default modal", () => setVisibleModal(1))}
      {_renderButton("Sliding from the sides", () => setVisibleModal(2))}
      {_renderButton("A slower modal", () => setVisibleModal(3))}
      {_renderButton("Fancy modal!", () => setVisibleModal(4))}
      {_renderButton("Bottom half modal", () => setVisibleModal(5))}
      <Modal isVisible={visibleModal === 1}>
        {_renderModalContent()}
      </Modal>
      <Modal
        isVisible={visibleModal === 2}
        animationIn={"slideInLeft"}
        animationOut={"slideOutRight"}
      >
        {_renderModalContent()}
      </Modal>
      <Modal
        isVisible={visibleModal === 3}
        animationInTiming={2000}
        animationOutTiming={2000}
        backdropTransitionInTiming={2000}
        backdropTransitionOutTiming={2000}
      >
        {_renderModalContent()}
      </Modal>
      <Modal
        isVisible={visibleModal === 4}
        backdropColor={"red"}
        backdropOpacity={1}
        animationIn={"zoomInDown"}
        animationOut={"zoomOutUp"}
        animationInTiming={1000}
        animationOutTiming={1000}
        backdropTransitionInTiming={1000}
        backdropTransitionOutTiming={1000}
      >
        {_renderModalContent()}
      </Modal>
      <Modal isVisible={visibleModal === 5} style={styles.bottomModal}>
        {_renderModalContent()}
      </Modal>
    </View>
  );
};

export default Example;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    backgroundColor: "lightblue",
    padding: 12,
    margin: 16,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)",
  },
  modalContent: {
    backgroundColor: "white",
    padding: 22,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)",
  },
  bottomModal: {
    justifyContent: "flex-end",
    margin: 0,
  },
});

Answer 3

const CompenentName = () => {

     const [visibleModal, setModalVisibility] = React.useState(null);

     const _renderButton = ({ text, onPress }) => (
          <TouchableOpacity onPress={onPress}>
               <View style={styles.button}>
                    <Text>{text}</Text>
               </View>
          </TouchableOpacity>
     );

     const _renderModalContent = () => (
          <View style={styles.modalContent}>
               <Text>Hello!</Text>
               <_renderButton text='Close' onPress={() => setModalVisibility(null)} />
          </View>
     );

     return (
          <View style={styles.container}>
               <_renderButton text='Default modal' onPress={() => setModalVisibility(1)} />
               <_renderButton text='Sliding from the sides' onPress={() => setModalVisibility(2)} />
               <_renderButton text='A slower modal' onPress={() => setModalVisibility(3)} />
               <_renderButton text='Fancy modal!' onPress={() => setModalVisibility(4)} />
               <_renderButton text='Bottom half modal' onPress={() => setModalVisibility(5)} />
               <Modal isVisible={visibleModal === 1}>
                    <_renderModalContent />
               </Modal>
               <Modal
                    isVisible={visibleModal === 2}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}
               >
                    <_renderModalContent />
               </Modal>
               <Modal
                    isVisible={visibleModal === 3}
                    animationInTiming={2000}
                    animationOutTiming={2000}
                    backdropTransitionInTiming={2000}
                    backdropTransitionOutTiming={2000}
               >
                    <_renderModalContent />
               </Modal>
               <Modal
                    isVisible={visibleModal === 4}
                    backdropColor={'red'}
                    backdropOpacity={1}
                    animationIn={'zoomInDown'}
                    animationOut={'zoomOutUp'}
                    animationInTiming={1000}
                    animationOutTiming={1000}
                    backdropTransitionInTiming={1000}
                    backdropTransitionOutTiming={1000}
               >
                    <_renderModalContent />
               </Modal>
               <Modal isVisible={visibleModal === 5} style={styles.bottomModal}>
                    <_renderModalContent />
               </Modal>
          </View>
     );
}

const styles = StyleSheet.create({
     container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
     },
     button: {
          backgroundColor: 'lightblue',
          padding: 12,
          margin: 16,
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius: 4,
          borderColor: 'rgba(0, 0, 0, 0.1)',
     },
     modalContent: {
          backgroundColor: 'white',
          padding: 22,
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius: 4,
          borderColor: 'rgba(0, 0, 0, 0.1)',
     },
     bottomModal: {
          justifyContent: 'flex-end',
          margin: 0,
     },
});

export default CompenentName;