Pasar una función a un componente y usar setState sin que se invoque automaticamente en React Native

Tiempo de lectura: 2 minutos

A veces, cuándo queremos pasar una función a un método de un componente ya creado y necesitamos actualizar un onPress utilizando un setState, resulta que el método que hemos pasado se invoca antes de utilizar el onPress.

Si queremos solucionar este problema, tendremos que hacer lo siguiente:

Tenemos el siguiente componente botonCustom.js:

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

var crearBoton;
const ViewBoton = (props) => {

    const {} = props;

    const [onPress, setOnPress] = useState(null);

    crearBoton = ({ onPress }) => {
        setOnPress(() => () => { onPress() });
    };

    return (
      <View>
        <TouchableOpacity onPress={onPress}>
         <Text>Pulsa</Text>
        </TouchableOpacity>
      </View>
    );
};

const construirBoton = ({ onPress }) => {
    crearBoton({ onPress});
};

export default ViewBoton ;
export { construirBoton };

Hemos creado una función crearBoton, que recibirá la variable onPress que contiene una función que se va a invocar cuándo se pulse en el TouchableOpacity creado.

La parte más importante es en este código:

setOnPress(() => () => { onPress() });

Aquí asignamos el método onPress() a una variable de estado, y lo asignamos poniendo doble () => ()=> de esta forma aseguramos que no se invoque al renderizar la capa del setOnPress.

Finalmente, exportamos la función que queremos invocar desde otro View (export { construirBoton };).

Ahora, para invocar al elemento customizable lo llamaremos de esta forma:

• Importamos el elemento en nuestra screen.js (o donde queramos utilizarlo)

import Boton, { construirBoton } from '../botonCustom';

• Asignamos el boton a la vista:

<View>
   <Boton />

• Ahora podemos modificar el click del botón desde cualquier función javascript de la siguiente forma:

 construirBoton({
       onPress: () => { alert("Click modificado") }
            });

Y podemos comprobar que se invoca correctamente.