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}
/>
Related
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.
I am trying to toggle ios Switch in react native. But the switch comes back to initial position as soon as I change it.
What I have:
class ABC extends Component {
constructor(props) {
super(props)
this.state = {
obj: []
}
}
fetch(){
// fetch something from remote server, set it to state object array
}
setStatus(id, value){
var temp = [...this.state.obj]
temp.map((t) => {
if (t.id == id) {
t.flag = value
}
})
this.setState({ obj: temp })
}
render() {
return (
<View>
<FlatList
data={this.state.obj}
renderItem={({ item }) =>
<View>
<Text>{item.name}</Text>
<Switch
onValueChange={(val) => this.setStatus(item.id, val)}
value={item.flag}
/>
</View>
}
keyExtractor={({ id }, index) => id.toString()}
/>
</View>
);
}
}
I logged the before and after value of obj state and they seem to update. Should the FlatList be rendered again (like a web page refresh) ? Or is there something I am missing ? Searched SO for answers, couldn't find my mistake.
Flatlist has a prop called extraData.
This prop tells Flatlist whether to re-render or not.
If data in extraData changes then flatlist re-renders based on new data provided in data prop.
So whenever you need to re-render flatlist just change something in extraData.
Best way is to pass state toextraData which is passed to Data.
So, just pass extraData={this.state.obj}.
there also other way called forceUpdate.
you can call this.forceUpdate().
but this is not recommended because this will render not only flatlist but entire component in which you are calling this.
MainComponent:
<Tabs
initialPage={this.props.day}
tabBarUnderlineStyle={{ backgroundColor: '#5AF158' }}
renderTabBar={() => <ScrollableTab />}>
{this.renderTabHeader()}
</Tabs>
renderTabHeader() {
return (
this.props.dateArray.map((date, i) =>
<Tab
key={i}
heading={date.format('DD/MM')}
tabStyle={styles.tabStyling}
activeTabStyle={styles.activeTabStyle}
textStyle={styles.tabTextStyle}
activeTextStyle={styles.activeTabTextStyle}
>
<View style={{ backgroundColor: '#EEEEEE', flex: 1 }}>
<Content contentDate={date.format('YYYY-MM-DD')} />
</View>
</Tab>
)
);
}
Content Component:
class Content extends Component {
componentWillMount() {
console.log('Component Will Mount() ?');
this.props.loadTransactionByDate({ date: this.props.contentDate });
}
render() {
return (
<View><Text>{this.props.contentDate}</Text></View>
);
}
Basically, in MainComponent there is a collection of tabs. I've noticed something rather weird which Content will be mounted on the first time their tab being click or active?
Meaning for the first time, we can click on Tab index 2 and seeing the console log in componentWillMount, then we switch to another tab and if coming back to Tab index 2 again, componentWillMount will not be triggered anymore?
First I would like to point out you should not use componentWillMount life cycle method since it has been deprecated on last minor update of React 16.3
Heres list of deprecated life cycle methods,
(componentWillMount, componentWillReceiveProps, and componentWillUpdate). You can read more about deprecated life cycle methods here.
Secondary in your example life cycle works as expected. componentWillMount triggers only once since your component will be initial rendered/mounted only one time and that's how React works.
I would work this out with following method.
Add getDerivedStateFromProps life cycle to Content component, which will trigger when component receives new props and as well on initial mount.
static getDerivedStateFromProps(nextProps, prevState) {
console.log('will log on props change');
if( nextProps.contentDate !== prevState.contentDate ) {
return { contentDate: nextProps.contentDate };
// Notice we return plain object here to update state
}
return null;
// return null when changes are not needed
}
This example checks that contentDate has changed and if so pushes it into component -state. And on render method you get it by this.state.contentDate.
render() {
return (
<View><Text>{this.state.contentDate}</Text></View>
);
}
You could achieve similar behaviour with implementing this in componentDidUpdate but then you have much bigger risk to end up with infinite loops and much worse performance. But it's possible just have strong checks that data you have expected has really changed as you would expect. Then you can do setState and component re-renders.
How to get the Id of the element in onPress event handler.
I am adding elements dynamically and wants to know in the event handler of onPress of these elements to store in the state which elements are clicked.
Here is the code i have
export default class App extends Component {
constructor(props){
super(props);
this.getElements= this.getElements.bind(this);
this.selectElement = this.selectElement.bind(this);
}
componentWillMount(){
this.state = {
noOfElements :10
}
}
selectElement(e,key){
console.log('selectElement() : key=',key);
}
getElements(){
let elements =[];
for(let index=0;index<this.state.noOfElements;index++){
elements.push(
<View key={'View_'+index} style={{flex:1}}>
<Button
key={'View_'+index}
id={index}
onPress={(e,index) => {this.selectElement(e,index)}}
title={'Button-'+index}
/>
</View>
);
}
return elements;
}
render(){
let elements = this.getElements();
return(
<View style={styles.container}>
<Text>Test</Text>
{elements}
</View>
);
}
}
I tried just passing the key like
onPress={(index) => {this.selectElement(index)}}
with no success..
Not sure what i am doing wrong.
The way you have it, i think index would come up undefined, just remove index as an argument in your onPress so it grabs index from the for loop. Also you can prob refactor it using map.
onPress={(e) => this.selectElement(e,index)}
Changed the event handler as below and it is working fine now.
onPress={this.selectElement.bind(this,index)}
and the function now just accepts the index
selectElement(key){
console.log('selectElement() : Index=',key);
}