├── example ├── .watchmanconfig ├── app.json ├── meme.png ├── logoDark.png ├── logoLight.png ├── ios │ ├── example │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ └── example.xcodeproj │ │ ├── xcshareddata │ │ └── xcschemes │ │ │ ├── example.xcscheme │ │ │ └── example-tvOS.xcscheme │ │ └── project.pbxproj ├── android │ ├── app │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ ├── colors.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── java │ │ │ │ │ └── com │ │ │ │ │ │ └── example │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ │ └── debug │ │ │ │ └── AndroidManifest.xml │ │ ├── proguard-rules.pro │ │ ├── build_defs.bzl │ │ ├── _BUCK │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ ├── .idea │ │ ├── misc.xml │ │ └── codeStyles │ │ │ └── Project.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── tsconfig.json ├── index.js ├── babel.config.js ├── package.json ├── metro.config.js ├── Extra.tsx └── App.tsx ├── .gitattributes ├── .prettierignore ├── library ├── src │ ├── types.ts │ ├── dynamic-value.ts │ ├── native-module.ts │ ├── use-dark-mode.ts │ ├── initial-mode.ts │ ├── use-dynamic-style-sheet.ts │ ├── index.ts │ ├── event-emitter.ts │ ├── use-dynamic-value.ts │ ├── dark-mode-event-emitter.ts │ ├── context.tsx │ └── dynamic-style-sheet.ts ├── android │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── src │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ └── com │ │ │ └── codemotionapps │ │ │ └── reactnativedarkmode │ │ │ ├── DarkModePackage.java │ │ │ └── DarkModeModule.java │ ├── build.gradle │ ├── gradlew.bat │ └── gradlew ├── .npmignore ├── ios │ ├── RNDarkMode.h │ ├── UIScreen+RNDarkModeTraitChangeListener.h │ ├── RNDarkMode.m │ ├── UIScreen+RNDarkModeTraitChangeListener.m │ └── RNDarkMode.xcodeproj │ │ └── project.pbxproj ├── tsconfig.json ├── ReactNativeDarkMode.podspec ├── package.json └── LICENSE ├── showcase.ios.gif ├── showcase.android.gif ├── .prettierrc ├── .vscode ├── settings.json └── launch.json ├── tsconfig.base.json ├── package.json ├── .gitignore ├── LICENSE └── README.md /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md 2 | .vscode/ 3 | -------------------------------------------------------------------------------- /library/src/types.ts: -------------------------------------------------------------------------------- 1 | export type Mode = 'light' | 'dark' 2 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "example" 4 | } 5 | -------------------------------------------------------------------------------- /example/meme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/meme.png -------------------------------------------------------------------------------- /showcase.ios.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/showcase.ios.gif -------------------------------------------------------------------------------- /example/logoDark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/logoDark.png -------------------------------------------------------------------------------- /showcase.android.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/showcase.android.gif -------------------------------------------------------------------------------- /example/logoLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/logoLight.png -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /library/src/dynamic-value.ts: -------------------------------------------------------------------------------- 1 | export class DynamicValue { 2 | constructor(public readonly light: T, public readonly dark: T) { } 3 | } 4 | -------------------------------------------------------------------------------- /library/src/native-module.ts: -------------------------------------------------------------------------------- 1 | import { NativeModules } from 'react-native' 2 | 3 | export const NativeModule = NativeModules.RNDarkMode 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | React Native Dark Mode Example 3 | 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "trailingComma": "all", 4 | "tabWidth": 4, 5 | "printWidth": 120, 6 | "singleQuote": true, 7 | "useTabs": true 8 | } 9 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #000000 4 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /library/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/library/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /library/src/use-dark-mode.ts: -------------------------------------------------------------------------------- 1 | import { useDarkModeContext } from './context' 2 | 3 | export function useDarkMode() { 4 | return useDarkModeContext() === 'dark' 5 | } 6 | -------------------------------------------------------------------------------- /library/.npmignore: -------------------------------------------------------------------------------- 1 | tsconfig.json 2 | tsconfig.tsbuildinfo 3 | xcuserdata 4 | android/build/ 5 | android/*.iml 6 | android/local.properties 7 | android/.idea 8 | android/.gradle 9 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | "editor.insertSpaces": false, 4 | "editor.formatOnSave": true, 5 | "react-native-tools.projectRoot": "example", 6 | } 7 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /library/android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "react-native-dark-mode": ["../library/src"], 8 | }, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Attach to packager", 6 | "cwd": "${workspaceFolder}/example", 7 | "type": "reactnative", 8 | "request": "attach", 9 | }, 10 | ], 11 | } 12 | -------------------------------------------------------------------------------- /library/src/initial-mode.ts: -------------------------------------------------------------------------------- 1 | import { NativeModule } from './native-module' 2 | import { Mode } from './types' 3 | 4 | export const initialMode: Mode = NativeModule.initialMode 5 | export const supportsDarkMode: boolean = NativeModule.supportsDarkMode 6 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'example' 2 | include ':react-native-dark-mode' 3 | project(':react-native-dark-mode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dark-mode/android') 4 | 5 | include ':app' 6 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry, YellowBox } from 'react-native' 2 | import App from './App' 3 | import { name as appName } from './app.json' 4 | 5 | YellowBox.ignoreWarnings(['Remote debugger']) 6 | 7 | AppRegistry.registerComponent(appName, () => App) 8 | -------------------------------------------------------------------------------- /example/ios/example/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "noImplicitAny": true, 5 | "allowSyntheticDefaultImports": true, 6 | "jsx": "react", 7 | "lib": ["es6"], 8 | "moduleResolution": "node", 9 | "target": "esnext" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /library/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Tue Sep 24 20:48:49 EEST 2019 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.1-all.zip 7 | -------------------------------------------------------------------------------- /library/ios/RNDarkMode.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import "UIScreen+RNDarkModeTraitChangeListener.h" 5 | 6 | @interface RNDarkMode : RCTEventEmitter 7 | 8 | - (void)currentModeChanged:(NSString *)newMode; 9 | 10 | @end 11 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: [ 4 | ['module-resolver', { 5 | root: ['.'], 6 | alias: { 7 | 'react-native-dark-mode': '../library/src', 8 | 'react': './node_modules/react', 9 | }, 10 | }], 11 | ], 12 | } 13 | -------------------------------------------------------------------------------- /library/src/use-dynamic-style-sheet.ts: -------------------------------------------------------------------------------- 1 | import { useDarkModeContext } from './context' 2 | import { DynamicStyleSheet, NormalizeStyles } from './dynamic-style-sheet' 3 | 4 | export function useDynamicStyleSheet(dynamicStyleSheet: DynamicStyleSheet): NormalizeStyles { 5 | const mode = useDarkModeContext() 6 | return dynamicStyleSheet[mode] 7 | } 8 | -------------------------------------------------------------------------------- /library/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './context' 2 | export * from './dynamic-style-sheet' 3 | export * from './dynamic-value' 4 | export * from './event-emitter' 5 | export * from './initial-mode' 6 | export * from './use-dark-mode' 7 | export * from './use-dynamic-style-sheet' 8 | export * from './use-dynamic-value' 9 | export { Mode } from './types' 10 | -------------------------------------------------------------------------------- /library/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "incremental": true, 6 | "sourceMap": true, 7 | "outDir": "./dist", 8 | "baseUrl": ".", 9 | "paths": { 10 | "react": ["../example/node_modules/react"], 11 | }, 12 | }, 13 | "include": [ 14 | "./src", 15 | ], 16 | } 17 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start" 7 | }, 8 | "dependencies": { 9 | "react": "16.8.3", 10 | "react-native": "0.59.9", 11 | "react-native-dark-mode": "0.2.2" 12 | }, 13 | "devDependencies": { 14 | "@types/react": "^16.8.19" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /library/ios/UIScreen+RNDarkModeTraitChangeListener.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "RNDarkMode.h" 4 | 5 | typedef NS_ENUM(NSInteger, RNDarkModeMode) { 6 | RNDarkModeModeLight, 7 | RNDarkModeModeDark, 8 | }; 9 | 10 | @class RNDarkMode; 11 | 12 | @interface UIScreen (RNDarkModeTraitChangeListener) 13 | 14 | + (NSString *)getCurrentMode; 15 | + (void)setCurrentManager:(RNDarkMode *)manager; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | /** 7 | * Returns the name of the main component registered from JavaScript. 8 | * This is used to schedule rendering of the component. 9 | */ 10 | @Override 11 | protected String getMainComponentName() { 12 | return "example"; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /library/src/event-emitter.ts: -------------------------------------------------------------------------------- 1 | import { NativeEventEmitter } from 'react-native' 2 | 3 | import { DarkModeEventEmitter } from './dark-mode-event-emitter' 4 | import { NativeModule } from './native-module' 5 | 6 | const nativeEventEmitter = new NativeEventEmitter(NativeModule) 7 | 8 | export const eventEmitter = new DarkModeEventEmitter() 9 | 10 | nativeEventEmitter.addListener('currentModeChanged', (newStyle) => { 11 | eventEmitter.emit('currentModeChanged', newStyle) 12 | }) 13 | -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /library/src/use-dynamic-value.ts: -------------------------------------------------------------------------------- 1 | import { useDarkModeContext } from './context' 2 | import { DynamicValue } from './dynamic-value' 3 | 4 | export function useDynamicValue(dynamic: DynamicValue): T 5 | export function useDynamicValue(light: T, dark: T): T 6 | export function useDynamicValue(light: T | DynamicValue, dark?: T): T { 7 | const mode = useDarkModeContext() 8 | if (light instanceof DynamicValue) { 9 | return light[mode] 10 | } else { 11 | return mode === 'dark' ? dark! : light 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /example/android/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | -------------------------------------------------------------------------------- /library/src/dark-mode-event-emitter.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter } from 'events' 2 | 3 | import { initialMode } from './initial-mode' 4 | import { Mode } from './types' 5 | 6 | export declare interface DarkModeEventEmitter { 7 | on(event: 'currentModeChanged', listener: (mode: Mode) => void): this 8 | once(event: 'currentModeChanged', listener: (mode: Mode) => void): this 9 | emit(event: 'currentModeChanged', mode: Mode): boolean 10 | } 11 | 12 | export class DarkModeEventEmitter extends EventEmitter { 13 | public currentMode: Mode = initialMode 14 | 15 | constructor() { 16 | super() 17 | 18 | this.on('currentModeChanged', (mode) => { 19 | this.currentMode = mode 20 | }) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const blacklist = require('metro-config/src/defaults/blacklist') 4 | 5 | const libraryPath = path.resolve(__dirname, '..', 'library') 6 | 7 | module.exports = { 8 | watchFolders: [ 9 | path.resolve(__dirname, 'node_modules'), 10 | path.resolve(__dirname, '..', 'node_modules'), 11 | libraryPath, 12 | ], 13 | resolver: { 14 | blacklistPE: blacklist([ 15 | new RegExp(`${libraryPath}/node_modules/react-native/.*`), 16 | ]), 17 | }, 18 | transformer: { 19 | getTransformOptions: async () => ({ 20 | transform: { 21 | experimentalImportSupport: false, 22 | inlineRequires: false, 23 | }, 24 | }), 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "workspaces": { 4 | "packages": [ 5 | "example", 6 | "library" 7 | ], 8 | "nohoist": [ 9 | "**/react-native", 10 | "**/react-native/**", 11 | "**/react", 12 | "**/react/**", 13 | "**/react-native-dark-mode", 14 | "**/react-native-dark-mode/**" 15 | ] 16 | }, 17 | "scripts": { 18 | "start": "yarn workspace example start" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.4.5", 22 | "@babel/runtime": "^7.4.5", 23 | "@types/react-native": "^0.57.60", 24 | "babel-plugin-module-resolver": "^3.2.0", 25 | "metro-react-native-babel-preset": "^0.54.1", 26 | "rimraf": "^2.6.3", 27 | "typescript": "^3.5.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /library/ReactNativeDarkMode.podspec: -------------------------------------------------------------------------------- 1 | require 'json' 2 | 3 | package = JSON.parse(File.read(File.join(__dir__, 'package.json'))) 4 | 5 | Pod::Spec.new do |s| 6 | s.name = "ReactNativeDarkMode" 7 | s.version = package['version'] 8 | s.summary = package['description'] 9 | 10 | s.authors = "react-native-dark-mode" 11 | s.homepage = package['homepage'] 12 | s.license = package['license'] 13 | s.platform = :ios, "9.0" 14 | 15 | s.module_name = 'ReactNativeDarkMode' 16 | 17 | s.source = { :git => "https://github.com/codemotionapps/react-native-dark-mode.git", :tag => "#{s.version}" } 18 | s.source_files = "ios/**/*.{h,m}" 19 | 20 | s.dependency 'React' 21 | s.frameworks = 'UIKit' 22 | end 23 | -------------------------------------------------------------------------------- /library/android/src/main/java/com/codemotionapps/reactnativedarkmode/DarkModePackage.java: -------------------------------------------------------------------------------- 1 | package com.codemotionapps.reactnativedarkmode; 2 | 3 | import java.util.Arrays; 4 | import java.util.Collections; 5 | import java.util.List; 6 | 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.bridge.NativeModule; 9 | import com.facebook.react.bridge.ReactApplicationContext; 10 | import com.facebook.react.uimanager.ViewManager; 11 | 12 | public class DarkModePackage implements ReactPackage { 13 | @Override 14 | public List createNativeModules(ReactApplicationContext reactContext) { 15 | return Arrays.asList(new DarkModeModule(reactContext)); 16 | } 17 | 18 | @Override 19 | public List createViewManagers(ReactApplicationContext reactContext) { 20 | return Collections.emptyList(); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/Extra.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, Text } from 'react-native' 3 | import { DynamicStyleSheet, useDynamicStyleSheet, useDarkModeContext, DynamicValue } from 'react-native-dark-mode' 4 | 5 | export default function Extra() { 6 | const mode = useDarkModeContext() 7 | const styles = useDynamicStyleSheet(dynamicStyleSheet) 8 | return 9 | Forced mode: {mode} 10 | 11 | } 12 | 13 | const dynamicStyleSheet = new DynamicStyleSheet({ 14 | container: { 15 | borderColor: 'red', 16 | borderWidth: 1, 17 | backgroundColor: new DynamicValue('white', 'black'), 18 | width: 150, 19 | height: 50, 20 | justifyContent: 'center', 21 | alignItems: 'center', 22 | }, 23 | text: { 24 | textAlign: 'center', 25 | color: new DynamicValue('black', 'white'), 26 | } 27 | }) 28 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 21 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:3.4.1") 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-dark-mode", 3 | "version": "0.2.2", 4 | "main": "./dist/index.js", 5 | "typings": "./dist/index.d.ts", 6 | "repository": "git@github.com:codemotionapps/react-native-dark-mode.git", 7 | "author": "Dimitar Nestorov (https://dimitarnestorov.com)", 8 | "homepage": "https://github.com/codemotionapps/react-native-dark-mode", 9 | "description": "Detect dark mode in React Native", 10 | "license": "MIT", 11 | "scripts": { 12 | "prepublishOnly": "yarn run clean && yarn run copy-readme && yarn run build", 13 | "clean": "rimraf dist", 14 | "copy-readme": "cp ../README.md ./", 15 | "build": "tsc", 16 | "watch": "yarn run build --watch" 17 | }, 18 | "peerDependencies": { 19 | "react": "^16.8.3", 20 | "react-native": "^0.59.9 || ^0.60.0 || ^0.61.0" 21 | }, 22 | "dependencies": { 23 | "@types/events": "*", 24 | "@types/react": "*", 25 | "@types/react-native": "*", 26 | "@types/node": "^13.13.4", 27 | "events": "^3.0.0", 28 | "toolkit.ts": "^0.0.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | dist/ 59 | 60 | example/.vscode/ 61 | 62 | library/README.md 63 | -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "20x20", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "20x20", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "29x29", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "29x29", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "40x40", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "40x40", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "size" : "60x60", 36 | "scale" : "2x" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "size" : "60x60", 41 | "scale" : "3x" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "size" : "1024x1024", 46 | "scale" : "1x" 47 | } 48 | ], 49 | "info" : { 50 | "version" : 1, 51 | "author" : "xcode" 52 | } 53 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Codemotion Ltd. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /library/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Codemotion Ltd. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /library/ios/RNDarkMode.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "RNDarkMode.h" 4 | 5 | @implementation RNDarkMode 6 | { 7 | bool hasListeners; 8 | } 9 | 10 | - (id)init 11 | { 12 | self = [super init]; 13 | 14 | if (self) { 15 | [UIScreen setCurrentManager:self]; 16 | } 17 | 18 | return self; 19 | } 20 | 21 | RCT_EXPORT_MODULE(); 22 | 23 | - (NSDictionary *)constantsToExport 24 | { 25 | NSNumber *supportsDarkMode = [NSNumber numberWithBool:NO]; 26 | if (@available(iOS 13.0, *)) { 27 | supportsDarkMode = [NSNumber numberWithBool:YES]; 28 | } 29 | 30 | return @{ 31 | @"initialMode": [UIScreen getCurrentMode], 32 | @"supportsDarkMode": supportsDarkMode, 33 | }; 34 | } 35 | 36 | - (NSArray *)supportedEvents 37 | { 38 | return @[@"currentModeChanged"]; 39 | } 40 | 41 | - (void)currentModeChanged:(NSString *)newMode 42 | { 43 | if (hasListeners) { 44 | [self sendEventWithName:@"currentModeChanged" body:newMode]; 45 | } 46 | } 47 | 48 | - (void)startObserving 49 | { 50 | hasListeners = YES; 51 | } 52 | 53 | - (void)stopObserving 54 | { 55 | hasListeners = NO; 56 | } 57 | 58 | + (BOOL)requiresMainQueueSetup 59 | { 60 | return YES; 61 | } 62 | 63 | @end 64 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | @implementation AppDelegate 8 | 9 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 10 | { 11 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 12 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 13 | moduleName:@"example" 14 | initialProperties:nil]; 15 | 16 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 17 | 18 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 19 | UIViewController *rootViewController = [UIViewController new]; 20 | rootViewController.view = rootView; 21 | self.window.rootViewController = rootViewController; 22 | [self.window makeKeyAndVisible]; 23 | return YES; 24 | } 25 | 26 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 27 | { 28 | #if DEBUG 29 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 30 | #else 31 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 32 | #endif 33 | } 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | 5 | import com.codemotionapps.reactnativedarkmode.DarkModePackage; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.shell.MainReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | return Arrays.asList( 25 | new MainReactPackage(), 26 | new DarkModePackage() 27 | ); 28 | } 29 | 30 | @Override 31 | protected String getJSMainModuleName() { 32 | return "index"; 33 | } 34 | }; 35 | 36 | @Override 37 | public ReactNativeHost getReactNativeHost() { 38 | return mReactNativeHost; 39 | } 40 | 41 | @Override 42 | public void onCreate() { 43 | super.onCreate(); 44 | SoLoader.init(this, /* native exopackage */ false); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.example", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.example", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /library/src/context.tsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useState, useEffect, Context, ReactNode } from 'react' 2 | 3 | import { eventEmitter } from './event-emitter' 4 | import { Mode } from './types' 5 | 6 | type ContextType = Mode | 'current' 7 | export const DarkModeContext: Context = createContext('current') 8 | DarkModeContext.displayName = 'DarkModeContext' 9 | 10 | interface IProps { 11 | mode?: Mode 12 | children: ReactNode 13 | } 14 | 15 | function useCurrentMode(forcedMode?: Mode) { 16 | const [ currentMode, setCurrentMode ] = useState(eventEmitter.currentMode) 17 | 18 | useEffect(() => { 19 | if (forcedMode) return 20 | if (currentMode !== eventEmitter.currentMode) { 21 | setCurrentMode(eventEmitter.currentMode) 22 | } 23 | 24 | function handler(mode: Mode) { 25 | setCurrentMode(mode) 26 | } 27 | 28 | eventEmitter.on('currentModeChanged', handler) 29 | return () => { 30 | eventEmitter.off('currentModeChanged', handler) 31 | } 32 | }, [currentMode, forcedMode]) 33 | 34 | return currentMode 35 | } 36 | 37 | export function DarkModeProvider({ children, mode }: IProps) { 38 | const currentMode = useCurrentMode(mode) 39 | 40 | return 41 | {children} 42 | 43 | } 44 | 45 | export function useDarkModeContext(): Mode { 46 | const context = useContext(DarkModeContext) 47 | const currentMode = useCurrentMode(context === 'current' ? undefined : context) 48 | 49 | if (context === 'current') { 50 | return currentMode 51 | } 52 | 53 | return context 54 | } 55 | -------------------------------------------------------------------------------- /example/ios/example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | example 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { View, Text, Image, Button } from 'react-native' 3 | import { 4 | useDarkModeContext, 5 | DynamicValue, 6 | useDynamicStyleSheet, 7 | DynamicStyleSheet, 8 | DarkModeProvider, 9 | useDynamicValue, 10 | eventEmitter, 11 | } from 'react-native-dark-mode' 12 | 13 | import Extra from './Extra' 14 | 15 | function Counter() { 16 | const [counter, setCounter] = useState(0) 17 | return