Advanced Techniques for React Native UI Components

class PSPDFKitView extends React.Component {
	render() {
		return <RCTPSPDFKitView {...this.props} />;
	}
}

PSPDFKitView.propTypes = {
	/**
	 * The path to the PDF file that should be displayed.
	 * @type {string}
	 * @memberof PSPDFKitView
	 */
	document: PropTypes.string,
};

var RCTPSPDFKitView = requireNativeComponent(
	'RCTPSPDFKitView',
	PSPDFKitView,
);

modules.exports = PSPDFKitView;

<RCTPSPDFKitView ref="pdfView" {...this.props} />

import { UIManager, findNodeHandle } from 'react-native';
/**
 * Saves the document that’s currently open.
 * @method saveCurrentDocument
 * @memberof PSPDFKitView
 * @example
 * const result = await this.pdfRef.current.saveCurrentDocument();
 *
 * @returns { Promise<boolean> } A promise resolving to `true` if the document was saved, and `false` if not.
 */
saveCurrentDocument = function () {
	UIManager.dispatchViewManagerCommand(
		findNodeHandle(this.refs.pdfView),
		UIManager.RCTPSPDFKitView.Commands.saveCurrentDocument,
		[],
	);
};

public class ReactPdfViewManager extends ViewGroupManager<PdfView> {
  // You need to define a constant for each command you want to call
  // from react-native.
  public static final int COMMAND_SAVE_CURRENT_DOCUMENT = 3;
  ...
  @Nullable
  @Override
  public Map<String, Integer> getCommandsMap() {
    // You need to implement this method and return a map with the readable
    // name and constant for each of your commands. The name you specify
    // here is what you'll later use to access it in react-native.
    return MapBuilder.of(
      "saveCurrentDocument",
      COMMAND_SAVE_CURRENT_DOCUMENT
    );
  }
  ...
  @Override
  public void receiveCommand(final PdfView root, int commandId, @Nullable ReadableArray args) {
    // This will be called whenever a command is sent from react-native.
    switch (commandId) {
      case COMMAND_SAVE_CURRENT_DOCUMENT:
        if (args != null) {
            final int requestId = args.getInt(0);
            try {
                boolean result = root.saveCurrentDocument();
                root.getEventDispatcher().dispatchEvent(new PdfViewDataReturnedEvent(root.getId(), requestId, result));
            } catch (Exception e) {
                root.getEventDispatcher().dispatchEvent(new PdfViewDataReturnedEvent(root.getId(), requestId, e));
            }
        }
        break;
    }
  }
}

// PSPDFKitView.js
// We need to keep track of all running requests, so we store a counter.
_nextRequestId = 1;
// We also need to keep track of all the promises we created so we can
// resolve them later.
_requestMap = new Map();

render() {
  <RCTPSPDFKitView
    ref="pdfView"
    {...this.props}
    onDataReturned={this._onDataReturned} />
}

_onDataReturned = (event) => {
  // We grab the relevant data out of our event.
  let { requestId, result, error } = event.nativeEvent
  // Then we get the promise we saved earlier for the given request ID.
  let promise = this._requestMap[requestId]
  if (result) {
    // If it was successful, we resolve the promise.
    promise.resolve(result)
  } else {
    // Otherwise, we reject it.
    promise.reject(error)
  }
  // Finally, we clean up our request map.
  this._requestMap.delete(requestId)
}

/**
 * Gets all annotations of the given type from the specified page.
 *
 * @method getAnnotations
 * @memberof PSPDFKitView
 * @param { number } pageIndex The page index to get the annotations for, starting at 0.
 * @param { string } [type] The type of annotations to get. If not specified or `null`, all annotation types will be returned.
 * @example
 * const result = await this.pdfRef.current.getAnnotations(3, 'pspdfkit/ink');
 * @see {@link https://pspdfkit.com/guides/web/json/schema/annotations/} for supported types.
 *
 * @returns { Promise } A promise containing an object with an array of InstantJSON objects.
 */
function getAnnotations(pageIndex, type) {
	// Grab a new request ID and our request map.
	let requestId = this._nextRequestId++;
	let requestMap = this._requestMap;

	// We create a promise here that will be resolved once `_onRequestDone` is
	// called.
	let promise = new Promise(function (resolve, reject) {
		requestMap[requestId] = { resolve: resolve, reject: reject };
	});

	// Now just dispatch the command as before, adding the request ID to the
	// parameters.
	UIManager.dispatchViewManagerCommand(
		findNodeHandle(this.refs.pdfView),
		UIManager.RCTPSPDFKitView.Commands.getAnnotations,
		[requestId, pageIndex, type],
	);

	return promise;
}

public class PdfViewDataReturnedEvent extends Event<PdfViewDataReturnedEvent> {

  public static final String EVENT_NAME = "pdfViewDataReturned";

  private final WritableMap payload;

  public MyCustomViewRequestDoneEvent(@IdRes int viewId, int requestId, @NonNull List<Annotation> annotations) {
    super(viewId);

    payload = Arguments.createMap();
    payload.putInt("requestId", requestId);
    // Put our annotations into the payload.
    payload.putString("result", SerializationUtils.serializeAnnotations(annotations));
  }

  @Override
  public String getEventName() {
    return EVENT_NAME;
  }

  @Override
  public void dispatch(RCTEventEmitter rctEventEmitter) {
    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), payload);
  }
}

// ReactPdfViewManager.java

@Nullable
@Override
public Map getExportedCustomDirectEventTypeConstants() {
  return MapBuilder.of(PdfViewDataReturnedEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDataReturned"));
}

// ReactPdfViewManager.java

public static final int COMMAND_GET_ANNOTATIONS = 4;
...
@Override
protected PdfView createViewInstance(ThemedReactContext reactContext) {
  ...
  // You need to make sure you have access to the `EventDispatcher` when your command is called.
  pdfView.inject(fragmentActivity.getSupportFragmentManager(),
    reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher());
  ...
}
...

@Override
public void receiveCommand(final PdfView root, int commandId, @Nullable ReadableArray args) {
  switch (commandId) {
    ...
    case COMMAND_GET_ANNOTATIONS:
      if (args != null) {
          final int requestId = args.getInt(0);
          Disposable annotationDisposable = root.getAnnotations(args.getInt(1), args.getString(2))
                  .subscribeOn(Schedulers.io())
                  .observeOn(AndroidSchedulers.mainThread())
                  .subscribe(new Consumer<List<Annotation>>() {
                      @Override
                      public void accept(List<Annotation> annotations) {
                          root.getEventDispatcher().dispatchEvent(new PdfViewDataReturnedEvent(root.getId(), requestId, annotations));
                      }
                  });
          annotationDisposables.add(annotationDisposable);
      }
      break;
  }
}