From 071f6d2ca697ad298f41572e3d70a238f00ae8a3 Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Wed, 1 Mar 2023 17:58:07 -0800 Subject: [PATCH] Expose UnstableReactLegacyComponentDescriptor inside react/renderer/components/legacyviewmanagerinterop (#36344) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/36344 This adds the `UnstableReactLegacyComponentDescriptor`, part of the Fabric Interop Layer, inside the `react/renderer/components/legacyviewmanagerinterop` module so that it can be included by the user externally. If we wish to place it somewhere else, I'm more than happy to move it around. Changelog: [Internal] [Changed] - Expose UnstableReactLegacyComponentDescriptor inside react/renderer/components/legacyviewmanagerinterop Reviewed By: mdvacca, cipolleschi Differential Revision: D43500868 fbshipit-source-id: acfcd89efc42ff7a4ee6cb0a1cbd71d69f79721f --- ReactAndroid/build.gradle | 8 +++ .../cmake-utils/ReactNative-application.cmake | 2 + ReactAndroid/src/main/jni/CMakeLists.txt | 1 + .../legacyviewmanagerinterop/CMakeLists.txt | 31 +++++++++++ ...acyViewManagerInteropComponentDescriptor.h | 38 +++++++++++++ .../js/MyLegacyViewNativeComponent.js | 25 +++++++++ .../NativeComponentExample/js/MyNativeView.js | 24 +++++--- .../react/uiapp/RNTesterApplication.java | 7 ++- .../uiapp/component/MyLegacyViewManager.java | 55 +++++++++++++++++++ .../android/app/src/main/jni/OnLoad.cpp | 6 ++ 10 files changed, 189 insertions(+), 8 deletions(-) create mode 100644 ReactCommon/react/renderer/components/legacyviewmanagerinterop/CMakeLists.txt create mode 100644 ReactCommon/react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h create mode 100644 packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js create mode 100644 packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.java diff --git a/ReactAndroid/build.gradle b/ReactAndroid/build.gradle index ee7b484832..55df988051 100644 --- a/ReactAndroid/build.gradle +++ b/ReactAndroid/build.gradle @@ -120,6 +120,10 @@ final def preparePrefab = tasks.register("preparePrefab", PreparePrefabHeadersTa "rrc_view", new Pair("../ReactCommon/react/renderer/components/view/", "react/renderer/components/view/") ), + new PrefabPreprocessingEntry( + "rrc_legacyviewmanagerinterop", + new Pair("../ReactCommon/react/renderer/components/legacyviewmanagerinterop/", "react/renderer/components/legacyviewmanagerinterop/") + ), new PrefabPreprocessingEntry( "jsi", new Pair("../ReactCommon/jsi/", "") @@ -485,6 +489,7 @@ android { "rrc_image", "rrc_root", "rrc_view", + "rrc_legacyviewmanagerinterop", "jsi", "glog", "fabricjni", @@ -586,6 +591,9 @@ android { rrc_view { headers(new File(prefabHeadersDir, "rrc_view").absolutePath) } + rrc_legacyviewmanagerinterop { + headers(new File(prefabHeadersDir, "rrc_legacyviewmanagerinterop").absolutePath) + } jsi { headers(new File(prefabHeadersDir, "jsi").absolutePath) } diff --git a/ReactAndroid/cmake-utils/ReactNative-application.cmake b/ReactAndroid/cmake-utils/ReactNative-application.cmake index fe3a8ca6f7..77baf6f4ed 100644 --- a/ReactAndroid/cmake-utils/ReactNative-application.cmake +++ b/ReactAndroid/cmake-utils/ReactNative-application.cmake @@ -69,6 +69,7 @@ add_library(folly_runtime ALIAS ReactAndroid::folly_runtime) add_library(react_nativemodule_core ALIAS ReactAndroid::react_nativemodule_core) add_library(react_render_imagemanager ALIAS ReactAndroid::react_render_imagemanager) add_library(rrc_image ALIAS ReactAndroid::rrc_image) +add_library(rrc_legacyviewmanagerinterop ALIAS ReactAndroid::rrc_legacyviewmanagerinterop) find_package(fbjni REQUIRED CONFIG) add_library(fbjni ALIAS fbjni::fbjni) @@ -91,6 +92,7 @@ target_link_libraries(${CMAKE_PROJECT_NAME} react_render_mapbuffer # prefab ready rrc_image # prefab ready rrc_view # prefab ready + rrc_legacyviewmanagerinterop # prefab ready runtimeexecutor # prefab ready turbomodulejsijni # prefab ready yoga) # prefab ready diff --git a/ReactAndroid/src/main/jni/CMakeLists.txt b/ReactAndroid/src/main/jni/CMakeLists.txt index 2d1295d2cc..64f91231eb 100644 --- a/ReactAndroid/src/main/jni/CMakeLists.txt +++ b/ReactAndroid/src/main/jni/CMakeLists.txt @@ -87,6 +87,7 @@ add_react_common_subdir(react/renderer/components/textinput) add_react_common_subdir(react/renderer/components/progressbar) add_react_common_subdir(react/renderer/components/root) add_react_common_subdir(react/renderer/components/image) +add_react_common_subdir(react/renderer/components/legacyviewmanagerinterop) add_react_common_subdir(react/renderer/componentregistry/native) add_react_common_subdir(react/renderer/components/text) add_react_common_subdir(react/renderer/components/unimplementedview) diff --git a/ReactCommon/react/renderer/components/legacyviewmanagerinterop/CMakeLists.txt b/ReactCommon/react/renderer/components/legacyviewmanagerinterop/CMakeLists.txt new file mode 100644 index 0000000000..016015f62b --- /dev/null +++ b/ReactCommon/react/renderer/components/legacyviewmanagerinterop/CMakeLists.txt @@ -0,0 +1,31 @@ +# 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. + +cmake_minimum_required(VERSION 3.13) +set(CMAKE_VERBOSE_MAKEFILE on) + +add_compile_options( + -fexceptions + -frtti + -std=c++17 + -Wall + -Wpedantic + -Wno-gnu-zero-variadic-macro-arguments + -DLOG_TAG=\"Fabric\") + +file(GLOB rrc_legacyviewmanagerinterop_SRC CONFIGURE_DEPENDS *.cpp) +add_library(rrc_legacyviewmanagerinterop SHARED ${rrc_legacyviewmanagerinterop_SRC}) + +target_include_directories(rrc_legacyviewmanagerinterop PUBLIC ${REACT_COMMON_DIR}) + +target_link_libraries(rrc_legacyviewmanagerinterop + glog + glog_init + folly_runtime + jsi + react_render_core + rrc_view + yoga +) diff --git a/ReactCommon/react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h b/ReactCommon/react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h new file mode 100644 index 0000000000..f61e723a06 --- /dev/null +++ b/ReactCommon/react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h @@ -0,0 +1,38 @@ +/* + * 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. + */ + +#pragma once + +#include +#include +#include + +namespace facebook { +namespace react { + +/* + * Descriptor for component. + * + * This component is part of the Fabric Interop Layer and is subject to future + * changes (hence the "Unstable" prefix). + */ +template +class UnstableLegacyViewManagerInteropComponentDescriptor + : public ConcreteComponentDescriptor< + ConcreteViewShadowNode> { + public: + UnstableLegacyViewManagerInteropComponentDescriptor( + ComponentDescriptorParameters const ¶meters) + : ConcreteComponentDescriptor< + ConcreteViewShadowNode>( + parameters) {} + + private: +}; + +} // namespace react +} // namespace facebook diff --git a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js new file mode 100644 index 0000000000..d753339df8 --- /dev/null +++ b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js @@ -0,0 +1,25 @@ +/** + * 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. + * + * @flow strict-local + * @format + */ + +import type {HostComponent} from 'react-native'; +import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; +import {requireNativeComponent} from 'react-native'; + +type NativeProps = $ReadOnly<{| + ...ViewProps, + opacity?: number, + color?: string, +|}>; + +export type MyLegacyViewType = HostComponent; + +export default (requireNativeComponent( + 'RNTMyLegacyNativeView', +): HostComponent); diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js index 373e6d22f8..4d1cd65ad3 100644 --- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js +++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js @@ -10,10 +10,11 @@ import * as React from 'react'; import {useRef, useState} from 'react'; -import {View, Button} from 'react-native'; +import {View, Button, Text} from 'react-native'; import RNTMyNativeView, { Commands as RNTMyNativeViewCommands, } from './MyNativeViewNativeComponent'; +import RNTMyLegacyNativeView from './MyLegacyViewNativeComponent'; import type {MyNativeViewType} from './MyNativeViewNativeComponent'; const colors = [ @@ -29,18 +30,27 @@ const colors = [ export default function MyNativeView(props: {}): React.Node { const ref = useRef | null>(null); const [opacity, setOpacity] = useState(1.0); + const [color, setColor] = useState('#000000'); return ( + Fabric View + Legacy View +