# Install & setup module
$ npm install react-native-override-user-interface-style --save
# --- or ---
$ yarn add react-native-override-user-interface-styl

# If you're developing your app using iOS, don't forget to run this command
$ cd ios/ && pod install

Manual linking (only if needed)

Manually link the library on iOS

Add this line to your ios/Podfile file, then run pod install.

target 'YourAwesomeProject' do
  pod 'RNUserInterfaceStyle', :path => '../node_modules/react-native-override-user-interface-style'
Manually link the library on android

  1. Add the following lines to android/settings.gradle:

include ':react-native-override-user-interface-style'
project(':react-native-override-user-interface-style').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-override-user-interface-style/android')
  1. Add the implementation line to the dependencies in android/app/build.gradle:

dependencies {
  // ...
  implementation project(':react-native-override-user-interface-style')
  1. Add the import and link the package in

package com.maruzzing.rnuserinterfacestyle.RNUserInterfaceStylePackage; 

public class MainApplication extends Application implements ReactApplication {

    protected List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      packages.add(new RNUserInterfaceStylePackage());
      return packages;



  1. Add AppGroup to your info.plist:

  1. Update AppDelegate.m with the following additions:

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNUserInterfaceStyle.h" // <- add the header import

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    // ...other code

    [RNUserInterfaceStyle initSystemTheme];  // <- initialization system theme

    return YES;


  1. Update with the following additions:

import com.humanscape.rarenote.RNUserInterfaceStyle.RNUserInterfaceStyleManager; // <- add this necessary import

public class MainActivity extends ReactActivity {
    protected void onCreate(Bundle savedInstanceState) {
      RNUserInterfaceStyleManager.initSystemTheme(getApplicationContext(), "your preference name"); // <- initialization system theme


import RNUserInterfaceStyle from 'react-native-override-user-interface-style';

// or ES6+ destructured imports

import { getTheme, setTheme } from 'react-native-override-user-interface-style';


  • theme (String)
    • default – follows system appearance
    • light – light mode
    • dark – dark mode


function getTheme():Promise<Theme | null>; // Gets saved theme type;
function setTheme(theme:Theme): void; // Set theme type


View Github