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.

Answer 1

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
    }
});

Answer 2

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}`)
                        }}
                    />