About fork

This work increases dependency version for React and React Native to support latest releases. It also contains compiled package in dist. This is made to make it super simple as it's intended for internal use only.

React Native User Interface Style

React Native User Interface Style ("RNUIS") is a React Native package to override userInterfaceStyle on iOS 13.0+. It extends react native’s built-in Appearance API by providing a way for users to override the app’s color scheme on iOS only.

The package implements Apple's UIView overrideUserInterfaceStyle property to override the app's color scheme (light / dark / unspecified).

Getting started

1. Install the library using either Yarn:

yarn add react-native-user-interface-style

or npm:

npm install --save react-native-user-interface-style

2. Install to Xcode:

npx pod-install

Or, if you already have installed Cocoapods on your system:

cd ios && pod install

3. Include the library in your code:

import UserInterfaceStyle from "react-native-user-interface-style";

4. Compile and have fun!

Properties

• style (String)
  • unspecified - system (light/dark) appearance
  • light - light mode
  • dark - dark mode

Usage

Overriding the app's appearance User Interface Style value

You can use the setStyle method from UserInterfaceStyle to override the current appearance of the app:

import UserInterfaceStyle from 'react-native';

const setUserInferfaceStyle = (style) => {
  UserInterfaceStyle.setStyle(style)
};

Example

Below you can find an example of a simple application using setStyle from RNUIS and useColorScheme from RN to change the and read the appearance of the system:

import React from 'react';
import { Text, SafeAreaView, Button, StyleSheet, PlatformColor } from 'react-native';
import UserInterfaceStyle from "react-native-user-interface-style";

function App() {
  // Sets the User Interface Style
  const setUserInferfaceStyle = (style) => {
    UserInterfaceStyle.setStyle(style)
  };
  
  return (
    <SafeAreaView style={[styles.container, {backgroundColor: PlatformColor('systemBackground')}]}>
      <Text style={[styles.text, {color: PlatformColor('label')}]}>Color scheme: {scheme}</Text>
      <Button onPress={() => setUserInferfaceStyle('unspecified')}>System</Button>
      <Button onPress={() => setUserInferfaceStyle('light')}>Light</Button>
      <Button onPress={() => setUserInferfaceStyle('dark')}>Dark</Button>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});