Detecting Scroll Offset to Trigger an Action When PDF is Fully Scrolled

[RezaPN]

Hi,

I am trying to access the onScroll event in a scrollable component to detect the current scroll offset. My use case involves a PDF file containing a terms and conditions document, and I need to detect how far the user has scrolled through the document. Once the user reaches the bottom and fully scrolls through the PDF, a "Next" button should appear.

However, with the current props available, I can only detect which page the user is on, and I'm unable to determine if the scroll has fully reached the end of the content.

Is there any solution or workaround for this?

[joffblack]

I also have a very similar issue to @RezaPN.

Any help would be great..

[RaafatDev]

I have a similar use case ..

currently as a temporary solution to decide that the user has gone through all document pages, I have enabled the paging with the property enablePaging and when the user reaches the final page I can make sure that he has gone through all the document pages and I can show the hidden next-button

[rajivchaulagain]

try this once

import React, { useRef, useState } from 'react';
import { ScrollView, View, Button, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';

const PdfViewer = ({ currentUrl, authCookie }) => {
  const [showNextButton, setShowNextButton] = useState(false);
  const scrollViewRef = useRef(null);

  const handleScroll = (event) => {
    const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;

    if (contentOffset.y + layoutMeasurement.height >= contentSize.height) {
      setShowNextButton(true);
    } else {
      setShowNextButton(false);
    }
  };

  return (
    <View style={styles.container}>
      <ScrollView 
        ref={scrollViewRef}
        onScroll={handleScroll}
        scrollEventThrottle={16} 
      >
        <Pdf
          trustAllCerts={Platform.OS === 'ios'}
          style={styles.pdf}
          source={{
            uri: currentUrl,
            headers: { Cookie: authCookie },
          }}
        />
      </ScrollView>
      {showNextButton && (
        <Button title="Next" onPress={() => {/* Handle next action */}} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  pdf: {
    flex: 1,
    height: 1000, 
  },
});

export default PdfViewer;

[RezaPN]

try this once

import React, { useRef, useState } from 'react';
import { ScrollView, View, Button, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';

const PdfViewer = ({ currentUrl, authCookie }) => {
  const [showNextButton, setShowNextButton] = useState(false);
  const scrollViewRef = useRef(null);

  const handleScroll = (event) => {
    const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;

    if (contentOffset.y + layoutMeasurement.height >= contentSize.height) {
      setShowNextButton(true);
    } else {
      setShowNextButton(false);
    }
  };

  return (
    <View style={styles.container}>
      <ScrollView 
        ref={scrollViewRef}
        onScroll={handleScroll}
        scrollEventThrottle={16} 
      >
        <Pdf
          trustAllCerts={Platform.OS === 'ios'}
          style={styles.pdf}
          source={{
            uri: currentUrl,
            headers: { Cookie: authCookie },
          }}
        />
      </ScrollView>
      {showNextButton && (
        <Button title="Next" onPress={() => {/* Handle next action */}} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  pdf: {
    flex: 1,
    height: 1000, 
  },
});

export default PdfViewer;

The problem with this is that if there are many pages (for example, 10 pages), the bottom part of the PDF does not render (this likely happens due to lazy loading).