diff --git a/ReactAndroid/build.gradle b/ReactAndroid/build.gradle index ee7b4848321..55df9880511 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 fe3a8ca6f79..77baf6f4edf 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 2d1295d2cc5..64f91231eb3 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 00000000000..016015f62b3 --- /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 00000000000..f61e723a06e --- /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 00000000000..d753339df89 --- /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 373e6d22f85..4d1cd65ad39 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 +