Feature/1675 dark mode android integration

RELEASE-NOTES.txt

@@ -5,10 +5,10 @@
 1.24.0
 ------
 * New block: Latest Posts
-* [Android] Can now scroll post when in landscape orientation with the soft keyboard displayed
 * Fix Quote block's left border not being visible in Dark Mode
 * Added Starter Page Templates: when you create a new page, we now show you a few templates to get started more quickly.
 * Fix crash when pasting HTML content with embeded images on paragraphs
+* [Android] Dark Mode
 
 1.23.0
 ------

android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -1,6 +1,7 @@
 package com.gutenberg;
 
 import android.app.Application;
+import android.content.res.Configuration;
 import android.os.Bundle;
 import android.util.Log;
 
@@ -126,7 +127,8 @@ public void editorDidEmitLog(String message, LogLevel logLevel) {
 
             @Override
             public void performRequest(String path, Consumer<String> onSuccess, Consumer<Bundle> onError) {}
-        });
+
+        }, isDarkMode());
 
         return new ReactNativeHost(this) {
             @Override
@@ -153,6 +155,13 @@ protected String getJSMainModuleName() {
         };
     }
 
+    private boolean isDarkMode() {
+        Configuration configuration = getResources().getConfiguration();
+        int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
+
+        return currentNightMode == Configuration.UI_MODE_NIGHT_YES;
+    }
+
     @Override
     public ReactNativeHost getReactNativeHost() {
         if (mReactNativeHost == null) {

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java

@@ -356,6 +356,14 @@ public void setTextAlign(ReactAztecText view, @Nullable String textAlign) {
         }
     }
 
+    @ReactProp(name = "linkTextColor", customType = "Color")
+    public void setLinkTextColor(ReactAztecText view, @Nullable Integer color) {
+        view.setLinkFormatter(new LinkFormatter(view,
+                new LinkFormatter.LinkStyle(
+                        color, true)
+        ));
+    }
+
     /* End of the code taken from ReactTextInputManager */
 
     @ReactProp(name = "color", customType = "Color")

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -1,6 +1,5 @@
 package org.wordpress.mobile.ReactNativeGutenbergBridge;
 
-import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -23,7 +23,9 @@
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModule {
     private final ReactApplicationContext mReactContext;
@@ -35,6 +37,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_FOCUS_TITLE = "setFocusOnTitle";
     private static final String EVENT_NAME_MEDIA_UPLOAD = "mediaUpload";
     private static final String EVENT_NAME_MEDIA_APPEND = "mediaAppend";
+    private static final String EVENT_NAME_PREFERRED_COLOR_SCHEME = "preferredColorScheme";
 
     private static final String MAP_KEY_UPDATE_HTML = "html";
     private static final String MAP_KEY_UPDATE_TITLE = "title";
@@ -45,6 +48,8 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_PROGRESS = "progress";
     private static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_SERVER_ID = "mediaServerId";
 
+    private static final String MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK = "isPreferredColorSchemeDark";
+
     private static final int MEDIA_UPLOAD_STATE_UPLOADING = 1;
     private static final int MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
     private static final int MEDIA_UPLOAD_STATE_FAILED = 3;
@@ -57,10 +62,12 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MEDIA_SOURCE_DEVICE_CAMERA = "DEVICE_CAMERA";
     private static final String MEDIA_SOURCE_MEDIA_EDITOR = "MEDIA_EDITOR";
 
+    private boolean mIsDarkMode;
 
     public RNReactNativeGutenbergBridgeModule(ReactApplicationContext reactContext,
-            GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent) {
+            GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent, boolean isDarkMode) {
         super(reactContext);
+        mIsDarkMode = isDarkMode;
         mReactContext = reactContext;
         mGutenbergBridgeJS2Parent = gutenbergBridgeJS2Parent;
     }
@@ -70,6 +77,14 @@ public String getName() {
         return "RNReactNativeGutenbergBridge";
     }
 
+
+    @Override
+    public Map<String, Object> getConstants() {
+        final HashMap<String, Object> constants = new HashMap<>();
+        constants.put("isInitialColorSchemeDark", mIsDarkMode);
+        return constants;
+    }
+
     private void emitToJS(String eventName, @Nullable WritableMap data) {
         mReactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, data);
     }
@@ -103,6 +118,12 @@ public void appendNewMediaBlock(int mediaId, String mediaUri, String mediaType)
         emitToJS(EVENT_NAME_MEDIA_APPEND, writableMap);
     }
 
+    public void setPreferredColorScheme(boolean isDarkMode) {
+        WritableMap writableMap = new WritableNativeMap();
+        writableMap.putBoolean(MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK, isDarkMode);
+        emitToJS(EVENT_NAME_PREFERRED_COLOR_SCHEME, writableMap);
+    }
+
     @ReactMethod
     public void provideToNative_Html(String html, String title, boolean changed) {
         mGutenbergBridgeJS2Parent.responseHtml(title, html, changed);

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgePackage.java

@@ -10,21 +10,26 @@
 import java.util.List;
 
 public class RNReactNativeGutenbergBridgePackage implements ReactPackage {
-    private GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
+    private final GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
+    private final boolean mIsDarkMode;
+
     private RNReactNativeGutenbergBridgeModule mRNReactNativeGutenbergBridgeModule;
 
     public RNReactNativeGutenbergBridgeModule getRNReactNativeGutenbergBridgeModule() {
         return mRNReactNativeGutenbergBridgeModule;
     }
 
-    public RNReactNativeGutenbergBridgePackage(GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent) {
+    public RNReactNativeGutenbergBridgePackage(GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent,
+                                               boolean isDarkMode) {
         mGutenbergBridgeJS2Parent = gutenbergBridgeJS2Parent;
+        mIsDarkMode = isDarkMode;
     }
 
     @Override
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
         mRNReactNativeGutenbergBridgeModule = new RNReactNativeGutenbergBridgeModule(reactContext,
-                mGutenbergBridgeJS2Parent);
+                mGutenbergBridgeJS2Parent,
+                mIsDarkMode);
         return Arrays.<NativeModule>asList(mRNReactNativeGutenbergBridgeModule);
     }
 

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -100,6 +100,7 @@ public class WPAndroidGlueCode {
 
     private static OkHttpHeaderInterceptor sAddCookiesInterceptor = new OkHttpHeaderInterceptor();
     private static OkHttpClient sOkHttpClient = new OkHttpClient.Builder().addInterceptor(sAddCookiesInterceptor).build();
+    private boolean mIsDarkMode;
 
     public void onCreate(Context context) {
         SoLoader.init(context, /* native exopackage */ false);
@@ -329,7 +330,7 @@ public void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String m
             public void logUserEvent(GutenbergUserEvent event, ReadableMap eventProperties) {
                 mOnLogGutenbergUserEventListener.onGutenbergUserEvent(event, eventProperties.toHashMap());
             }
-        });
+        }, mIsDarkMode);
 
         return Arrays.asList(
                 new MainReactPackage(getMainPackageConfig(getImagePipelineConfig(sOkHttpClient))),
@@ -353,15 +354,18 @@ private ImagePipelineConfig getImagePipelineConfig(OkHttpClient client) {
     @Deprecated
     public void onCreateView(Context initContext, boolean htmlModeEnabled,
                              Application application, boolean isDebug, boolean buildGutenbergFromSource,
-                             boolean isNewPost, String localeString, Bundle translations) {
+                             boolean isNewPost, String localeString, Bundle translations, int colorBackground, boolean isDarkMode) {
         onCreateView(initContext, htmlModeEnabled, application, isDebug, buildGutenbergFromSource, "post", isNewPost
-        , localeString, translations);
+        , localeString, translations, colorBackground, isDarkMode);
     }
 
     public void onCreateView(Context initContext, boolean htmlModeEnabled,
                              Application application, boolean isDebug, boolean buildGutenbergFromSource,
-                             String postType, boolean isNewPost, String localeString, Bundle translations) {
+                             String postType, boolean isNewPost, String localeString, Bundle translations,
+                             int colorBackground, boolean isDarkMode) {
+        mIsDarkMode = isDarkMode;
         mReactRootView = new ReactRootView(new MutableContextWrapper(initContext));
+        mReactRootView.setBackgroundColor(colorBackground);
 
         ReactInstanceManagerBuilder builder =
                 ReactInstanceManager.builder()
@@ -375,11 +379,8 @@ public void onCreateView(Context initContext, boolean htmlModeEnabled,
             builder.setBundleAssetName("index.android.bundle");
         }
         mReactInstanceManager = builder.build();
-        mReactInstanceManager.addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {
-            @Override
-            public void onReactContextInitialized(ReactContext context) {
-                mReactContext = context;
-            }
+        mReactInstanceManager.addReactInstanceEventListener(context -> {
+            mReactContext = context;
         });
         Bundle initialProps = mReactRootView.getAppProperties();
         if (initialProps == null) {
@@ -405,7 +406,9 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
                                   RequestExecutor fetchExecutor,
                                   OnImageFullscreenPreviewListener onImageFullscreenPreviewListener,
                                   OnMediaEditorListener onMediaEditorListener,
-                                  OnLogGutenbergUserEventListener onLogGutenbergUserEventListener) {
+                                  OnLogGutenbergUserEventListener onLogGutenbergUserEventListener,
+                                  boolean isDarkMode) {
+
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
         contextWrapper.setBaseContext(viewGroup.getContext());
 
@@ -427,6 +430,10 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
         viewGroup.addView(mReactRootView, 0,
                 new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
 
+        if (mReactContext != null) {
+            setPreferredColorScheme(isDarkMode);
+        }
+
         refocus();
     }
 
@@ -499,6 +506,14 @@ public void appendNewMediaBlock(int mediaId, String mediaUri, String mediaType)
                                             .appendNewMediaBlock(mediaId, mediaUri, mediaType);
     }
 
+    public void setPreferredColorScheme(boolean isDarkMode) {
+        if (mIsDarkMode != isDarkMode) {
+            mIsDarkMode = isDarkMode;
+            mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule()
+                                                .setPreferredColorScheme(isDarkMode);
+        }
+    }
+
     public void setTitle(String title) {
         mTitleInitialized = true;
         mTitle = title;

react-native-gutenberg-bridge/index.js

@@ -10,6 +10,8 @@ const isIOS = Platform.OS === 'ios';
 
 const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge );
 
+export const { isInitialColorSchemeDark } = RNReactNativeGutenbergBridge;
+
 export const mediaSources = {
 	deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
 	deviceCamera: 'DEVICE_CAMERA',
@@ -70,6 +72,10 @@ export function subscribeMediaAppend( callback ) {
 	return gutenbergBridgeEvents.addListener( 'mediaAppend', callback );
 }
 
+export function subscribePreferredColorScheme( callback ) {
+	return gutenbergBridgeEvents.addListener( 'preferredColorScheme', callback );
+}
+
 /**
  * Request media picker for the given media source.
  *