Cannot scroll pdf file in android app using react-native-pdf

Question

I have used react-native-pdf in my app, basically the top portion is the pdf, while at the bottom part there can be links, or text.

it is working fine in on ios, which means the pdf scrolls perfectly but in android, it is not scrolling when there is a lot of text in the bottom section.

Code is as below:

    <Screen>
                        <ConfirmationDialog.DeleteNews
                            visible={this.state.showDeleteNewsDialog}
                            onConfirm={this.onDeleteNews}
                            onCancel={this.hideDeleteNewsDialog}
                        />
                        <CollapsibleToolbar
                            title={this.headerTitle()}
                            bottomComponent={
                                <Header.NewsDetail
                                    title={newsStore.newsDetail.name}
                                    date={newsStore.newsDetail.available_at}
                                    optionsMenu={this._renderOptionsMenu()}
                                />
                            }
                        />
                        <CollapsibleToolbar.ScrollView
                            style={stylesWithToolbarStore.scrollView}
                            hasBottomFloatButton={false}
                        >
                            {this._renderImageSwiper()}
                  {this.renderPdf()}
                  {this.renderFloatingButton()}
                            <View style={stylesWithToolbarStore.textContainer}>
                                <Hyperlink
                                    onPress={this.handleUrl}
                                    linkStyle={{
                                        color: "#3366BB"
                                    }}
                                >
                                    <Text style={stylesWithToolbarStore.text}>{newsStore.newsDetail.content}</Text>
                                </Hyperlink>
                            </View>
                            {this._renderEditAndSpreadButtons()}
                        </CollapsibleToolbar.ScrollView>
                    </Screen> 

 

renderPdf = () => {
    const { newsStore, pdfViewStore } = this.state;
    if (!newsStore.newsDetail.pdf) {
      return null;
    }
    return (
      <Pdf
        style={{
          width: screenDimensions.width,
          height: screenDimensions.height * 0.47,
        }}
        url={getFullUrl(newsStore.newsDetail.pdf)}
        onError={pdfViewStore.setVisible(false)}
        onPressLink={(link) => {Linking.openURL(link);}}
      />
    );
  };```




 render() {
    const { url, onPressLink, ...rest } = this.props;
    return (
      <Pdf
        fitWidth={true}
        fitPolicy={0}
        source={{
          uri: url,
          cache: true
        }}
        onLoadComplete={(numberOfPages, filePath)=>{
          console.log(
            `pdf number of pages: ${numberOfPages}`,
            `pdf file path: ${filePath}`
          );
        }}
        onPageChanged={(page, numberOfPages)=>{
          console.log(
            `pdf current page: ${page}`,
            `pdf number of pages: ${numberOfPages}`
          );
        }}
        onError={(error)=>{
          console.log(`pdf error: ${error}`);
          this.onError(error);
        }}
        onPressLink={onPressLink}
        activityIndicator={<ActivityIndicator color={"white"} animating={true} />}
        {...rest}
      />
    );
  }
}

Answer 1

Use ScrollView before Pdf for Scroll the PDF file.

render() {
    const { url, onPressLink, ...rest } = this.props;
    return (
    <ScrollView >
    <Pdf 
     fitWidth={true}
            fitPolicy={0}
            source={{
              uri: url,
              cache: true
            }}
            onLoadComplete={(numberOfPages, filePath)=>{
              console.log(
                `pdf number of pages: ${numberOfPages}`,
                `pdf file path: ${filePath}`
              );
            }}
            onPageChanged={(page, numberOfPages)=>{
              console.log(
                `pdf current page: ${page}`,
                `pdf number of pages: ${numberOfPages}`
              );
            }}
            onError={(error)=>{
              console.log(`pdf error: ${error}`);
              this.onError(error);
            }}
            onPressLink={onPressLink}
            activityIndicator={<ActivityIndicator color={"white"} animating={true} />}
           
    /></ScrollView>

 );
  }
}