Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FlatList inside Content item invokes onEndReached infinite times #1736

Closed
AndroConsis opened this issue Mar 27, 2018 · 4 comments
Closed

FlatList inside Content item invokes onEndReached infinite times #1736

AndroConsis opened this issue Mar 27, 2018 · 4 comments
Labels
awaiting response

Comments

@AndroConsis
Copy link

AndroConsis commented Mar 27, 2018 •
edited
Loading

Steps to Reproduce:

import {  Container,  Header,  Title,    Content,  Card,  CardItem,  Thumbnail,  Text,  Button,  Icon,  Left,  Body,  Right,  Spinner,  Badge} from 'native-base';

render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right><Text note>{this.state.imageList.length}</Text></Right>
        </Header>
          <Content>
           {this.state.loading ? <Spinner />: 
            <FlatList
              data={this.state.imageList}
              renderItem={this._renderItem.bind(this)}
              keyExtractor={(item, index) => index.toString()}
              onEndReached={this.onEndReached.bind(this)}
              ListFooterComponent={() => { return <Spinner small/> }}
              onEndReachedThreshold={0.5}
              />
          } 
          </Content>
      </Container>

while rendering the above JSX, I was facing the issue that onEndReached was getting called again and again after an interval when setting onEndReachedThreshold greater than 0.
Ultimately I found out that problem got solved by removing Content tag and replacing it with <View style={{flex: 1}}

Please look into this.
@akhil-ga
Copy link
Contributor

@AndroConsis See this issue facebook/react-native#15356

@ashokkumar88
Copy link

ashokkumar88 commented Mar 29, 2018 •
edited
Loading

Replace the <Content> component with <View> and write the value for onEndReached as below
onEndReached = {() => this.onEndReached()}.

render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right><Text note>{this.state.imageList.length}</Text></Right>
        </Header>
          <View style={{padding:10}}>
           {this.state.loading ? <Spinner />: 
            <FlatList
              data={this.state.imageList}
              renderItem={this._renderItem.bind(this)}
              keyExtractor={(item, index) => index.toString()}
              onEndReached={() => this.onEndReached()}
              ListFooterComponent={() => { return <Spinner small/> }}
              onEndReachedThreshold={0.1}
              />
          } 
          </View>
      </Container>

@ShinsukeWatanabe
Copy link

ShinsukeWatanabe commented Jul 2, 2018 •
edited
Loading

@AndroConsis

<Content
  style={{flex: 1}}
  contentContainerStyle={{flex: 1}} // important!
>
...

@yongpingchen yongpingchen mentioned this issue Jul 20, 2018
Closed
@ikeliec
Copy link

ikeliec commented Nov 11, 2019

Steps to Reproduce:

import {  Container,  Header,  Title,    Content,  Card,  CardItem,  Thumbnail,  Text,  Button,  Icon,  Left,  Body,  Right,  Spinner,  Badge} from 'native-base';

render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right><Text note>{this.state.imageList.length}</Text></Right>
        </Header>
          <Content>
           {this.state.loading ? <Spinner />: 
            <FlatList
              data={this.state.imageList}
              renderItem={this._renderItem.bind(this)}
              keyExtractor={(item, index) => index.toString()}
              onEndReached={this.onEndReached.bind(this)}
              ListFooterComponent={() => { return <Spinner small/> }}
              onEndReachedThreshold={0.5}
              />
          } 
          </Content>
      </Container>

while rendering the above JSX, I was facing the issue that onEndReached was getting called again and again after an interval when setting onEndReachedThreshold greater than 0.
Ultimately I found out that problem got solved by removing Content tag and replacing it with <View style={{flex: 1}}

Please look into this.

This fixed mine. Thanks a bunch :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ashokkumar88 @SupriyaKalghatgi @ShinsukeWatanabe @AndroConsis @akhil-ga @ikeliec