From 068a20842d349318db2236676415e96be2a663f9 Mon Sep 17 00:00:00 2001 From: Arushi Kesarwani Date: Thu, 29 Dec 2022 15:06:13 -0800 Subject: [PATCH] Adding native implementation for Dev Loading View for Android (#35743) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/35743 Changelog: [Android][Added] - For supporting Dev Loading View across multiple platforms, altering the javascript implementation of Loading view of android to also rely on native implementation as iOS instead of Toast, thereby unifying both platforms Reviewed By: rshest Differential Revision: D42258041 fbshipit-source-id: 1be56c1e5696b1024ba09a0aa11da96e0a08f210 --- Libraries/Utilities/LoadingView.android.js | 45 ++++++++++++----- .../facebook/react/modules/devloading/BUCK | 22 +++++++++ .../modules/devloading/DevLoadingModule.java | 48 +++++++++++++++++++ 3 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 ReactAndroid/src/main/java/com/facebook/react/modules/devloading/BUCK create mode 100644 ReactAndroid/src/main/java/com/facebook/react/modules/devloading/DevLoadingModule.java diff --git a/Libraries/Utilities/LoadingView.android.js b/Libraries/Utilities/LoadingView.android.js index 03dd42d7907fb7..0acf7c39bc68d7 100644 --- a/Libraries/Utilities/LoadingView.android.js +++ b/Libraries/Utilities/LoadingView.android.js @@ -8,20 +8,43 @@ * @flow strict-local */ -import ToastAndroid from '../Components/ToastAndroid/ToastAndroid'; - -const TOAST_SHORT_DELAY = 2000; -let isVisible = false; +import processColor from '../StyleSheet/processColor'; +import Appearance from './Appearance'; +import NativeDevLoadingView from './NativeDevLoadingView'; module.exports = { showMessage(message: string, type: 'load' | 'refresh') { - if (!isVisible) { - ToastAndroid.show(message, ToastAndroid.SHORT); - isVisible = true; - setTimeout(() => { - isVisible = false; - }, TOAST_SHORT_DELAY); + if (NativeDevLoadingView) { + if (type === 'refresh') { + const backgroundColor = processColor('#2584e8'); + const textColor = processColor('#ffffff'); + + NativeDevLoadingView.showMessage( + message, + typeof textColor === 'number' ? textColor : null, + typeof backgroundColor === 'number' ? backgroundColor : null, + ); + } else if (type === 'load') { + let backgroundColor; + let textColor; + + if (Appearance.getColorScheme() === 'dark') { + backgroundColor = processColor('#fafafa'); + textColor = processColor('#242526'); + } else { + backgroundColor = processColor('#404040'); + textColor = processColor('#ffffff'); + } + + NativeDevLoadingView.showMessage( + message, + typeof textColor === 'number' ? textColor : null, + typeof backgroundColor === 'number' ? backgroundColor : null, + ); + } } }, - hide() {}, + hide() { + NativeDevLoadingView && NativeDevLoadingView.hide(); + }, }; diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/devloading/BUCK b/ReactAndroid/src/main/java/com/facebook/react/modules/devloading/BUCK new file mode 100644 index 00000000000000..ad5bec7029b9a2 --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/modules/devloading/BUCK @@ -0,0 +1,22 @@ +load("//tools/build_defs/oss:rn_defs.bzl", "react_native_dep", "react_native_root_target", "react_native_target", "rn_android_library") + +rn_android_library( + name = "devloading", + srcs = glob(["**/*.java"]), + autoglob = False, + labels = [ + "pfh:ReactNative_CommonInfrastructurePlaceholder", + ], + language = "JAVA", + visibility = [ + "PUBLIC", + ], + deps = [ + react_native_dep("third-party/java/infer-annotations:infer-annotations"), + react_native_dep("third-party/java/jsr-305:jsr-305"), + react_native_target("java/com/facebook/react/bridge:bridge"), + react_native_target("java/com/facebook/react/common:common"), + react_native_target("java/com/facebook/react/module/annotations:annotations"), + ], + exported_deps = [react_native_root_target(":FBReactNativeSpec")], +) diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/devloading/DevLoadingModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/devloading/DevLoadingModule.java new file mode 100644 index 00000000000000..3036dceee976ab --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/modules/devloading/DevLoadingModule.java @@ -0,0 +1,48 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +package com.facebook.react.modules.devloading; + +import android.util.Log; +import com.facebook.fbreact.specs.NativeDevLoadingViewSpec; +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.bridge.UiThreadUtil; +import com.facebook.react.module.annotations.ReactModule; + +/** {@link NativeModule} that allows JS to show dev loading view. */ +@ReactModule(name = NativeDevLoadingViewSpec.NAME) +public class DevLoadingModule extends NativeDevLoadingViewSpec { + + public DevLoadingModule(ReactApplicationContext reactContext) { + super(reactContext); + } + + @Override + public void showMessage(final String message, final Double color, final Double backgroundColor) { + + UiThreadUtil.runOnUiThread( + new Runnable() { + @Override + public void run() { + Log.w(NAME, "Showing Message in DevLoadingModule java."); + } + }); + } + + @Override + public void hide() { + + UiThreadUtil.runOnUiThread( + new Runnable() { + @Override + public void run() { + Log.w(NAME, "Hiding Message in DevLoadingModule java."); + } + }); + } +}