iosreactjsreact-nativepdfreact-native-pdf

Display PDF in React Native using Forms Field value not showing on IOS


Im trying to create a viewer on our app using the react-native-pdf and tried react-native-view-pdf but i have problems with the PDF Forms field on IOS the values/data aren't showing. But when the field is focused/tapped it will show the value/data. on Android the Forms field data is showing as expected. Image on IOS shown below:

IOS PDF first load

IOS PDF Field tapped/focused

Using react-native-pdf:

<View style={{ flex: 1 }}>
    <Pdf
        minScale={1.0}
        maxScale={1.0}
        scale={1.0}
        spacing={0}
        fitPolicy={2}
        enablePaging={true}
     // onTouchStart={(e) => {
     //     console.log('touchMove', e.nativeEvent);
     //     if (this.state.pdfEditMode) {
     //         this.setState({ showDraggrable: false, cxValue: e.nativeEvent.locationX, cyValue: e.nativeEvent.locationY, xValue: e.nativeEvent.locationX, yValue: e.nativeEvent.locationY }, () => {
     //             setTimeout(() => {
     //                 this.setState({ showDraggrable: true, })
     //             }, 0)
     //         })
     //     }
     // }}
        usePDFKit={false}
        source={{ uri: `data:application/pdf;base64,${this.state.pdfBase64}` }}
        onLoadComplete={(numberOfPages, filePath, { width, height }) => { this.setPageWH(width, height) }}
        onPageChanged={(page, numberOfPages) => {
            console.log(`current page: ${page}`);
            this.setState({ pageNumber: page });
        }}
        onError={(error) => {
            console.log(error);
        }}
        onPressLink={(uri) => {
            console.log(`Link presse: ${uri}`)
        }}
       // onPageSingleTap={(page, x, y) => {
       //     console.log(x, y)
       //     this.handleSingleTap(page, x, y);
       // }}
         style={styles.pdf}/> </View>

Using react-native-view-pdf

<View style={{ flex: 1}}>     
    <PDFView
        fadeInDuration={250.0}
        style={styles.pdf}
        resource={this.state.pdfBase64}
        resourceType={'base64'}
        onLoad={() => console.log(`PDF rendered from base64}`)}
        onError={(error) => console.log('Cannot render PDF', error)}/> 
    </View>

Libraries Version:

 "react": "16.6.3",
 "react-native": "0.58.1",
 "react-native-pdf": "^5.1.7",
 "react-native-view-pdf": "^0.11.0",

Solution

  • This will be on IOS simulator not on a physical device. Tried it on a physical device and the filled values are all displayed.