Customize Nutrient UI with React Native

To customize the appearance of user interface (UI) elements on iOS when using the Nutrient React Native library(opens in a new tab), we recommend doing it directly in Objective-C, as this is easier than exposing each and every single element to the TypeScript side.

As an example, consider you want to change the appearance of the navigation bar and the toolbars. You can add the following helper methods in the NutrientModuleCommon.m file:

+ (void)customizeAppearanceOfNavigationBar {
  UIColor *backgroundColor = [UIColor colorWithRed:1.00 green:0.72 blue:0.30 alpha:1.0];
  UIColor *foregroundColor = [UIColor colorWithWhite:0.0 alpha:1];


  // More information: https://developer.apple.com/documentation/uikit/uinavigationbar#1654334
  UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
  appearance.titleTextAttributes = @{ NSForegroundColorAttributeName: foregroundColor };
  appearance.largeTitleTextAttributes = @{ NSForegroundColorAttributeName: foregroundColor };
  appearance.backgroundColor = backgroundColor;


  // Used when presenting `PSPDFViewController` directly inside a `UINavigationController` —
  // for example, when using the `PSPDFKit.present` API in React Native.
  UINavigationBar *appearanceProxy = [UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[UINavigationController.class]];
  appearanceProxy.standardAppearance = appearance;
  appearanceProxy.compactAppearance = appearance;
  appearanceProxy.scrollEdgeAppearance = appearance;
  appearanceProxy.tintColor = foregroundColor;


  // Used when using the `NutrientView` component in React Native.
  // The `NutrientView` is embedded in its own `PSPDFNavigationController`.
  appearanceProxy = [UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[PSPDFNavigationController.class]];
  appearanceProxy.standardAppearance = appearance;
  appearanceProxy.compactAppearance = appearance;
  appearanceProxy.scrollEdgeAppearance = appearance;
  appearanceProxy.tintColor = foregroundColor;


  // Repeat the same customization steps for
  // `[UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[PSPDFNavigationController.class, UIPopoverPresentationController.class]];`
  // if you want to customize the look of navigation bars in popovers on iPad as well.
}


+ (void)customizeAppearanceOfToolbar {
  // Use dynamic colors for light and dark appearance.
  UIColor *backgroundColor = [UIColor colorWithRed:0.77 green:0.88 blue:0.65 alpha:1.0];
  UIColor *foregroundColor = [UIColor colorWithWhite:0.0 alpha:1];


  // More information: https://developer.apple.com/documentation/uikit/uitoolbar#1652878
  UIToolbarAppearance *appearance = [[UIToolbarAppearance alloc] init];
  appearance.backgroundColor = backgroundColor;


  PSPDFFlexibleToolbar *appearanceProxy = [PSPDFFlexibleToolbar appearance];
  appearanceProxy.standardAppearance = appearance;
  appearanceProxy.compactAppearance = appearance;
  appearanceProxy.tintColor = foregroundColor;
}

Once you have these methods, you can call them directly at the relevant points in the app lifetime. For instance, one appropriate place to perform all the global theming would be immediately after setting the license key in NutrientModuleCommon.m in the React Native library, like this:

+ (NSNumber *)setLicenseKey:(NSString * _Nullable)licenseKey {
  dispatch_async(dispatch_get_main_queue(), ^{
    if (licenseKey && (id)licenseKey != (id)kCFNull) {
      [PSPDFKitGlobal setLicenseKey:licenseKey options:@{ @"com.pspdfkit.hybrid-environment": @"ReactNative" }];
    }
  });
  [NutrientModuleCommon customizeAppearanceOfNavigationBar];
  [NutrientModuleCommon customizeAppearanceOfToolbar];
  return @(YES);
}

On Android, theming is done using the standard Android theming system. Refer to the Android appearance customization guide for more information.

For more information and examples on how to customize the UI by bridging Objective-C code to React Native, refer to the following blog posts: