Aquí está mi intento:
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;Aquí cómo implementaría eso (agregué comentarios en el código):
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;Te estás perdiendo los conceptos básicos de React. Mira este ejemplo.