Moving from overriding onConfigurationChanged of ReactActivity to and…

…roid.intent.action.CONFIGURATION_CHANGED

README.md

@@ -7,10 +7,36 @@
 
 ## Installation
 
+### Prevent Android app from restarting when dark mode changes
+
+You must append `|uiMode` to the `android:configChanges` prop of `<activity>` in `AndroidManifest.xml`. Example:
+
+```diff
+diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
+--- a/android/app/src/main/AndroidManifest.xml
++++ b/android/app/src/main/AndroidManifest.xml
+@@ -13,7 +13,7 @@
+                <activity
+                        android:name=".MainActivity"
+                        android:label="@string/app_name"
+-                       android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
++                       android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+                        android:windowSoftInputMode="adjustResize">
+                        <intent-filter>
+                                <action android:name="android.intent.action.MAIN" />
+```
+
+### React Native 0.60 or above
 ```sh
 npm install react-native-dark-mode
 pod install # for iOS
-# If you're running React Native 0.59 or lower also run `react-native link react-native-dark-mode`
+```
+
+### React Native 0.59 or below
+
+```sh
+npm install react-native-dark-mode
+react-native link react-native-dark-mode
 ```
 
 ## Usage
@@ -170,9 +196,9 @@ eventEmitter.on('currentModeChanged', newMode => {
 
 ### iOS
 
--   Xcode 11 beta 1 or higher
+-   Xcode 11
 -   React Native 0.59.9 or higher
--   iOS 13 beta 1 or higher to see it in action
+-   iOS 13 to see it in action
 
 ### Android
 

example/App.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { View, Text, Image } from 'react-native'
+import React, { useState } from 'react'
+import { View, Text, Image, Button } from 'react-native'
 import {
 	useDarkModeContext,
 	DynamicValue,
@@ -11,6 +11,11 @@ import {
 
 import Extra from './Extra'
 
+function Counter() {
+	const [counter, setCounter] = useState(0)
+	return <Button title={counter.toString()} onPress={() => setCounter(i => i + 1)} />
+}
+
 export default function App() {
 	const mode = useDarkModeContext()
 	const styles = useDynamicStyleSheet(dynamicStyles)
@@ -28,6 +33,8 @@ export default function App() {
 			<DarkModeProvider mode="light">
 				<Extra />
 			</DarkModeProvider>
+
+			<Counter />
 		</View>
 	)
 }

example/android/app/src/main/AndroidManifest.xml

@@ -13,7 +13,7 @@
 		<activity
 			android:name=".MainActivity"
 			android:label="@string/app_name"
-			android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
 			android:windowSoftInputMode="adjustResize">
 			<intent-filter>
 				<action android:name="android.intent.action.MAIN" />

example/package.json

@@ -8,7 +8,7 @@
 	"dependencies": {
 		"react": "16.8.3",
 		"react-native": "0.59.9",
-		"react-native-dark-mode": "*"
+		"react-native-dark-mode": "0.2.0-rc.1"
 	},
 	"devDependencies": {
 		"@types/react": "^16.8.19"

library/android/src/main/java/com/codemotionapps/reactnativedarkmode/DarkModeModule.java

@@ -1,5 +1,9 @@
 package com.codemotionapps.reactnativedarkmode;
 
+import android.content.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
 import android.content.res.Configuration;
 
 import com.facebook.react.bridge.LifecycleEventListener;
@@ -13,11 +17,38 @@
 public class DarkModeModule extends ReactContextBaseJavaModule implements LifecycleEventListener {
 	private ReactApplicationContext reactContext;
 
+	private class Receiver extends BroadcastReceiver {
+		private DarkModeModule module;
+
+		public Receiver(DarkModeModule module) {
+			super();
+			this.module = module;
+		}
+
+		@Override
+		public void onReceive(Context context, Intent intent) {
+			this.module.notifyForChange();
+		}
+	}
+
 	public DarkModeModule(final ReactApplicationContext reactContext) {
 		super(reactContext);
 		this.reactContext = reactContext;
 
 		reactContext.addLifecycleEventListener(this);
+
+		reactContext.registerReceiver(new Receiver(this), new IntentFilter("android.intent.action.CONFIGURATION_CHANGED"));
+	}
+
+	private void notifyForChange() {
+		if (reactContext.hasActiveCatalystInstance()) {
+			Configuration configuration = reactContext.getResources().getConfiguration();
+			String mode =  (configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
+					? "dark"
+					: "light";
+			reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+					.emit("currentModeChanged", mode);
+		}
 	}
 
 	@Override
@@ -34,22 +65,9 @@ public Map<String, Object> getConstants() {
 		return constants;
 	}
 
-	public static String getCurrentMode(Configuration configuration) {
-		return (configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
-				? "dark"
-				: "light";
-	}
-
-	public static void notifyForChange(ReactApplicationContext context, Configuration configuration) {
-		if (context.hasActiveCatalystInstance()) {
-			context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-					.emit("currentModeChanged", DarkModeModule.getCurrentMode(configuration));
-		}
-	}
-
 	@Override
 	public void onHostResume() {
-		DarkModeModule.notifyForChange(reactContext, reactContext.getResources().getConfiguration());
+		this.notifyForChange();
 	}
 
 	@Override

library/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-dark-mode",
-	"version": "0.2.0-rc.0",
+	"version": "0.2.0-rc.1",
 	"main": "./dist/index.js",
 	"typings": "./dist/index.d.ts",
 	"repository": "git@github.com:codemotionapps/react-native-dark-mode.git",

package.json

@@ -9,7 +9,9 @@
 			"**/react-native",
 			"**/react-native/**",
 			"**/react",
-			"**/react/**"
+			"**/react/**",
+			"**/react-native-dark-mode",
+			"**/react-native-dark-mode/**"
 		]
 	},
 	"scripts": {