¿Cómo implementar Swipe to Refresh en React Native?

En este artículo, veremos cómo podemos usar la función Deslizar hacia abajo para actualizar en React Native. En las aplicaciones que muestran datos en tiempo real a los usuarios, como los valores criptográficos o la disponibilidad de un alimento en una aplicación de pedidos de alimentos, los usuarios pueden deslizar verticalmente hacia abajo la aplicación para actualizar manualmente los datos del servidor. 

Usaremos el componente RefreshControl dentro de una Vista de desplazamiento para agregar la funcionalidad de extracción para actualizar.

Creación de la aplicación React Native e instalación del módulo:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

 

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init demo-app

• Paso 3: ahora ve a la carpeta de tu proyecto, es decir, aplicación de demostración

  cd demo-app

Estructura del proyecto: Tendrá el siguiente aspecto.

Implementación: en este ejemplo, crearemos un componente de texto dentro de ScrollView que cambiará de color cuando el usuario deslice hacia abajo la aplicación. Cuando el usuario desliza el dedo hacia abajo, se llama a la función onRefresh , que convierte la propiedad controlada de actualización en verdadera . Por lo tanto, el usuario ahora puede ver un ícono de carga y después de 2000 ms, es decir, 2 segundos, el color del botón cambia a verde y la propiedad controlada de actualización cambia a falsa . Esto evita que el icono de carga desaparezca después de la ejecución de la función.

Nombre de archivo: App.js

import React, {useState} from 'react';
import {ScrollView, StyleSheet, Text, 
   View, RefreshControl} from 'react-native';
  
const App = () => {
  const [color, changeColor] = useState('red');
  const [refreshing, setRefreshing] = React.useState(false);
  
  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      changeColor('green');
      setRefreshing(false);
    }, 2000);
  };
  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} 
          onRefresh={onRefresh} />
      }
      style={styles.container}>
      <View
        style={{
          marginTop: 200,
          alignSelf: 'center',
          padding: 20,
          backgroundColor: color,
        }}>
        <Text style={{color: 'white'}}>
          Swipe Down to Change Color !
        </Text>
      </View>
    </ScrollView>
  );
};
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
  
export default App;

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.