Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

200
Visualizações
React Native, how to implement pull to refresh with FlatList?

Here is my attempt:

import {View, Text, FlatList, Button} from 'react-native';
import React, {useState} from 'react';

const List = () => {
  const data = ['test1', 'test2', 'test3'];
  const [test, setTest] = useState(data);
  return (
    <View style={{alignItems: 'center'}}>
      <Text>List</Text>
      <FlatList
        data={data}
        numColumns={1}
        renderItem={({item, index}) => <Text>{item}</Text>}
        // onRefresh={}

        refreshing={false}
      />
      <Button title="addData" onPress={() => data.push('tset4')} />
      <Button title="show" onPress={() => console.log(data)} />
      <Button title="test" onPress={() => console.log(data)} />
    </View>
  );
};

export default List;
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Here how you would implement that (I added comments in the code):

import {View, Text, FlatList, Button} from 'react-native';
import React, {useState, useEffect} from 'react';

const List = () => {
  const data = ['test1', 'test2', 'test3'];
  const [test, setTest] = useState(data);
  // set up this boolean state
  const [refreshing, setRefreshing] = useState(false);

  // set up this useEffect
  useEffect(()=>{
    if(refreshing){
     // do your heavy or asynchronous data fetching & update your state
     setTest([...test, "test4"]);
     // set the refreshing back to false
     setRefreshing(false);
    }
  },[refreshing])

  return (
    <View style={{alignItems: 'center'}}>
      <Text>List</Text>
      <FlatList
        data={data}
        numColumns={1}
        renderItem={({item, index}) => <Text>{item}</Text>}
        refreshing={refreshing}
        onRefresh={()=>setRefreshing(true)}
      />
      <Button title="addData" onPress={() => data.push('tset4')} />
      <Button title="show" onPress={() => console.log(data)} />
      <Button title="test" onPress={() => console.log(data)} />
    </View>
  );
};

export default List;
about 4 years ago · Juan Pablo Isaza Relatório

0

You are missing the basics of React. Check this example.

https://snack.expo.dev/@nazrdogan/233ac3

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda