I am new to ReactNative and have encountered an issue regarding page refreshing. I have some filters in my screen and will like the page to refresh once any of these filters are pressed, but am unable to find any guides on how to do so. I have searched endlessly but only found numerous guides on refreshing with pulldown, and I feel like the solution has something to do with React.useEffect but am unfamiliar with that.
The important parts of my code are as below:
The TouchableOpacity component to trigger the refresh:
<TouchableOpacity
style={styles.filterButton}
onPress={() => {
sortByRating()
}}
>
where sortByRating() is a function to sort my eateriesToShow array based on their ratings.
The FlatList I want to be refreshed on filter:
<FlatList
data={eateriesToShow}
keyExtractor={item => item.id.toString()}
renderItem={renderItem}
showsVerticalScrollIndicator={true}
/>
</View>
)
}
Currently my eateriesToShow array gets sorted, but the FlatList does not get refreshed. Any help will be appreciated.
You want your flatist to update when the data is changed. refreshing your flautist is another thing. So what I suggest you to do is use the useState hook.
const [yourList, setYourList] = useState<string | null>(null)
like this (you don't need the types if you are using javascript instead of typescript)
and then when sorting by rating you should do setYourList(newEateriesArray)
and your flautist should update.
Related
I'm browsing through StackOverflow in search of someone experiencing my same issue, however couldn't find much. I'm fetching flatlist data from backend and i need the empty text placeholder component to disappear when flatlist is not empty, however it always stays there and never disappears even when data is correctly fetched in the flatlist. How can i solve this?
Ps. When assigning dummy data to the flatlist, this issue does not happen.
<FlatList
ListEmptyComponent={() => (<Text style={styles.emptyListText}>No upcoming trips to show.</Text>)}
data={trips}
renderItem={({ item }) => <MyTripsPostItem post={item} onPress={() => navigation.navigate("Post Screen")}
/>}
/>
What I do is that I check if the query is loading and if it is not then I show my View ListEmptyComponent.
ListEmptyComponent={
!isLoading && (
<View style={styles.containerEmptyList}>
// things
</View>
)
}
I use react-query which provide a "isLoading" variable but you can do the same in your function query with useState
Edit : Also the function () => is not needed for that props.
Use trips.length instead of trips.
// checks if trips size is more than 0
!trips.length && <ListEmptyComponent />
while
// checks if trips is undefined or null
trips && <ListEmptyComponent />
In your case, I presume you set a default value to trips which is an empty array / [], so, it wasn't undefined or null.
I am making my own app using react-native
I have some difficulties to do notice function.
We have board and comments, if we get notice that someone writes comment, I want to go to that comments in flatlist comments (there can be many comments in board, so if we just go to board without focusing notice comments, user may be hard to find comments). I searched some example of scrollindex method in flatlist. But I want to go directly without button or input. We have comment id in notice model. So first I think that if we compare comment id in flatlist and set state, we can save index of that comments. But setState() doesn't work in flatlist because of error "cannot update a component from inside the function body of a different component."
And second, i don't know where we put the function scrollToIndex() because it may move after rendering is finished. But i don't know that state.
IF you know how to solve that problem pleases help me!!
(you can think instagram comment notice, if we click them , we can see that comment, no matter where they were, becauses it automatically move to that comments
getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)
getColor(index) {
const mod = index%3;
return COLORS[mod];
}
scrollToIndex = () => {
let randomIndex = Math.floor(Math.random(Date.now()) * this.props.data.length);
this.flatListRef.scrollToIndex({animated: true, index: randomIndex});
}
<FlatList
style={{ flex: 1 }}
ref={(ref) => { this.flatListRef = ref; }}
keyExtractor={item => item}
getItemLayout={this.getItemLayout}
initialScrollIndex={50}
initialNumToRender={2}
renderItem={({ item, index}) => (
<View style={{...style, backgroundColor: this.getColor(index)}}>
<Text>{item}</Text>
</View>
)}
{...this.props}
/>
It is is simple code that use scrolltoindex. It can move to random index item
But I want to move certain item doing switch screen. In noticescreen, if we click notice , we need to move board that have that comments. Then we scroll to the comments to show user. We have board id and comments id in notice model. It is not hard to move to the board. But scroll to the comments is hard to me. Any solution?? please
Good day guys , is there anyway I can control how far the flatlist can scroll ? I'm trying to make an image viewer. When there is multiple image , the user can scroll to the 2nd image without reaching the 3rd image. Thank you. Expected outcome :
Either you can use a library like react native snap carousel
or use the function of scrollToIndex inside any function ,so that you can control which index the user goes ==
scrollToNext(){
this.flatListRef.scrollToIndex({animated: true, index: newIndex});
}
<Flatlist
ref={ref => {
this.flatListRef = ref;
}}
/>
hope it helps. feel free for updates
Im using flatlist for displaying data. each and every time I have to go back and come to same page for displaying newly added data. anyone can you suggest data without refresh the page.
Like this, implement refresh control/ pull to refresh so that you can refresh rather than going back ,
<FlatList
data={this.props.notificationReducer.notifications}
renderItem={({item, index}) => {
return this.renderEachCard(item.description, item.added_on, index);
}}
refreshControl={
<RefreshControl
refreshing={this.props.notificationReducer.pullToRefresh}
onRefresh={this.getNotificationData}
/>
}
/>
Hope you get it. feel free for doubts
I am trying to use RN flatlist to show a large list of contact names (100+ items). I keep getting the following warning:
VirtualizedList: You have a large list that is slow to update - make
sure your renderItem function renders components that follow React
performance best practices like PureComponent, shouldComponentUpdate,
etc.
Certain animated UI items get very sluggish whenever the list has more than 50 items in it, however the sluggishness gets a lot better once I scroll all the way down to the bottom of the list
I grab all the contacts in one go and store them in an array in a redux store. I have tried using props like initialNumToRender but cant seem to improve performance. Is there anything I can do to improve my list? I have never used RN FlatList before so any tips would be appreciated
Here is my list related code:
renderRow = ({item}) => {
return (
<ListItem
title={item.firstName}
chevronColor={colors.tertiary}
/>
)
}
<FlatList
data={this.props.contacts}
renderItem={this.renderRow}
keyExtractor={item => item.id}
initialNumToRender={10}
removeClippedSubviews={true}
/>
this.props.contacts is the array of contact objects in the redux store
I ended up implementing recyclerlistview and followed this tutorial which explained how to get it working since the documentation is lacking. Its working miles better than flat list did. Very fast and smooth.
You can follow these code implementations.
For VIEWABILITY_CONFIG follow this link
const VIEWABILITY_CONFIG - {
minimumViewTime: 300,
viewAreaCoveragePercentThreshold: 100,
waitForInteraction
}
const yourItemHeight = 108;
class yourClass extends React.PureComponent
...
_getItemLayout(data, index) {
return { lenght: yourItemHeight, offset: yourItemHeight * index, index }
}
<FlatList
data={this.props.contacts}
renderItem={this.renderRow}
keyExtractor={item => item.id}
getItemLayout: {this._getItemLayout}
initialNumToRender={10} // Vary According to your screen size take a lumsum according to your item height
removeClippedSubviews={true}
viewabilityConfig={VIEWABILITY_CONFIG}
/>