Form is not showing up on iOS

Technical Support
, , , ,
1

Product: React Native

Product Version: Lastest

Please give a brief summary of your issue:
(Think of this as an email subject)

The form is not showing up on iOS devices, while it appears correctly on Android devices.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

I am importing annotations from XFDF format. Here is my XFDF file:

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
    <pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4">
        <ffield type="Tx" name="TextFormField 1">
            <font name="Helvetica" size="10" />
        </ffield>
        <ffield type="Tx" name="TextFormField 2">
            <font name="Helvetica" size="10" />
        </ffield>
        <ffield type="Btn" name="CheckBoxFormField 3">
            <font name="Helvetica" />
        </ffield>
        <ffield type="Btn" name="CheckBoxFormField 4">
            <font name="Helvetica" />
        </ffield>
        <widget field="TextFormField 1" name="426b98b7-81b6-7cd4-96a8-997b6634237d" modified-date="D:20230526093331+07'00'" page="1">
            <rect x1="109" x2="216" y1="592" y2="617" />
            <border width="0.1" style="null" />
            <background-color r="205" g="205" b="205" />
        </widget>
        <widget field="TextFormField 2" name="a1d8b8f7-4215-e1cd-3b7e-7c21f7fe78bf" modified-date="D:20230526093331+07'00'" page="1">
            <rect x1="363" x2="502" y1="649" y2="672" />
            <border width="0.1" style="null" />
            <background-color r="205" g="205" b="205" />
        </widget>
        <widget appearance="Off" field="CheckBoxFormField 3" name="319c0298-0dfa-d15b-8fda-ea383b9caf8e" modified-date="D:20230526093331+07'00'" page="1">
            <rect x1="163" x2="178" y1="466" y2="480" />
            <border width="0" style="null">
                <color a="0" />
            </border>
            <appearances>
                <aappearance name="Off" />
                <aappearance name="Yes" />
            </appearances>
        </widget>
        <widget appearance="Off" field="CheckBoxFormField 4" name="ae34bb49-5a51-f8e1-dafe-0c9ff399589c" modified-date="D:20230526093331+07'00'" page="1">
            <rect x1="212" x2="229" y1="464" y2="481" />
            <border width="0" style="null">
                <color a="0" />
            </border>
            <appearances>
                <aappearance name="Off" />
                <aappearance name="Yes" />
            </appearances>
        </widget>
    </pdf-info>
    <fields>
        <field name="TextFormField 1">
            <value></value>
        </field>
        <field name="TextFormField 2">
            <value></value>
        </field>
        <field name="CheckBoxFormField 3">
            <value>Off</value>
        </field>
        <field name="CheckBoxFormField 4">
            <value>Off</value>
        </field>
    </fields>
    <annots />
    <pages>
        <defmtx matrix="1,0,0,-1,0,792" />
    </pages>
</xfdf>

This is my code:

  onDocumentLoaded = () => {
    if (this._viewer) {
      const xfdf = this.getXFDF();
      this._viewer.importAnnotations(xfdf);
    }
  };

  render() {
    const path = 'https://showcase.apryse.com/gallery/sales-invoice.pdf';

    return (
      <DocumentView
        ref={c => (this._viewer = c)}
        document={path}
        onDocumentLoaded={this.onDocumentLoaded}
        fitMode={Config.FitMode.FitPage}
        layoutMode={Config.LayoutMode.Continuous}
      />
    );
  }

Please provide a link to a minimal sample where the issue is reproducible:

Simulator Screen Shot - iPhone 14 Pro - 2023-05-26 at 09.51.50
Simulator Screen Shot - iPhone 14 Pro - 2023-05-26 at 09.51.501179×2556 206 KB
Screenshot_1685069508
Screenshot_16850695081080×2280 197 KB

2

Are you able to reproduce the issue in the React Native example project (modifying as necessary)? If you could please provide the modified sample project that would be appreciated. Thank you.

3

After exporting an XFDF file from WebViewer https://showcase.apryse.com/xfdf-annotations-in-pdf/, I attempted to import it into a React Native example project. However, the form is not displaying properly on iOS.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  PermissionsAndroid,
  BackHandler,
  Alert
} from 'react-native';

import { DocumentView, RNPdftron, Config } from 'react-native-pdftron';

type Props = {};
export default class App extends Component<Props> {

  constructor(props) {
    super(props);
  }

  onLeadingNavButtonPressed = () => {
    console.log('leading nav button pressed');
    if (this._viewer) {
      this._viewer.setStampImageData().then((annotationId, pageNumber, stampImageDataUrl) => {
        annotationID = '75911d3a-f1fa-7a4f-8137-5885e3a4c4ae',
        pageNumber = 1,
        stampImageData = 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png';
      });
    }

    if (Platform.OS === 'ios') {
      Alert.alert(
        'App',
        'onLeadingNavButtonPressed',
        [
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        { cancelable: true }
      )
    } else {
      BackHandler.exitApp();
    }
  }

  onDocumentLoaded = () => {
    if (this._viewer) {
      const xfdf = `<?xml version="1.0" encoding="UTF-8" ?>
      <xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
          <pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4">
              <ffield type="Tx" name="TextFormField 1">
                  <font name="Helvetica" size="10" />
              </ffield>
              <ffield type="Tx" name="TextFormField 2">
                  <font name="Helvetica" size="10" />
              </ffield>
              <ffield type="Btn" name="CheckBoxFormField 3">
                  <font name="Helvetica" />
              </ffield>
              <ffield type="Btn" name="CheckBoxFormField 4">
                  <font name="Helvetica" />
              </ffield>
              <widget field="TextFormField 1" name="426b98b7-81b6-7cd4-96a8-997b6634237d" modified-date="D:20230526093331+07'00'" page="1">
                  <rect x1="109" x2="216" y1="592" y2="617" />
                  <border width="0.1" style="null" />
                  <background-color r="205" g="205" b="205" />
              </widget>
              <widget field="TextFormField 2" name="a1d8b8f7-4215-e1cd-3b7e-7c21f7fe78bf" modified-date="D:20230526093331+07'00'" page="1">
                  <rect x1="363" x2="502" y1="649" y2="672" />
                  <border width="0.1" style="null" />
                  <background-color r="205" g="205" b="205" />
              </widget>
              <widget appearance="Off" field="CheckBoxFormField 3" name="319c0298-0dfa-d15b-8fda-ea383b9caf8e" modified-date="D:20230526093331+07'00'" page="1">
                  <rect x1="163" x2="178" y1="466" y2="480" />
                  <border width="0" style="null">
                      <color a="0" />
                  </border>
                  <appearances>
                      <aappearance name="Off" />
                      <aappearance name="Yes" />
                  </appearances>
              </widget>
              <widget appearance="Off" field="CheckBoxFormField 4" name="ae34bb49-5a51-f8e1-dafe-0c9ff399589c" modified-date="D:20230526093331+07'00'" page="1">
                  <rect x1="212" x2="229" y1="464" y2="481" />
                  <border width="0" style="null">
                      <color a="0" />
                  </border>
                  <appearances>
                      <aappearance name="Off" />
                      <aappearance name="Yes" />
                  </appearances>
              </widget>
          </pdf-info>
          <fields>
              <field name="TextFormField 1">
                  <value></value>
              </field>
              <field name="TextFormField 2">
                  <value></value>
              </field>
              <field name="CheckBoxFormField 3">
                  <value>Off</value>
              </field>
              <field name="CheckBoxFormField 4">
                  <value>Off</value>
              </field>
          </fields>
          <annots />
          <pages>
              <defmtx matrix="1,0,0,-1,0,792" />
          </pages>
      </xfdf>`;
      this._viewer.importAnnotations(xfdf);
    }
  }

  onAnnotationChanged = ({action, annotations}) => {
    // console.log('action', action);
    // console.log('annotations', annotations);
    // if (this._viewer) {
    //   this._viewer.exportAnnotations({annotList: annotations}).then((xfdf) => {
    //     console.log('xfdf for annotations', xfdf);
    //   });
    // }
  }

  onZoomChanged = ({zoom}) => {
    // console.log('zoom', zoom);
  }

  onExportAnnotationCommand = ({action, xfdfCommand}) => {
    console.log('action', action);
    console.log('xfdfCommand', xfdfCommand);
  }

  setStampImageData = ({annotationId, pageNumber, stampImageDataUrl}) => {
    annotationID = '75911d3a-f1fa-7a4f-8137-5885e3a4c4ae',
    pageNumber = 1,
    stampImageData = 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png';
  }

  render() {
    const path = "https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf";
    const myToolbar = {
      [Config.CustomToolbarKey.Id]: 'myToolbar',
      [Config.CustomToolbarKey.Name]: 'myToolbar', 
      [Config.CustomToolbarKey.Icon]: Config.ToolbarIcons.FillAndSign,
      [Config.CustomToolbarKey.Items]: [Config.Tools.annotationCreateArrow, Config.Tools.annotationCreateCallout, Config.Buttons.undo]
    };

    return (
      <DocumentView
          ref={(c) => this._viewer = c}
          // hideDefaultAnnotationToolbars={[Config.DefaultToolbars.Annotate]}
          // annotationToolbars={[Config.DefaultToolbars.Annotate, myToolbar]}
          hideAnnotationToolbarSwitcher={false}
          hideTopToolbars={false}
          hideTopAppNavBar={false}
          document={path}
          padStatusBar={true}
          showLeadingNavButton={true}
          leadingNavButtonIcon={Platform.OS === 'ios' ? 'ic_close_black_24px.png' : 'ic_arrow_back_white_24dp'}
          onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
          onDocumentLoaded={this.onDocumentLoaded}
          onAnnotationChanged={this.onAnnotationChanged}
          onExportAnnotationCommand={this.onExportAnnotationCommand}
          onZoomChanged={this.onZoomChanged}
          readOnly={false}
          disabledElements={[Config.Buttons.userBookmarkListButton]}
          disabledTools={[Config.Tools.annotationCreateLine, Config.Tools.annotationCreateRectangle]}
          fitMode={Config.FitMode.FitPage}
          layoutMode={Config.LayoutMode.Continuous}
          setStampImageData = {this.setStampImageData}
          openOutlineList = {true}
        />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});
4

Hi,

Thank you for the additional information. We are investigating and will keep you updated.
How critical is this issue for your workflow?

5

This issue is critical because our customer has requested this feature.