Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

202
Views
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 answers
Answer question

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 Report

0

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

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!