react-native-pdf cannot set currentPage state to show up on display

Question

i've done the react-native-pdf to show the slides of my pdf file. But, I want to set the current page state to show up on the display. And when the value is set, it'll refresh that screen and goes back to the first page automatically.

this is my code:

import React, { useState } from 'react';
import { StyleSheet, Dimensions, View, Text } from 'react-native';

import Pdf from 'react-native-pdf';

function Work() {
    const [currentPage, setCurrentPage] = useState()

    const ShowPdf = () => {
        const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };

        return (
            <Pdf
                source={source}
                onLoadComplete={(numberOfPages, filePath) => {
                    console.log(`number of pages: ${numberOfPages}`);
                }}
                onPageChanged={(page, numberOfPages) => {
                    console.log(`current page: ${page}`);
                    setCurrentPage(page)  //set the cuurentPage
                }}
                onError={(error) => {
                    console.log(error);
                }}
                onPressLink={(uri) => {
                    console.log(`Link presse: ${uri}`)
                }}
                style={styles.pdf} />
        )
    }

    return (
        <View style={styles.container}>
            <ShowPdf />
            <View style={styles.pageNumber}>
                <Text>{currentPage}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        //marginTop: 25,
        //backgroundColor: 'red',
        backfaceVisibility: 'hidden'
    },
    pdf: {
        flex: 1,
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    pageNumber: {
        position: 'absolute',
        left: 20,
        top: 20,
        backgroundColor: 'rgba(173, 173, 173, 0.5)',
        padding: 13,
        borderRadius: 6,

    }
});

export default Work;

my emulator display: image

Anyway I can fix this?

Need more explanation, can you please explain whats is the issue actually ? — Dipan Sharma, May 28 '21 at 08:37
thank you for your comment. The issue is once the 'setState' is working and set the current page to '2', it'll go back to the first page and set the current page to '1' automatically. thus i think the screen is refreshed every time the 'setState' work. sorry for my bad explanation and my language. — Surapat Pongsuwan, May 28 '21 at 09:39
I'm guessing it's because you are recreating ShowPdf component every time Work component rerenders when its state change. Move ShowPdf component out of the Work component and pass in props or use useCallBack hook to memorize the component. — Noob Life, May 28 '21 at 10:19
thanks for your suggestion, i'll try it and show the result later — Surapat Pongsuwan, May 28 '21 at 11:27

score 0 · Answer 1 · edited Nov 16 '22 at 03:43

Instead of use this

<View style={styles.container}>
  <ShowPdf />
  <View style={styles.pageNumber}>
    <Text>{currentPage}</Text>
   </View>
</View>

please use it

<View style={styles.container}>
  <Pdf
   source={{ uri: path }}
   onLoadComplete={(numberOfPages, filePath) => {
   console.log(`number of pages: ${numberOfPages}`);
   }}
   onPageChanged={(page, numberOfPages) => {
     console.log(`current page: ${page}`);
     setCurrentPage(page)  //set the cuurentPage
   }}
   onError={(error) => {
     console.log(error);
   }}
   onPressLink={(uri) => {
     console.log(`Link presse: ${uri}`)
   }}
    style={styles.pdf} />
    <View style={styles.pageNumber}>
    <Text>{currentPage}</Text>
  </View>
</View>

<ShowPdf/> is your custom react component it will be re-rendered for every page change. So, that is why you faced this problem

react-native-pdf cannot set currentPage state to show up on display

1 Answers1