Guías Técnicas

RefreshControl en React Native: Agrega Funcionalidad de Extracción y Actualización

  ¿Qué es RefreshControl y para qué se usa?

El componente RefreshControl en React Native se utiliza dentro de componentes como ScrollView o FlatList para agregar la funcionalidad de “deslizar para actualizar”. Es útil cuando quieres permitir que los usuarios actualicen el contenido de la lista o página al hacer un gesto de arrastre.

Estructura básica de RefreshControl

jsx 
import React, { useState } from 'react';
import { ScrollView, Text, RefreshControl, StyleSheet, View } from 'react-native';

const App = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    // Simula una llamada de actualización, y luego detiene la animación
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  };

return (
  <ScrollView
      style={styles.container}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }>
      <View style={styles.content}>
        <Text>Desliza hacia abajo para actualizar.</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  content: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 1000,
  },
});

export default App;


Propiedades más comunes de RefreshControl

  • refreshing: (booleano) Indica si el componente está en estado de “actualización” o no. Cuando es true, se muestra el indicador de carga.
  • onRefresh: (función) Función que se ejecuta cuando el usuario realiza el gesto de “deslizar para actualizar”. Es aquí donde puedes colocar la lógica para obtener datos nuevos o realizar una acción de actualización.
  • tintColor: (color) Color del indicador de carga (solo iOS).
  • title: (string) Texto que se muestra en el indicador de carga (solo iOS).
  • titleColor: (color) Color del texto del indicador de carga (solo iOS).

Ejemplo sin actualizar contenido

Si no deseas actualizar nada y solo quieres mostrar el gesto, puedes hacer una implementación muy simple de RefreshControl.

jsx 
import React from 'react';
import { ScrollView, Text, RefreshControl, StyleSheet } from 'react-native';

const App = () => {
return (
  <ScrollView
    style={styles.container}
    refreshControl={<RefreshControl refreshing={false} onRefresh={() => {}} />}>
    <Text>Desliza hacia abajo para actualizar.</Text>
  </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
});

export default App;

Personalizando RefreshControl

Puedes personalizar el comportamiento y la apariencia de RefreshControl agregando propiedades como tintColor, title, y titleColor.

jsx 
import React, { useState } from 'react';
import { ScrollView, Text, RefreshControl, StyleSheet } from 'react-native';

const App = () => {
const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
};

return (
  <ScrollView
    style={styles.container}
    refreshControl={
      <RefreshControl
        refreshing={refreshing}
        onRefresh={onRefresh}
        tintColor="blue"
        title="Actualizando..."
        titleColor="gray"
      />
    }>
    <Text>Desliza hacia abajo para actualizar el contenido.</Text>
  </ScrollView>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
});

export default App;
  RefreshControl

El componente RefreshControl es esencial para aplicaciones que requieren actualizar su contenido de manera eficiente al realizar el gesto de “deslizar para actualizar”. Su integración con ScrollView o FlatList hace que sea fácil implementar la funcionalidad de actualización sin tener que crear una solución personalizada desde cero.