Mostrar un loader en un modal en react-native

Enviado por peter el Vie, 24/01/2020 - 18:31
Imagen
Indicator en Modal con react-native y hooks (useState y useEffect)

Estoy comenzando con una aplicación en react-native, dentro de los requerimientos es mostrar un loading para que el usuario sepa que se está haciendo algo dentro de la app.
He realizado el siguiente tutorial para realizar esta pantalla de loading que esencialmente es un modal y dentro tiene un componente ActivityIndicator.

  • Para realizarlo he hecho una nueva aplicación con expo-cli, en un post anterior explico como crear una nueva aplicación en blanco.
    React Native: create new project with expo-cli
  • También hago uso de react-navigation y react-navigation-stack para realizar transición entre pantallas.
    Instalar el navigator con los comandos siguientes:
        yarn add react-navigation 
        npx expo-cli install react-native-gesture-handler /
         react-native-reanimated react-navigation-stack@1.10.3
     
  • Y por último creo el componente Indicator que es un componente personalizado que dentro tiene un modal y un componente ActivityIndicator como ya mencioné anteriormente.
     

Y para mostrarlo hago uso de dos hooks: useState y useEffect; para hace uso de estos hooks es necesario crear componentes funcionales ya que no funcionan dentro de componentes de clases.

Uso useState para actualizar la variable isVisible y alternar entre true y false, la función setState es la que se encarga de cambiar el estado de la constante isVisible ya que directamente no podemos alterar su valor.

Otra función que he creado es toggleVisible para que automáticamente al invocarla intercambie el valor de isVisible, esta la uso dentro del hook useEffect; useEffect se ejecuta después del primer renderizado y después de cada actualización. En la aplicación de ejemplo la constante isVisible se setea por default a true mostrando el modal y cuando useEffect detecta que se renderizo la pantalla entonces ejecuta el setTimeout que espera determinado tiempo para invocar a toggleVisible y cerrar el modal: ya que toogleVisible ejecuta setIsVisible dando como resultado false.

Pueden encontrar el repositorio con todo el código en github: indicator-reac-native

Saludos.

Añadir nuevo comentario

Filtered HTML

  • Falta el filtro. Se eliminará todo el texto
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd><php>
  • Saltos automáticos de líneas y de párrafos.