react-native-pdf 6.6.1 → 6.7.0

package/fabric/RNPDFPdfNativeComponent.js

@@ -0,0 +1,46 @@
+/**
+ * @flow
+ * @format
+ */
+ 'use strict';
+
+ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+ import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+ 
+ type ChangeEvent = $ReadOnly<{|
+   message: ?string,
+ |}>;
+ 
+ export type NativeProps = $ReadOnly<{|
+   ...ViewProps,
+   path: ?string,
+   page: ?Int32,
+   scale: ?Float,
+   minScale: ?Float,
+   maxScale: ?Float,
+   horizontal: ?boolean,
+   enablePaging: ?boolean,
+   enableRTL: ?boolean,
+   enableAnnotationRendering: ?boolean,
+   showsHorizontalScrollIndicator: ?boolean,
+   showsVerticalScrollIndicator: ?boolean,
+   enableAntialiasing: ?boolean,
+   fitPolicy: ?Int32,
+   spacing: ?Int32,
+   password: ?string,
+   onChange: ?BubblingEventHandler<ChangeEvent>,
+   singlePage: ?boolean,
+ |}>;
+
+ interface NativeCommands {
+  +setNativePage: (
+    viewRef: React.ElementRef<ComponentType>,
+    page: Int32,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['setNativePage'],
+});
+
+ export default codegenNativeComponent<NativeProps>('RNPDFPdfView');

package/index.d.ts

@@ -25,95 +25,39 @@ export type Source = {
     cacheFileName?: string;
     expiration?: number;
     method?: string;
-    body?: any
 };
 
-export interface PdfProps extends ReactNative.ViewProps {
+interface Props {
+    style?: ReactNative.StyleProp<ReactNative.ViewStyle>,
     source: Source | number,
     page?: number,
     scale?: number,
     minScale?: number,
     maxScale?: number,
     horizontal?: boolean,
+    showsHorizontalScrollIndicator?: boolean,
+    showsVerticalScrollIndicator?: boolean,
     spacing?: number,
     password?: string,
-    renderActivityIndicator: (progress: number) => React.ReactElement,
+    renderActivityIndicator?: (progress: number) => React.ReactElement,
     enableAntialiasing?: boolean,
-    enableAnnotationRendering?: boolean,
     enablePaging?: boolean,
     enableRTL?: boolean,
+    enableAnnotationRendering?: boolean,
     fitPolicy?: number,
     trustAllCerts?: boolean,
     singlePage?: boolean,
-    onLoadProgress?: (percent: number) => void,
+    onLoadProgress?: (percent: number,) => void,
     onLoadComplete?: (numberOfPages: number, path: string, size: {height: number, width: number}, tableContents?: TableContent[]) => void,
     onPageChanged?: (page: number, numberOfPages: number) => void,
-    onError?: (error: any) => void,
+    onError?: (error: object) => void,
     onPageSingleTap?: (page: number, x: number, y: number) => void,
     onScaleChanged?: (scale: number) => void,
     onPressLink?: (url: string) => void,
-    setPage: (pageNumber: number) => void;
-
-    usePDFKit?: boolean
-}
-
-export type PdfState = {
-    path: string
-    isDownloaded: boolean
-    progress: number
-    isSupportPDFKit: number
-}
-
-export interface PdfViewProps extends ReactNative.ViewProps {
-    path: string
-    password?: string
-    scale: number
-    minScale: number
-    maxScale: number
-    spacing: number
-    fitPolicy?: number
-    horizontal?: boolean
-    page: number
-    currentPage: number
-    singlePage: boolean
-    enablePaging: boolean
-    onPageSingleTap: PdfProps['onPageSingleTap']
-    onScaleChanged: PdfProps['onScaleChanged']
-    onLoadComplete: PdfProps['onLoadComplete']
-    onError: PdfProps['onError']
-    onPageChanged: PdfProps['onPageChanged']
-}
-
-export type PdfViewState = {
-    pdfLoaded: boolean
-    fileNo: number
-    numberOfPages:number
-    page: number
-    currentPage: number
-    pageAspectRate: number
-    pdfPageSize: {width: number, height: number}
-    contentContainerSize: {width: number, height: number}
-    scale: number
-    contentOffset: {x: number, y: number}
-    newContentOffset: {x: number, y: number}
-    centerContent: boolean
 }
 
-export interface PdfPageViewProps extends ReactNative.ViewProps {
-    fileNo: number
-    page: number
-    width: number
-    height: number
-}
-
-export interface PinchZoomViewProps extends ReactNative.ViewProps {
-    scalable: boolean
-    onScaleChanged: (scaled: {pageX: number; pageY: number; scale: number}) => void
+declare class Pdf extends React.Component<Props, any> {
+    setPage: (pageNumber: number) => void;
 }
 
-export interface DoubleTapViewProps extends ReactNative.ViewProps {
-    delay: number
-    radius: number
-    onSingleTap: PropTypes.func,
-    onDoubleTap: PropTypes.func,
-}
+export default Pdf;

package/index.js

@@ -0,0 +1,464 @@
+/**
+ * Copyright (c) 2017-present, Wonday (@wonday.org)
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {
+    View,
+    Platform,
+    StyleSheet,
+    Image,
+    Text
+} from 'react-native';
+import PdfViewNativeComponent, {
+    Commands as PdfViewCommands,
+  } from './fabric/RNPDFPdfNativeComponent';
+import ReactNativeBlobUtil from 'react-native-blob-util'
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+const SHA1 = require('crypto-js/sha1');
+import PdfView from './PdfView';
+
+export default class Pdf extends Component {
+
+    static propTypes = {
+        ...ViewPropTypes,
+        source: PropTypes.oneOfType([
+            PropTypes.shape({
+                uri: PropTypes.string,
+                cache: PropTypes.bool,
+                cacheFileName: PropTypes.string,
+                expiration: PropTypes.number,
+            }),
+            // Opaque type returned by require('./test.pdf')
+            PropTypes.number,
+        ]).isRequired,
+        page: PropTypes.number,
+        scale: PropTypes.number,
+        minScale: PropTypes.number,
+        maxScale: PropTypes.number,
+        horizontal: PropTypes.bool,
+        spacing: PropTypes.number,
+        password: PropTypes.string,
+        renderActivityIndicator: PropTypes.func,
+        enableAntialiasing: PropTypes.bool,
+        enableAnnotationRendering: PropTypes.bool,
+        showsHorizontalScrollIndicator: PropTypes.bool,
+        showsVerticalScrollIndicator: PropTypes.bool,
+        enablePaging: PropTypes.bool,
+        enableRTL: PropTypes.bool,
+        fitPolicy: PropTypes.number,
+        trustAllCerts: PropTypes.bool,
+        singlePage: PropTypes.bool,
+        onLoadComplete: PropTypes.func,
+        onPageChanged: PropTypes.func,
+        onError: PropTypes.func,
+        onPageSingleTap: PropTypes.func,
+        onScaleChanged: PropTypes.func,
+        onPressLink: PropTypes.func,
+
+        // Props that are not available in the earlier react native version, added to prevent crashed on android
+        accessibilityLabel: PropTypes.string,
+        importantForAccessibility: PropTypes.string,
+        renderToHardwareTextureAndroid: PropTypes.string,
+        testID: PropTypes.string,
+        onLayout: PropTypes.bool,
+        accessibilityLiveRegion: PropTypes.string,
+        accessibilityComponentType: PropTypes.string,
+    };
+
+    static defaultProps = {
+        password: "",
+        scale: 1,
+        minScale: 1,
+        maxScale: 3,
+        spacing: 10,
+        fitPolicy: 2, //fit both
+        horizontal: false,
+        page: 1,
+        enableAntialiasing: true,
+        enableAnnotationRendering: true,
+        showsHorizontalScrollIndicator: true,
+        showsVerticalScrollIndicator: true,
+        enablePaging: false,
+        enableRTL: false,
+        trustAllCerts: true,
+        usePDFKit: true,
+        singlePage: false,
+        onLoadProgress: (percent) => {
+        },
+        onLoadComplete: (numberOfPages, path) => {
+        },
+        onPageChanged: (page, numberOfPages) => {
+        },
+        onError: (error) => {
+        },
+        onPageSingleTap: (page, x, y) => {
+        },
+        onScaleChanged: (scale) => {
+        },
+        onPressLink: (url) => {
+        },
+    };
+
+    constructor(props) {
+
+        super(props);
+        this.state = {
+            path: '',
+            isDownloaded: false,
+            progress: 0,
+        };
+
+        this.lastRNBFTask = null;
+
+    }
+
+    componentDidUpdate(prevProps) {
+
+        const nextSource = Image.resolveAssetSource(this.props.source);
+        const curSource = Image.resolveAssetSource(prevProps.source);
+
+        if ((nextSource.uri !== curSource.uri)) {
+            // if has download task, then cancel it.
+            if (this.lastRNBFTask) {
+                this.lastRNBFTask.cancel(err => {
+                    this._loadFromSource(this.props.source);
+                });
+                this.lastRNBFTask = null;
+            } else {
+                this._loadFromSource(this.props.source);
+            }
+        }
+    }
+
+    componentDidMount() {
+        this._mounted = true;
+        this._loadFromSource(this.props.source);
+    }
+
+    componentWillUnmount() {
+        this._mounted = false;
+        if (this.lastRNBFTask) {
+            this.lastRNBFTask.cancel(err => {
+            });
+            this.lastRNBFTask = null;
+        }
+
+    }
+
+    _loadFromSource = (newSource) => {
+
+        const source = Image.resolveAssetSource(newSource) || {};
+
+        let uri = source.uri || '';
+        // first set to initial state
+        if (this._mounted) {
+            this.setState({isDownloaded: false, path: '', progress: 0});
+        }
+        const filename = source.cacheFileName || SHA1(uri) + '.pdf';
+        const cacheFile = ReactNativeBlobUtil.fs.dirs.CacheDir + '/' + filename;
+
+        if (source.cache) {
+            ReactNativeBlobUtil.fs
+                .stat(cacheFile)
+                .then(stats => {
+                    if (!Boolean(source.expiration) || (source.expiration * 1000 + stats.lastModified) > (new Date().getTime())) {
+                        if (this._mounted) {
+                            this.setState({path: cacheFile, isDownloaded: true});
+                        }
+                    } else {
+                        // cache expirated then reload it
+                        this._prepareFile(source);
+                    }
+                })
+                .catch(() => {
+                    this._prepareFile(source);
+                })
+
+        } else {
+            this._prepareFile(source);
+        }
+    };
+
+    _prepareFile = async (source) => {
+
+        try {
+            if (source.uri) {
+                let uri = source.uri || '';
+
+                const isNetwork = !!(uri && uri.match(/^https?:\/\//));
+                const isAsset = !!(uri && uri.match(/^bundle-assets:\/\//));
+                const isBase64 = !!(uri && uri.match(/^data:application\/pdf;base64/));
+
+                const filename = source.cacheFileName || SHA1(uri) + '.pdf';
+                const cacheFile = ReactNativeBlobUtil.fs.dirs.CacheDir + '/' + filename;
+
+                // delete old cache file
+                this._unlinkFile(cacheFile);
+
+                if (isNetwork) {
+                    this._downloadFile(source, cacheFile);
+                } else if (isAsset) {
+                    ReactNativeBlobUtil.fs
+                        .cp(uri, cacheFile)
+                        .then(() => {
+                            if (this._mounted) {
+                                this.setState({path: cacheFile, isDownloaded: true, progress: 1});
+                            }
+                        })
+                        .catch(async (error) => {
+                            this._unlinkFile(cacheFile);
+                            this._onError(error);
+                        })
+                } else if (isBase64) {
+                    let data = uri.replace(/data:application\/pdf;base64,/i, '');
+                    ReactNativeBlobUtil.fs
+                        .writeFile(cacheFile, data, 'base64')
+                        .then(() => {
+                            if (this._mounted) {
+                                this.setState({path: cacheFile, isDownloaded: true, progress: 1});
+                            }
+                        })
+                        .catch(async (error) => {
+                            this._unlinkFile(cacheFile);
+                            this._onError(error)
+                        });
+                } else {
+                    if (this._mounted) {
+                       this.setState({
+                            path: unescape(uri.replace(/file:\/\//i, '')),
+                            isDownloaded: true,
+                        });
+                    }
+                }
+            } else {
+                this._onError(new Error('no pdf source!'));
+            }
+        } catch (e) {
+            this._onError(e)
+        }
+
+
+    };
+
+    _downloadFile = async (source, cacheFile) => {
+
+        if (this.lastRNBFTask) {
+            this.lastRNBFTask.cancel(err => {
+            });
+            this.lastRNBFTask = null;
+        }
+
+        const tempCacheFile = cacheFile + '.tmp';
+        this._unlinkFile(tempCacheFile);
+
+        this.lastRNBFTask = ReactNativeBlobUtil.config({
+            // response data will be saved to this path if it has access right.
+            path: tempCacheFile,
+            trusty: this.props.trustAllCerts,
+        })
+            .fetch(
+                source.method ? source.method : 'GET',
+                source.uri,
+                source.headers ? source.headers : {},
+                source.body ? source.body : ""
+            )
+            // listen to download progress event
+            .progress((received, total) => {
+                this.props.onLoadProgress && this.props.onLoadProgress(received / total);
+                if (this._mounted) {
+                    this.setState({progress: received / total});
+                }
+            });
+
+        this.lastRNBFTask
+            .then(async (res) => {
+
+                this.lastRNBFTask = null;
+
+                if (res && res.respInfo && res.respInfo.headers && !res.respInfo.headers["Content-Encoding"] && !res.respInfo.headers["Transfer-Encoding"] && res.respInfo.headers["Content-Length"]) {
+                    const expectedContentLength = res.respInfo.headers["Content-Length"];
+                    let actualContentLength;
+
+                    try {
+                        const fileStats = await ReactNativeBlobUtil.fs.stat(res.path());
+
+                        if (!fileStats || !fileStats.size) {
+                            throw new Error("FileNotFound:" + source.uri);
+                        }
+
+                        actualContentLength = fileStats.size;
+                    } catch (error) {
+                        throw new Error("DownloadFailed:" + source.uri);
+                    }
+
+                    if (expectedContentLength != actualContentLength) {
+                        throw new Error("DownloadFailed:" + source.uri);
+                    }
+                }
+
+                this._unlinkFile(cacheFile);
+                ReactNativeBlobUtil.fs
+                    .cp(tempCacheFile, cacheFile)
+                    .then(() => {
+                        if (this._mounted) {
+                            this.setState({path: cacheFile, isDownloaded: true, progress: 1});
+                        }
+                        this._unlinkFile(tempCacheFile);
+                    })
+                    .catch(async (error) => {
+                        throw error;
+                    });
+            })
+            .catch(async (error) => {
+                this._unlinkFile(tempCacheFile);
+                this._unlinkFile(cacheFile);
+                this._onError(error);
+            });
+
+    };
+
+    _unlinkFile = async (file) => {
+        try {
+            await ReactNativeBlobUtil.fs.unlink(file);
+        } catch (e) {
+
+        }
+    }
+
+    setNativeProps = nativeProps => {
+        if (this._root){
+            this._root.setNativeProps(nativeProps);
+        }
+    };
+
+    setPage( pageNumber ) {
+        if ( (pageNumber === null) || (isNaN(pageNumber)) ) {
+            throw new Error('Specified pageNumber is not a number');
+        }
+        if (!!global?.nativeFabricUIManager ) {
+            if (this._root) {
+                PdfViewCommands.setNativePage(
+                    this._root,
+                    pageNumber,
+                );
+            }
+          } else {
+            this.setNativeProps({
+                page: pageNumber
+            });
+          }
+        
+    }
+
+    _onChange = (event) => {
+
+        let message = event.nativeEvent.message.split('|');
+        //__DEV__ && console.log("onChange: " + message);
+        if (message.length > 0) {
+            if (message.length > 5) {
+                message[4] = message.splice(4).join('|');
+            }
+            if (message[0] === 'loadComplete') {
+                this.props.onLoadComplete && this.props.onLoadComplete(Number(message[1]), this.state.path, {
+                    width: Number(message[2]),
+                    height: Number(message[3]),
+                },
+                message[4]&&JSON.parse(message[4]));
+            } else if (message[0] === 'pageChanged') {
+                this.props.onPageChanged && this.props.onPageChanged(Number(message[1]), Number(message[2]));
+            } else if (message[0] === 'error') {
+                this._onError(new Error(message[1]));
+            } else if (message[0] === 'pageSingleTap') {
+                this.props.onPageSingleTap && this.props.onPageSingleTap(Number(message[1]), Number(message[2]), Number(message[3]));
+            } else if (message[0] === 'scaleChanged') {
+                this.props.onScaleChanged && this.props.onScaleChanged(Number(message[1]));
+            } else if (message[0] === 'linkPressed') {
+                this.props.onPressLink && this.props.onPressLink(message[1]);
+            }
+        }
+
+    };
+
+    _onError = (error) => {
+
+        this.props.onError && this.props.onError(error);
+
+    };
+
+    render() {
+        if (Platform.OS === "android" || Platform.OS === "ios" || Platform.OS === "windows") {
+                return (
+                    <View style={[this.props.style,{overflow: 'hidden'}]}>
+                        {!this.state.isDownloaded?
+                            (<View
+                                style={styles.progressContainer}
+                            >
+                                {this.props.renderActivityIndicator
+                                    ? this.props.renderActivityIndicator(this.state.progress)
+                                    : <Text>{`${(this.state.progress * 100).toFixed(2)}%`}</Text>}
+                            </View>):(
+                                Platform.OS === "android" || Platform.OS === "windows"?(
+                                        <PdfCustom
+                                            ref={component => (this._root = component)}
+                                            {...this.props}
+                                            style={[{flex:1,backgroundColor: '#EEE'}, this.props.style]}
+                                            path={this.state.path}
+                                            onChange={this._onChange}
+                                        />
+                                    ):(
+                                        this.props.usePDFKit ?(
+                                                <PdfCustom
+                                                    ref={component => (this._root = component)}
+                                                    {...this.props}
+                                                    style={[{backgroundColor: '#EEE',overflow: 'hidden'}, this.props.style]}
+                                                    path={this.state.path}
+                                                    onChange={this._onChange}
+                                                />
+                                            ):(<PdfView
+                                                {...this.props}
+                                                style={[{backgroundColor: '#EEE',overflow: 'hidden'}, this.props.style]}
+                                                path={this.state.path}
+                                                onLoadComplete={this.props.onLoadComplete}
+                                                onPageChanged={this.props.onPageChanged}
+                                                onError={this._onError}
+                                                onPageSingleTap={this.props.onPageSingleTap}
+                                                onScaleChanged={this.props.onScaleChanged}
+                                                onPressLink={this.props.onPressLink}
+                                            />)
+                                    )
+                                )}
+                    </View>);
+        } else {
+            return (null);
+        }
+
+
+    }
+}
+
+if (Platform.OS === "android" || Platform.OS === "ios") {
+    var PdfCustom = PdfViewNativeComponent;
+}  else if (Platform.OS === "windows") {
+    var PdfCustom = requireNativeComponent('RCTPdf', Pdf, {
+        nativeOnly: {path: true, onChange: true},
+    })
+}
+
+const styles = StyleSheet.create({
+    progressContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    progressBar: {
+        width: 200,
+        height: 2
+    }
+});

package/index.js.flow

@@ -39,6 +39,8 @@ export type Props = {
   enableRTL?: boolean,
   fitPolicy?: FitWidth | FitHeight | FitBoth,
   horizontal?: boolean,
+  showsHorizontalScrollIndicator?: boolean,
+  showsVerticalScrollIndicator?: boolean,
   maxScale?: number,
   minScale?: number,
   singlePage?: boolean,

package/ios/{RCTPdf/PdfManager.m → RNPDFPdf/PdfManager.mm}

@@ -136,7 +136,7 @@ RCT_EXPORT_METHOD(loadFile:(NSString *)path
 {
     // release pdf docs
     for(NSValue *item in pdfDocRefs) {
-        CGPDFDocumentRef pdfItem = [item pointerValue];
+        CGPDFDocumentRef pdfItem = (CGPDFDocumentRef)[item pointerValue];
         if (pdfItem != NULL) {
 
             CGPDFDocumentRelease(pdfItem);

package/ios/{RCTPdf/RCTPdfPageView.h → RNPDFPdf/RNPDFPdfPageView.h}

@@ -13,7 +13,7 @@
 #endif
 
 
-@interface RCTPdfPageView : UIView
+@interface RNPDFPdfPageView : UIView
 
 @property(nonatomic) int fileNo;
 @property(nonatomic) int page;

package/ios/{RCTPdf/RCTPdfPageView.m → RNPDFPdf/RNPDFPdfPageView.mm}

@@ -7,7 +7,7 @@
  */
 
 #import "PdfManager.h"
-#import "RCTPdfPageView.h"
+#import "RNPDFPdfPageView.h"
 
 
 
@@ -37,15 +37,15 @@
 #define RLog( s, ... ) NSLog( @"<%p %@:(%d)> %@", self, [[NSString stringWithUTF8String:__FILE__] lastPathComponent], __LINE__, [NSString stringWithFormat:(s), ##__VA_ARGS__] )
 
 @interface CAPdfLayer : CALayer
--(void) setParentView:(RCTPdfPageView *)parentView;
+-(void) setParentView:(RNPDFPdfPageView *)parentView;
 @end
 
 @implementation CAPdfLayer
 {
-    RCTPdfPageView *_parentView;
+    RNPDFPdfPageView *_parentView;
 }
 
--(void) setParentView:(RCTPdfPageView *)parentView
+-(void) setParentView:(RNPDFPdfPageView *)parentView
 {
     _parentView = parentView;
 }
@@ -134,7 +134,7 @@
 }
 @end
 
-@implementation RCTPdfPageView {
+@implementation RNPDFPdfPageView {
     
     CAPdfLayer         *_layer;
 }

package/ios/{RCTPdf/RCTPdfPageViewManager.h → RNPDFPdf/RNPDFPdfPageViewManager.h}

@@ -13,6 +13,6 @@
 #endif
 
 
-@interface RCTPdfPageViewManager : RCTViewManager
+@interface RNPDFPdfPageViewManager : RCTViewManager
 
 @end