I have a FlatList that fetches a list of jobs from the API. When the end of the list is reached on scrolling, the next set of jobs is fetched from the API and appended to the job list.
The following is the code for FlatList
<View style={localStyles.container}>
<FlatList
data={jobList.jobs}
renderItem={renderJobList}
keyExtractor={item => "" + item.jid}
onEndReachedThreshold={0.2}
onRefresh={() => { getJobsList(true) }}
refreshing={fetchingStatus}
extraData={jobList.jobs, fetchingStatus, savedIds, stateChanged}
ListFooterComponent={<ProgressIndicator inProgress={fetchingStatus} />}
onEndReached={() => {
getJobsList(false);
}} />
</View>
jobList, fetchingStatus, savedIds, stateChanged - these 4 are state variables
In the JobsListClass, the following is the code for appending the data -
request.processRequest().then((value) => {
this.jobs = this.jobs.concat(value.jarr)
...
this.notify();
}).catch((error) => {
console.log("campus err", error)
...
this.notify();
});
Have tried Array.prototype.push.apply(this.jobs, value.jarr); instead of jobs.concat in the above code but did not help.
I can‘t see what exactly cause the jumping, I would need more code to determine where this happen.
Take a look at the infinite scrolling expo snack
Related
I have a Flatlist that displays cards and information in it, I have to apply pagination to it i.e at first only 3 cards should load on reaching end more 3 cards should load.
Below is my code :
<FlatList
style={{ height: HEIGHT, flex: 1 }} // declared a HEIGHT const with value of windows height
data={this.state.show_data_list} // data to be shown in flatlist
keyExtractor={(x, i) => x + i}
extraData={this.state.refresh} // to sort the data based on condition.
initialNumToRender={3} // data to be loaded initially
onEndReached={() => this.loadMoreData()} // function which add 3 more items to show_data_list state to be shown in flatlist
onEndReachedThreshold={10}
renderItem={({ item }) =>
<ContentCard
// content to display
/>
}
/>
As soon as the view renders all data is shown, in other words, onEndReached is called before I reach at the end.
Can any of u guys know why this is happening ????
Implement onMomentumScrollBegin or check the distance from the end
onEndReached={({ distanceFromEnd }) => {
if (distanceFromEnd < 0) return;
}
Please refer link
I want to make a fetch request inside renderItem's componentDidMount method every time the list is refreshed, but the FlatList calls the lifecycle methods only once.
The list
<FlatList data={this.state.dataSource}
renderItem={({item}) => <ListItem imageHref={item.imageHref} />}
keyExtractor={(item, index) => index.toString()}
refreshing={this.state.refreshing}
onRefresh={/* Fetching data from JSON and updating dataSource[] */} />
Inside ListItem component:
render() {
return <Image source={this.state.imageSource} />
}
componentDidMount() {
fetch(this.props.imageHref)
.then(response => {
if(response.status !== 200)
this.setState({imageSource: require('../assets/default-image.png')
else
this.setState({imageSource: {uri: this.props.imageHref}});
}
});
}
I tried calling fetch inside render method but that didn't work either.
I basically want the imageSource to update every time the list is refreshed. Please help.
Because of that ListItem was not change. You have to fetch new icon in onRefresh and pass it into ListItem then all data will be changed when ListView will refresh... if you want to do it inside ListItem you need some interaction with that specific item, for example, some button and if user press it fetch and change icon
i didn't know when your list refreshed , but you can try this this.forceUpdate() you can learn more here force component to re render
How to solve blink image when back to first item in react-native-snap-carousel ? I try to look for many examples but fail all.
This is my script :
renderSlider ({item, index}) {
return (
<View style={styles.slide}>
<Image source={{uri: item.cover}} style={styles.imageSlider} />
</View>
);
}
<Carousel
ref={(c) => { this._slider1Ref = c; }}
data={data}
renderItem={this.renderSlider}
sliderWidth={width}
itemWidth={(width - 30)}
itemWidth={(width - 30)}
inactiveSlideScale={0.96}
inactiveSlideOpacity={1}
firstItem={0}
enableMomentum={false}
lockScrollWhileSnapping={false}
loop={true}
loopClonesPerSide={100}
autoplay={true}
activeSlideOffset={50}
/>
the comple documentation you can find here and about the plugin api you can find here.
Please anyone help me.
Thanks.
I had the same issue when loop={true} was set.
We came up with this workaround:
We maintained the activeSlide value in a state, and created a reference of Carousel refCarousel.
const [activeSlide, setActiveSlide] = useState(0);
const refCarousel = useRef();
Then we added code in useEffect to manually move the carousel item to the first one back when it reaches the end with a delay of 3500 milliseconds which is also set to autoplayInterval props.
This way, we achieved the looping effect.
useEffect(() => {
if (activeSlide === data.length - 1) {
setTimeout(() => {
refCarousel.current.snapToItem(0);
}, 3500)
}
}, [activeSlide]);
Below is the Carousel component declaration. Only the relevant props are shown here.
<Carousel
ref={refCarousel}
...
//loop={true}
autoplay={true}
autoplayDelay={500}
autoplayInterval={3500}
onSnapToItem={(index) => setActiveSlide(index)}
/>
use React Native Fast Image if you are facing blinking issue.
When I use onEndReached function in FlatList, it gets called automatically.
Below is the link of this issue.
Link
Is there a solution available for it or any alternative in iOS?
Edited:
Below is the code I tried but this doesn't seems to work.
constructor(props){
super(props);
this.state = {
flatListReady:false
}
}
loadMore(){
if(!this.state.flatListReady){
return null;
}
else{
alert("End Reached")
}
}
_scrolled(){
this.setState({flatListReady:true});
}
render() {
return (
<Layout style={{ flex: 1 }}>
<FlatList
data={listData}
renderItem={({item}) => this._renderItem(item)}
keyExtractor={(item, index) => item.key}
onEndReached={() => this.loadMore()}
onEndReachedThreshold={0.5}
onScroll={() => this._scrolled()}
/>
</Layout>
Try this,
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
//Call pagination function
}
}}
Sometimes things don't work like they are supposed to, at the end of the day it's not native code where, so may the order of your components or the fact that the Flatlist is encapsulated in a component that is not intended to be, or there is some property should be passed to the Flatlist component itself to activate the onEndReached callback properly.
I've faced this myself, and I didn't know what to do to make it work properly.
A beautiful workaround is derived from the fact the Flatlist inherits ScorllView properties. so you could use the onScroll property to detect if the end has reached or not.
<FlatList
data={this.props.dashboard.toPreviewComplaints}
onScroll={({nativeEvent})=>{
//console.log(nativeEvent);
if(!this.scrollToEndNotified && this.isCloseToBottom(nativeEvent)){
this.scrollToEndNotified = true;
this.loadMoreData();
}
}}
/>
this.scrollToEndNotified is used as a flag not to abuse the call to the loadMore endpoint
isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
return layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
}
So whenever it succeed in the isCloseToBottom call it means that you have reached the end of the list, so you can call the loadMoreData function
handle this function very carefully,
endReached=()=>{
//take care of ES6 Fat arrow function and trigger your conditions properly with current state and new state data or current state with new Props.
Based on those conditions only, you need to trigger the other API call
}
<FlatList data={this.state.data}
extraData={this.state.load}
renderItem={this.renderCard}
keyExtractor={item => item.fundRequestId}
onEndReached={this.endReached}
onEndReachedThreshold={.7}
ListFooterComponent={this.renderFooter}
/>
I set up a FlatList with an onRefresh function to update the state when the user drags down the screen. It works properly, however I was wondering how I can highlight items in the FlatList that have been updated after the refresh.
Say, for example, I want to change the background for a few seconds for any item in the list that was updated, then return to normal.
<FlatList
data={scores}
renderItem={({item}) => (
<View style={styles.scoreContainer}>
<ScoreRow data={item.away} />
<ScoreRow data={item.home} />
</View>
)}
keyExtractor={item => item.gameID}
refreshing={isRefreshing}
onRefresh={updateScores}
/>
The best I could do was add a useEffect in the ScoreRow component to detect if something changes within that component, but that only allows me to update one component at a time, not the entire View.
const [runUpdate, setRunUpdate] = useState(false)
const [runs, setRuns] = useState(data.R)
useEffect(() => {
if(runs !== data.R) {
setRunUpdate(true)
setRuns(data.R)
setTimeout(() => setRunUpdate(false), 10000)
}
}, [data.R])
I can't figure out how to detect a change on an an item in the View of the FlatList so that I can change the entire View the way I did each component.
You can achieve this by using data of FlatList. You have to make an extra parameter for this.
eg:
//Method to refresh data
_refreshMethod() {
// Do your code to fetch...
...
let newDataArray = data // Data fetch from server or some thing.
let updatedArray = []
newDataArray.map((data, index) => {
data["isNewItem"] = true;
updatedArray.push(data);
});
this.setState({scores: updatedArray})
this._callTimer()
}
// Method to update new item status after a delay
_callTimer() {
setTimeout(function() {
let updatedArray = []
this.state.scores.map((data, index) => {
data["isNewItem"] = false;
updatedArray.push(data);
});
this.setState({scores: updatedArray})
}, 3000); // The time you want to do...
}
Then change the style of row based on the state value.
<FlatList
data={this.state.scores}
renderItem={({item}) => (
<View style={item.isNewItem ? styles.yourNewItemStyle : styles.scoreContainer}>
<ScoreRow data={item.away} />
<ScoreRow data={item.home} />
</View>
)}
keyExtractor={item => item.gameID}
refreshing={isRefreshing}
onRefresh={updateScores}
extraData={this.state}
/>