Merge pull request #255 from PSPDFKit/rad/toolbarTitle-ios

Add `toolbarTitle` Javascript API to override the iOS toolbar title

Author: radazzouz

index.js

@@ -100,7 +100,8 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.enterAnnotationCreationMode,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands
+          .enterAnnotationCreationMode,
         []
       );
     } else if (Platform.OS === "ios") {
@@ -117,7 +118,8 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.exitCurrentlyActiveMode,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands
+          .exitCurrentlyActiveMode,
         []
       );
     } else if (Platform.OS === "ios") {
@@ -134,7 +136,8 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.saveCurrentDocument,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands
+          .saveCurrentDocument,
         []
       );
     } else if (Platform.OS === "ios") {
@@ -165,7 +168,7 @@ class PSPDFKitView extends React.Component {
 
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.getAnnotations,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands.getAnnotations,
         [requestId, pageIndex, type]
       );
 
@@ -188,7 +191,7 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.addAnnotation,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands.addAnnotation,
         [annotation]
       );
     } else if (Platform.OS === "ios") {
@@ -208,7 +211,7 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.removeAnnotation,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands.removeAnnotation,
         [annotation]
       );
     } else if (Platform.OS === "ios") {
@@ -236,7 +239,8 @@ class PSPDFKitView extends React.Component {
 
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.getAllUnsavedAnnotations,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands
+          .getAllUnsavedAnnotations,
         [requestId]
       );
 
@@ -257,7 +261,7 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.addAnnotations,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands.addAnnotations,
         [annotations]
       );
     } else if (Platform.OS === "ios") {
@@ -288,7 +292,8 @@ class PSPDFKitView extends React.Component {
 
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.getFormFieldValue,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands
+          .getFormFieldValue,
         [requestId, fullyQualifiedName]
       );
 
@@ -311,7 +316,8 @@ class PSPDFKitView extends React.Component {
     if (Platform.OS === "android") {
       UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.refs.pdfView),
-        this._getViewManagerConfig('RCTPSPDFKitView').Commands.setFormFieldValue,
+        this._getViewManagerConfig("RCTPSPDFKitView").Commands
+          .setFormFieldValue,
         [fullyQualifiedName, value]
       );
     } else if (Platform.OS === "ios") {
@@ -398,7 +404,7 @@ class PSPDFKitView extends React.Component {
   };
 
   _getViewManagerConfig = viewManagerName => {
-    const version = NativeModules.PlatformConstants.reactNativeVersion.minor
+    const version = NativeModules.PlatformConstants.reactNativeVersion.minor;
     if (version >= 58) {
       return UIManager.getViewManagerConfig(viewManagerName);
     } else {
@@ -531,7 +537,15 @@ PSPDFKitView.propTypes = {
    *
    * @platform ios
    */
-  rightBarButtonItems: PropTypes.array
+  rightBarButtonItems: PropTypes.array,
+  /**
+   * toolbarTitle: Can be used to specfiy a custom toolbar title on iOS by setting the `title` property of the `PSPDFViewController`.
+   * Note: You need to set `showDocumentLabel`, `useParentNavigationBar`, and `allowToolbarTitleChange` to false in your Configuration before setting the custom title.
+   * See `ConfiguredPDFViewComponent` in https://github.com/PSPDFKit/react-native/blob/master/samples/Catalog/Catalog.ios.js
+   *
+   * @platform ios
+   */
+  toolbarTitle: PropTypes.string
 };
 
 if (Platform.OS === "ios" || Platform.OS === "android") {

ios/RCTPSPDFKit/RCTPSPDFKitViewManager.m

@@ -73,6 +73,12 @@ @implementation RCTPSPDFKitViewManager
   }
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(toolbarTitle, NSString, RCTPSPDFKitView) {
+  if (json) {
+    view.pdfController.title = json;
+  }
+}
+
 RCT_EXPORT_VIEW_PROPERTY(hideNavigationBar, BOOL)
 
 RCT_EXPORT_VIEW_PROPERTY(disableDefaultActionForTappedAnnotations, BOOL)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-pspdfkit",
-  "version": "1.24.5",
+  "version": "1.24.6",
   "description": "A React Native module for the PSPDFKit library.",
   "keywords": [
     "react native",

package.json

@@ -251,8 +251,11 @@ class ConfiguredPDFViewComponent extends Component {
           configuration={{
             backgroundColor: processColor("lightgrey"),
             showThumbnailBar: "scrubberBar",
-            showDocumentLabel: true
+            showDocumentLabel: false,
+            useParentNavigationBar: false,
+            allowToolbarTitleChange: false
           }}
+          toolbarTitle={"Custom Title"}
           style={{ flex: 1, color: pspdfkitColor }}
         />
       </View>

samples/Catalog/Catalog.ios.js

@@ -1,6 +1,6 @@
 {
   "name": "Catalog",
-  "version": "1.24.5",
+  "version": "1.24.6",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start"