#4 Crear componentes personalizados en React Native

Seguimos nuestro curso sobre React Native con este artículo para crear componentes personalizados en React Native. En la mayoría de ocasiones, nos será más que suficiente el uso de los componentes que vienen definidos dentro de React Native o alguna de las librerías que usemos con componentes como react-native-elements. Sin embargo, en algunas ocasiones nos será muy útil saber como crear componentes personalizados en React Native, porque queremos un comportamiento especial, o elementos que no están definidos en el componente existente.

¿Qué debemos hacer para crear componentes personalizados en React Native?

Como sabemos hasta ahora, los componentes de React Native los vamos a organizar dentro de un ficheros de Javascript. Así, tendremos un fichero por cada uno de los componentes que vayamos a desarrollar.

En el caso de nuestro proyecto de aplicación para móviles vamos a crear un componente estándar. Este componente mostrará que una petición se está ejecutando y el usuario tendrá que esperar.

Entrando en materia

Vamos a crear una carpeta dentro del proyecto que denominaremos «components», dónde meteremos el código de todos los componentes personalizados que vayamos a crear dentro del proyecto.

Dentro de esa carpeta vamos a crear un fichero al que llamaremos «LoadingComponent.js» y dónde vamos a definir el componente «LoadingComponent». El código fuente que vamos a escribir empieza por las importaciones de los elementos necesarios para desarrollarlo.

import React from "react";
import { StyleSheet, Text, View, ActivityIndicator } from "react-native";
import { Overlay } from "react-native-elements/dist/overlay/Overlay";

Primero importamos React como habitualmente hacemos con todos los ficheros definidos anteriormente. Posteriormente vamos a importar la hoja de estilos (StyleSheet), el componente text (Text), el componente vista (View) y el componente ActivityIndicator, que es un círculo que indica que se está desarrollando una actividad.

export default function LoadingComponent(props) {
  const { visible, text } = props;

En el código vamos a definir el nombre del componente que será «LoadingComponent». Este componente recibirá el parámetro «props». Dentro de la función vamos a extraer dos valores: «visible» que nos indicará si el componente estará visible; y «text» que contiene el texto que vamos a mostrar en el componente.

return (
    <Overlay
      isVisible={visible}
      windowBackgroundColor="rgba(0, 0, 0, 0.5"
      overlayBackgroundColor="transparent"
      overlayStyle={styles.overlay}
    >
      <View style={styles.view}>
        <ActivityIndicator size="large" color="#00a680" />
        {text && <Text style={styles.text}>{text}</Text>}
      </View>
    </Overlay>
  );
}

Por último, vamos a devolver el componente. En esencia devolvemos un Overlay que contiene el parámetro «isVisible» con el valore de nuestro parámetro «visible». A continuación le damos un valor a los parámetros:

• windowBackgroundColor: Color de fondo de la ventana. Queremos que sea semitransparente, por lo que damos el valor de 0.5 a valor de alfa, que es el último valor del color (rgba, Red-Green-Blue-Alpha).
• overlayBackgroundColor: Color de fondo del overlay. Indicamos que es transparente («transparent»).
• overlayStyle: Estilo que va a usar en el overlay.

Posteriormente, usamos una vista «View» a la que le aplicamos el estilo correspondiente. Usaremos un componente «ActivityIndicator» con un tamaño grande y un color especificado en el atributo color.

Definiendo el estilo de nuestro componente

Una vez hayamos definido la funcionalidad de nuestro componente personalizado, tendremos que definir el estilo que queremos aplicarle. Es decir, vamos ahora a crear el estilo gráfico del componente. Normalmente, deberemos previamente tener un estilo que vamos a ir aplicando a toda nuestra aplicación para smartphone.

Para crear el estilo vamos a definir una constante de nombre «styles» que va a contener todos los estilos a aplicar. Esta constante la creamos con el método «StyleSheet.create». Para cada elemento de nuestro componente vamos a ir creando el estilo como un key del objeto.

Para el Overlay creamos un estilo dónde definimos un alto de 100 píxeles, un ancho de 200 píxeles. Deinifimos un color de fondo «#fff» y un color del borde «#00a680». Por último, el borde tendrá un ancho de 2 píxeles y un borde de 10 píxeles de tamaño.

Para la vista definimos que la vista va a utilizar todo el espacio disponible, ya que definimos un valor flex de 1, y puesto que es la única vista que vamos a definir ocupará 1/1 partes que definimos con el flex. Si definiéramos más vistas con otros valores de flex tendríamos que sumar todos los valores (N) para saber cuánto ocuparía esta vista (1/N). Además, indicamos que los elementos estarán alineados al centro (alignItems: «center») y justificados al centro (justifyContent: «center»).

Por último, creamos el estilo del texto que se puede definir en nuestro componente. Para ello, le decimos que el color de texto será «#00a680» que es el color corporativo que hemos elegido. Para evitar problemas con carácteres en minúsculas y mayúsculas vamos a pasar todo el texto a mayúsculas (textTransform: «uppercase»). Además indicamos un margen con respecto al borde superior de 10 píxeles (marginTop: 10).

const styles = StyleSheet.create({
  overlay: {
    height: 100,
    width: 200,
    backgroundColor: "#fff",
    borderColor: "#00a680",
    borderWidth: 2,
    borderRadius: 10,
  },
  view: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "#00a680",
    textTransform: "uppercase",
    marginTop: 10,
  },
});

Visualizando el resultado

Ya hemos definido nuestro componente personalizado para React Native. Si lo empleamos en cualquier operación de carga de datos podremos visualizarlo tal y como aparece en la siguiente imagen.

Resumiendo

Hemos visto en el presente artículo un proceso sencillo para crear componentes personalizados en React Native. Podemos emplear esta forma para crear cualquier componente que no encontremos en la librería estándar de componentes o en cualquiera de la que podemos encontrar en Internet.

Si has llegado hasta aquí y tienes alguna sugerencia no dudes en escribir en el formulario de más abajo. También puedes seguir leyendo otros artículos del presente curso. El código usado en este artículo y en el curso lo puedes consultar en nuestro repositorio de código:

Sugerencias