/Javascript/React/React native scrollview detect end

React native scrollview detect end

How to detect onend reach of scrollview in react native

import React from 'react';
import {ScrollView, Text} from 'react-native';

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

const MyCoolScrollViewComponent = ({enableSomeButton}) => (
  <ScrollView
    onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
        enableSomeButton();
      }
    }}
    scrollEventThrottle={400}
  >
    <Text>Here is very long lorem ipsum or something...</Text>
  </ScrollView>
);

export default MyCoolScrollViewComponent;

Source: stackoverflow.com

React native scrollview detect end

import React from 'react';
import {ScrollView, Text} from 'react-native';
    
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom;
};
    
const MyCoolScrollViewComponent = ({enableSomeButton}) => (
  <ScrollView
    onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
        enableSomeButton();
      }
    }}
    scrollEventThrottle={400}
  >
    <Text>Here is very long lorem ipsum or something...</Text>
  </ScrollView>
);
    
export default MyCoolScrollViewComponent;

Source: stackoverflow.com

Similar codes

0 vote410 views1 answer
Reactjs function exemple useEffect
Javascript React
6 votes424 views1 answer
How to import dotenv in react
Javascript React
0 vote388 views1 answer
Import Bootstrap to React Redux CRUD App
Javascript React
0 vote370 views1 answer
Jest mock react-redux hooks
Javascript React
0 vote376 views1 answer
React router v6 lazy suspense
Javascript React
18 votes424 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
15 votes379 views2 answers
UseReducer() hook react
Javascript React
0 vote395 views1 answer
React linking to documents
Javascript React
0 vote416 views1 answer
How to make back button react
Javascript React
1 vote377 views3 answers
Bash: react-scripts: command not found
Javascript React