I need to do some actions when the user has finished refreshing the data on my FlatList with onRefresh props.
I didn't find anything on the doc, so I was wondering if there was any way to do something like that?
Maybe you are looking for something like this
https://medium.com/#pateldhara248/flatlist-with-loadmore-and-pull-to-refresh-582d48eca60b.
It says that you need to provide refreshControl prop to FlatList which will be your Component displayed when the flatList is pulled to refresh. and to this component you will provide prop onRefresh which will be a function called when the Flatlist is pulled to refresh so in that function you can call your API to fetch data for the FlatList.
Related
I have a simple question: why is onViewableItemsChanged called at initial render without a horizontal flatlist being even visible? This flatlist is only shown when scrolling to it.
How can I fix this?
Thank you!
It is also possible for onViewableItemsChanged to be called during the initial render of a FlatList, even if the list is not yet visible on the screen. This can happen if the initialNumToRender prop of the FlatList is set to a value greater than 0, causing the FlatList to render more items than the ones that are currently visible on the screen.
In such cases, the onViewableItemsChanged callback will receive the list of viewable items that have been rendered, but they will not yet be visible to the user. This is the expected behavior of the FlatList component, and it is designed to optimize the performance of the list by pre-rendering items that are likely to become visible in the near future.
If you want to avoid having onViewableItemsChanged being called during the initial render, you can set the initialNumToRender prop to 0, or use other techniques to control the visibility of the FlatList component, such as conditional rendering based on a state variable or a prop passed from the parent component.
I have put console log inside of my functional component file. In this file render whenever the API called. If I called API in some other file and the API not related to that file still got logs. I am not sure why. I have checked useEffect and usestate but no clue. Even search from google no clue.
I am using Usestate to store and useEffect to reloaded the the page when data change
I am using apisauce to call the API
React native navigation bottomtab to navigate the screen
Using React.memo but still page rendered.
Any one please help me to resolve this issue. because I am new to react native.
React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
However, there may be cases where the render() method depends on some other data. After the initial mounting of components, a re-render will occur when:
A component’s setState() method is called.
A component’s forceUpdate() method is called.
Warning: You should normally try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().
I am use bottom navigation, i get value form asyncStorage in componentDidMount but every time i have to hard refresh for new value, when i please first screen to second screen and get new value in first screen but new value is not updated. so how refresh first screen with new value
In bottom navigation the component does not go out of scope. In other words, component does not reload so componentDidMount() won't be called again. Better to use state management like Redux or Mobx. Let them handle the changes instead of reading from asyncStorage. If a Mobx Store gets updated it'll automatically refresh your values wherever you are accessing it.
ComponentDidMount is executed only at the start. So if you want to update data again and again after a specified time you might have to use something like setInterval in componentDidMount or if you want to fetch new data whenever a user clicks on something then you can do that by making a new separate function which would fetch data and update the state.
Whenever you update the state, the component almost instantly rerender.
Try Setting unmountOnBlur to true in navigation options
So every time the screen goes out of focus it is unmounted and when you come back to screen it is mounted again and data will be refreshed
Using unmountOnBlur - Bottom Navigation
I am trying to refresh a particular cell/row in a flatlist. How can i just refresh a single cell when data is loaded. And after refreshing display the data?
Is it possible to refresh a particular row in a view of react-native? For e.g i'm displaying images in a row nested inside <View/>.
You can try extraData in FlatList to update a particular item in flatlist.
When state is changed the flatlist will rerender.
<FlatList
extraData={this.state}
data={this.state.asPerCode}
renderItem={this.renderPost}
/>
you can check about extra data in react native flatlist docs.
Hope it helps!
I believe you might be looking for React.PureComponent which implements a shallow prop and state comparison to decide if rerender is needed. You can achieve this with shouldComponentUpdate() on React.Component too.
There is already an example in FlatList's docs that demonstrate how you can use PureComponent to render your list, just scroll down abit and look for the "more complex example" :)
If you prefer to use a Functional Component instead of a Class Component, checkout React.memo, which is similar to React.PureComponent but for Functional Components. Hope it helps.
I am building an app where I am using Redux and the React-Navigation library. I have a list of workouts in a FlatList:
<FlatList
style={{ backgroundColor: colors.background }}
data={this.props.workoutsList}
renderItem={({ item }) =>
<ListItem workout={item} onPress={() => this.props.navigation.navigate('Workout', item)} />
}
keyExtractor={(item) => item.id}
/>
This shows my list properly, and I can navigate to the specific Workout page for each row I click on, and am provided the attached workout on each click. On this specific workout page, I have an Edit Workout form where users can, for example, update the name and time of the workout.
All of this is no problem...the issue I have comes when I press the back button on the menu that takes me back to the main list of all workouts. The FlatList is still showing the old data and is a source of my problem. It is caching this data so my new saves are not being shown, and as a consequence when I click on the list item again, it attaches the old workout information rather than the newest one I just saved. (hope that makes sense)
I have seen a somewhat similar question: React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child? but it does not quite encapsulate my main question:
Is it possible where a FlatList can update a specific row from a redux setup, while also maintaining it's scroll position?
I see this working extremely nicely on the Facebook app....as someone is scrolling down their Wall, let's say they click on the item saying "xx Comments". This will navigate the app to a page showing only this post. You can Like/Comment and when you press the back arrow, you are brought back exactly in the scroll position of the Wall you were before AND the number of likes/comments has been update to show your contribution. Is this possible in React Native?
If this is not possible...does anybody know how to at least refresh a page when navigating from a back button in React-Navigation?
EDIT I am open to using another navigation library if there is a better setup somewhere else!
UPDATE
I have attempted several ways to solve this problem, one way I tried was this:
When I made a successful save of the form, I dispatched an action of 'NEEDS_REFRESHING'. This set a redux prop that I picked up on the main FlatList page. In the render of that page, I had an:
if (this.props.needsRefreshing) {
console.log('Needs Refreshing');
this.props.getWorkouts();
}
I was seeing the console, and my FlatList page was properly refreshing (it wasn't bringing me back to the correct scroll position as it just refreshed the main list). but I always got a warning from React Native saying:
Cannot update during an existing state transition (such as within
`render` or another component's constructor). Render methods should be
a pure function of props and state; constructor side-effects are an
anti-pattern, but can be moved to `componentWillMount`.
When I moved this to componentWillMount, the proper refreshing changes were then never getting called and even a console.log in componentWillMount would not show up.
Have you try scrollToIndex(params: object) method? https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex
And also if you want to update your data inside flatList you should add extraData in Props
https://facebook.github.io/react-native/docs/flatlist.html#extradata
If you use react-navigation goBack() to a screen, that screen will never trigger componentWillMount because this screen never unmount, so please use redux instead.