Unable to scroll pdf file in android app used react-native-pdf

Question

I have used react-native-pdf in my app and we want to scroll that pdf within the app however it is working fine in on ios but in android, it is not scrolling completely scroll up to 4 pages. there are 20 pages in the pdf. I have used the below code in my app:-

render () {
    const source = require('./../../../assets/assets/pdfs/pdfname.pdf');
    return (
      <View style={styles.container}>
          <Pdf
              source={source}
              onLoadComplete={(numberOfPages,filePath)=>{
                  console.log(`number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page,numberOfPages)=>{
                  console.log(`current page: ${page}`);
              }}
              onError={(error)=>{
                  console.log(error);
              }}
              style={styles.pdf}/>
      </View>
  )

  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width - 20,
  }
});

render () {
    const source = require('./../../../assets/assets/pdfs/ebook_1.pdf');
    return (
      <View style={styles.container}>
          <Pdf
              source={source}
              onLoadComplete={(numberOfPages,filePath)=>{
                  console.log(`number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page,numberOfPages)=>{
                  console.log(`current page: ${page}`);
              }}
              onError={(error)=>{
                  console.log(error);
              }}
              style={styles.pdf}/>
      </View>
  )

  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width - 20,
  }
});

I expect that my pdf scroll completely within the app.

style={{ flex: 1, width: 200 }} more detail https://stackoverflow.com/questions/55790085/use-react-native-view-pdf-shows-blank-view?noredirect=1#comment98275187_55790085 — errorau, Apr 25 '19 at 06:28
@erroau thanks but earlier pdf scroll up to 4 pages now it is scrolling up to 9 pages but pdf get a zoom in. so it does not look good and my pdf has 20 pages. — Amit Khobragade, Apr 25 '19 at 10:00

score 2 · Answer 1 · answered Sep 20 '19 at 06:50

try wrapping the in ScrollView, worked for me.

<View style={styles.container}>
    <ScrollView contentContainerStyle={{ flex: 1 }}>
        <Pdf
            source={source}
            onLoadComplete={()=>{
                console.log(`number of pages: ${numberOfPages}`);
            }}
            onPageChanged={()=>{
                console.log(`current page: ${page}`);
            }}
            onError={(error)=>{
                console.log(error);
            }}
            style={styles.pdf}/>
    </ScrollView>
</View>

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 5
    },
    pdf: {
        flex:1,
        width:Dimensions.get('window').width - 20
    }
});

score 0 · Answer 2 · answered Nov 30 '19 at 13:41

Try adding some height to your pdf then it works with scroll

My Styles for pdf

pdfStyles: {
        height: screenHeight - 200,
        width: screenWidth
    },

And this is my pdf

<Pdf style={Styles.pdfStyles}
                        source={{
                            uri: '/storage/emulated/0/Download/sample.pdf',
                            cache: true
                        }}
                        onLoadComplete={(numberOfPages, filePath) => {
                            console.log(`number of pages: ${numberOfPages}`);
                        }}
                        onPageChanged={(page, numberOfPages) => {
                            console.log(`current page: ${page}`);
                        }}
                        onError={(error) => {
                            console.log(error);
                        }}
                        onPressLink={(uri) => {
                            console.log(`Link presse: ${uri}`)
                        }}
                    />

Unable to scroll pdf file in android app used react-native-pdf

2 Answers2