---
title: "Customize Nutrient appearance"
canonical_url: "https://www.nutrient.io/guides/react-native/knowledge-base/react-native-appearance-customization/"
md_url: "https://www.nutrient.io/guides/react-native/knowledge-base/react-native-appearance-customization.md"
last_updated: "2026-05-30T02:20:01.353Z"
description: "Learn how to customize the Nutrient UI using React Native for improved user experience and design flexibility."
---

# Customize Nutrient UI with React Native

To customize the appearance of user interface (UI) elements on iOS when using the [Nutrient React Native library](https://github.com/PSPDFKit/react-native), 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:

```objc

+ (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:

```objc

+ (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](https://www.nutrient.io/guides/android/customizing-the-interface/appearance-styling.md) 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:

- [How to extend React Native APIs](https://www.nutrient.io/blog/how-to-extend-react-native-api/#customizing-the-ui-using-native-code)

- [How to bridge native iOS code to React Native](https://www.nutrient.io/blog/how-to-bridge-native-ios-code-to-react-native/)
---

## Related pages

- [How Do I Overlay A Custom Ui Element In React Native](/guides/react-native/knowledge-base/how-do-i-overlay-a-custom-ui-element-in-react-native.md)