From b24f60f729bb3d4804f123eb38ed512f2bfc8cf9 Mon Sep 17 00:00:00 2001 From: Riccardo Cipolleschi Date: Mon, 10 Oct 2022 02:51:06 -0700 Subject: [PATCH] Add ComponentWithState in Android (#34911) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/34911 This diff adds the Same component with state added in the previous diff for iOS ## Changelog [Android][Added] - ComponentWithState Reviewed By: cortinico Differential Revision: D40108233 fbshipit-source-id: b5bd1d1bdd7053920f737772c85034e4c5aed26a --- .../NativeComponentWithState.podspec | 2 +- ...ponentWithStateCustomComponentDescriptor.h | 0 ...tiveComponentWithStateCustomShadowNode.cpp | 0 ...NativeComponentWithStateCustomShadowNode.h | 0 .../react/uiapp/RNTesterApplication.java | 7 ++- .../NativeViewWithState.java | 27 ++++++++++ .../NativeViewWithStateManager.java | 54 +++++++++++++++++++ .../android/app/src/main/jni/CMakeLists.txt | 16 ++++++ .../android/app/src/main/jni/OnLoad.cpp | 3 ++ .../js/utils/RNTesterList.android.js | 5 ++ 10 files changed, 112 insertions(+), 2 deletions(-) rename packages/rn-tester/NativeComponentWithState/{ios => cxx}/RNTNativeComponentWithStateCustomComponentDescriptor.h (100%) rename packages/rn-tester/NativeComponentWithState/{ios => cxx}/RNTNativeComponentWithStateCustomShadowNode.cpp (100%) rename packages/rn-tester/NativeComponentWithState/{ios => cxx}/RNTNativeComponentWithStateCustomShadowNode.h (100%) create mode 100644 packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithState.java create mode 100644 packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithStateManager.java diff --git a/packages/rn-tester/NativeComponentWithState/NativeComponentWithState.podspec b/packages/rn-tester/NativeComponentWithState/NativeComponentWithState.podspec index 5412e48523f14a..264743e9812489 100644 --- a/packages/rn-tester/NativeComponentWithState/NativeComponentWithState.podspec +++ b/packages/rn-tester/NativeComponentWithState/NativeComponentWithState.podspec @@ -23,7 +23,7 @@ Pod::Spec.new do |s| "CLANG_CXX_LANGUAGE_STANDARD" => "c++17" } - s.source_files = "ios/**/*.{h,m,mm,cpp}" + s.source_files = "{ios,cxx}/**/*.{h,m,mm,cpp}" s.requires_arc = true install_modules_dependencies(s) diff --git a/packages/rn-tester/NativeComponentWithState/ios/RNTNativeComponentWithStateCustomComponentDescriptor.h b/packages/rn-tester/NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomComponentDescriptor.h similarity index 100% rename from packages/rn-tester/NativeComponentWithState/ios/RNTNativeComponentWithStateCustomComponentDescriptor.h rename to packages/rn-tester/NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomComponentDescriptor.h diff --git a/packages/rn-tester/NativeComponentWithState/ios/RNTNativeComponentWithStateCustomShadowNode.cpp b/packages/rn-tester/NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomShadowNode.cpp similarity index 100% rename from packages/rn-tester/NativeComponentWithState/ios/RNTNativeComponentWithStateCustomShadowNode.cpp rename to packages/rn-tester/NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomShadowNode.cpp diff --git a/packages/rn-tester/NativeComponentWithState/ios/RNTNativeComponentWithStateCustomShadowNode.h b/packages/rn-tester/NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomShadowNode.h similarity index 100% rename from packages/rn-tester/NativeComponentWithState/ios/RNTNativeComponentWithStateCustomShadowNode.h rename to packages/rn-tester/NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomShadowNode.h diff --git a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.java b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.java index cdc5ac628282a9..d5247b0bb9a7a9 100644 --- a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.java +++ b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.java @@ -23,9 +23,11 @@ import com.facebook.react.module.model.ReactModuleInfoProvider; import com.facebook.react.shell.MainReactPackage; import com.facebook.react.uiapp.component.MyNativeViewManager; +import com.facebook.react.uiapp.component.NativeViewWithStateManager; import com.facebook.react.uimanager.ViewManager; import com.facebook.react.views.text.ReactFontManager; import com.facebook.soloader.SoLoader; +import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.HashMap; @@ -106,7 +108,10 @@ public List createNativeModules( @Override public List createViewManagers( @NonNull ReactApplicationContext reactContext) { - return Collections.singletonList(new MyNativeViewManager()); + ArrayList list = new ArrayList(); + list.add(new MyNativeViewManager()); + list.add(new NativeViewWithStateManager()); + return list; } }); } diff --git a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithState.java b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithState.java new file mode 100644 index 00000000000000..dc99afad502ade --- /dev/null +++ b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithState.java @@ -0,0 +1,27 @@ +/* + * 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.uiapp.component; + +import android.content.Context; +import android.net.Uri; +import androidx.annotation.Nullable; +import com.facebook.drawee.view.SimpleDraweeView; +import com.facebook.react.bridge.ReadableMap; + +class NativeViewWithState extends SimpleDraweeView { + + public NativeViewWithState(Context context) { + super(context); + } + + void setImageSource(@Nullable ReadableMap source) { + String uri = source != null ? source.getString("uri") : null; + Uri imageUri = Uri.parse(uri); + this.setImageURI(imageUri); + } +} diff --git a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithStateManager.java b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithStateManager.java new file mode 100644 index 00000000000000..c3bb143ceb67d1 --- /dev/null +++ b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/componentWithState/NativeViewWithStateManager.java @@ -0,0 +1,54 @@ +/* + * 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.uiapp.component; + +import androidx.annotation.NonNull; +import androidx.annotation.Nullable; +import com.facebook.react.bridge.ReadableMap; +import com.facebook.react.module.annotations.ReactModule; +import com.facebook.react.uimanager.SimpleViewManager; +import com.facebook.react.uimanager.ThemedReactContext; +import com.facebook.react.uimanager.ViewManagerDelegate; +import com.facebook.react.uimanager.annotations.ReactProp; +import com.facebook.react.viewmanagers.RNTNativeComponentWithStateManagerDelegate; +import com.facebook.react.viewmanagers.RNTNativeComponentWithStateManagerInterface; + +/** View manager for {@link NativeViewVithState} components. */ +@ReactModule(name = NativeViewWithStateManager.REACT_CLASS) +public class NativeViewWithStateManager extends SimpleViewManager + implements RNTNativeComponentWithStateManagerInterface { + + public static final String REACT_CLASS = "RNTNativeComponentWithState"; + + private final ViewManagerDelegate mDelegate = + new RNTNativeComponentWithStateManagerDelegate<>(this); + + @Nullable + @Override + protected ViewManagerDelegate getDelegate() { + return mDelegate; + } + + @NonNull + @Override + public String getName() { + return REACT_CLASS; + } + + @NonNull + @Override + protected NativeViewWithState createViewInstance(@NonNull ThemedReactContext reactContext) { + return new NativeViewWithState(reactContext); + } + + @Override + @ReactProp(name = "imageSource") + public void setImageSource(NativeViewWithState view, @Nullable ReadableMap value) { + view.setImageSource(value); + } +} diff --git a/packages/rn-tester/android/app/src/main/jni/CMakeLists.txt b/packages/rn-tester/android/app/src/main/jni/CMakeLists.txt index e263a03350c428..d6a9733d60f659 100644 --- a/packages/rn-tester/android/app/src/main/jni/CMakeLists.txt +++ b/packages/rn-tester/android/app/src/main/jni/CMakeLists.txt @@ -10,6 +10,22 @@ project(appmodules) include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake) +# === Include NativeComponentWithState C++ files === +# The following lines are used to tell CMake to build some source code +# that is not contained in the regular folder path for an Android app. +# This is happening because the NativeComponentWithState component +# has some C++ code that is shared between iOS and Android. +# An alternative approach could have been to create a library within the +# component folder, adding a CMakeList.txt file. +target_sources(${CMAKE_PROJECT_NAME} + PUBLIC + ${CMAKE_CURRENT_SOURCE_DIR}/../../../../../NativeComponentWithState/cxx/RNTNativeComponentWithStateCustomShadowNode.cpp) + +target_include_directories(${CMAKE_PROJECT_NAME} + PUBLIC + ${CMAKE_CURRENT_SOURCE_DIR}/../../../../../NativeComponentWithState/cxx) +# === END Include NativeComponentWithState === + add_subdirectory(${PROJECT_BUILD_DIR}/generated/source/codegen/jni/ codegen_build) add_subdirectory(${REACT_COMMON_DIR}/react/nativemodule/samples/platform/android/ sampleturbomodule_build) diff --git a/packages/rn-tester/android/app/src/main/jni/OnLoad.cpp b/packages/rn-tester/android/app/src/main/jni/OnLoad.cpp index ae21e72a4dccff..2d92a502d87fe0 100644 --- a/packages/rn-tester/android/app/src/main/jni/OnLoad.cpp +++ b/packages/rn-tester/android/app/src/main/jni/OnLoad.cpp @@ -8,6 +8,7 @@ #include #include #include +#include #include #include #include @@ -21,6 +22,8 @@ void registerComponents( std::shared_ptr registry) { registry->add(concreteComponentDescriptorProvider< RNTMyNativeViewComponentDescriptor>()); + registry->add(concreteComponentDescriptorProvider< + RNTNativeComponentWithStateCustomComponentDescriptor>()); } std::shared_ptr provideModules( diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index 5156c746ceef50..f5f987788edcee 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -126,6 +126,11 @@ const Components: Array = [ category: 'UI', module: require('../examples/NewArchitecture/NewArchitectureExample'), }, + { + key: 'ComponentWithState', + category: 'UI', + module: require('../examples/NewArchitecture/ComponentWithState'), + }, ]; const APIs: Array = [