react-native-override-user-interface-style
v1.0.2
Published
React Native package to override userInterfaceStyle on iOS 13.0+ and AppCompatDelegate.setDefaultNightMode on Android10+
Downloads
56
Readme
react-native-override-user-interface-style
Installation
# Install & setup module
$ npm install react-native-override-user-interface-style --save
# --- or ---
$ yarn add react-native-override-user-interface-style
# If you're developing your app using iOS, don't forget to run this command
$ cd ios/ && pod install
Manual linking (only if needed)
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'
end
- 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')
- Add the implementation line to the dependencies in
android/app/build.gradle
:
dependencies {
// ...
implementation project(':react-native-override-user-interface-style')
}
- Add the import and link the package in
MainApplication.java
:
package com.maruzzing.rnuserinterfacestyle.RNUserInterfaceStylePackage;
public class MainApplication extends Application implements ReactApplication {
// …
@Override
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;
}
// …
}
Setup
iOS
- Add AppGroup to your
info.plist
:
<key>AppGroup</key>
<string>your.group.name</string>
- 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;
}
@end
android
- Update
MainActivity.java
with the following additions:
import com.humanscape.rarenote.RNUserInterfaceStyle.RNUserInterfaceStyleManager; // <- add this necessary import
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
RNUserInterfaceStyleManager.initSystemTheme(getApplicationContext(), "your preference name"); // <- initialization system theme
super.onCreate(savedInstanceState);
}
}
Usage
import RNUserInterfaceStyle from 'react-native-override-user-interface-style';
// or ES6+ destructured imports
import { getTheme, setTheme } from 'react-native-override-user-interface-style';
Properties
- theme (String)
- default - follows system appearance
- light - light mode
- dark - dark mode
API
function getTheme():Promise<Theme | null>; // Gets saved theme type;
function setTheme(theme:Theme): void; // Set theme type