Nativebase: Fire event on Scroll end of the app screen

[rbsl-yasmin]

Hi, I want to fire an event on scroll end of the app screen. I have a list of component and at the end of the scroll end, I want to fire an event to add more data to that list. I tried with content onScroll event. But it doesn't seem to work. Is there any better way to detect scroll end of the screen?

[SupriyaKalghatgi]

https://stackoverflow.com/questions/50981737/fire-an-event-on-scrollend-of-the-screen

[akhil-geekyants]

@rbsl-yasmin try something like this
Code

import React, { Component } from 'react';
import { Container, Header, Content, Text } from 'native-base';

export default class App extends Component {

  isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize }) => {
    return layoutMeasurement.height + contentOffset.y >= contentSize.height - 1;
  };


  render() {
    return (
      <Container>
        <Header />
        <Content
          onScroll={({ nativeEvent }) => {
            if (this.isCloseToBottom(nativeEvent)) {
              console.warn("Reached end of page");
            }
          }}>
          <Text style={{ padding: 20 }}>Test</Text>
          <Text style={{ padding: 20, }}>Test</Text>
           ...
           ...
        </Content>
      </Container>
    );
  }
}

Gif

[rbsl-yasmin]

@akhil-geekyants Your solution is working. But as I saw in the src code native base list component is building on ListVIew of react native. so why onendreached and onendreachedthreshold is not working when I use these function with the List component of native base ?

[akhil-geekyants]

@rbsl-yasmin NativeBase List is deprecated. Use React Native FlatList instead.

[SupriyaKalghatgi]

@rbsl-yasmin Any update?

[rbsl-yasmin]

@SupriyaKalghatgi
I am using native base so why would I use flatlist, till the time native base came up with something. I am using @akhil-geekyants solution isclosetobottom.

[tarun29061990]

I am using the same code but no success.

<Container>
            <Header />
            <Content  
                onScroll={({ nativeEvent }) => {
                    console.log("in scroll");
                    console.log(this);
                    if (this.isCloseToBottom(nativeEvent)) {
                        console.log("Reached end of page");
                    }
                }} 
                scrollEventThrottle = {1000}
                style={{paddingLeft: PADDING_XS, paddingRight: PADDING_XS}}
            >
                <UpdateScreen projectDetails = { JSON.parse(navigation.getParam('details')) </UpdateScreen>
            </Content>
        </Container>

onScroll function is not getting called.

native-base: 2.8.1
react-native: 0.57.1

[Jacky9425]

Hi, i managed to fire a console.warn event upon end reached in a scrollview, but it fires twice in the console, and i am trying to achieve cleartimeout/clearinterval when scrollviewreach end. So i think both the clear functions fire twice as well resulting in misbehave of app after resetting the timeout and intervals. Any idea why it fires twice or how to ensure it doesnt fire multiple times? thank you

[CoSNaYe]

Same as @tarun29061990 , the onScroll function on <Content> is not getting called.

native-base: 2.13.8
react-native: 0.61.5