From 4e243ca7a34bf0ecc0b6169b7388f1aa00b66971 Mon Sep 17 00:00:00 2001 From: Joshua Gross Date: Thu, 25 Feb 2021 10:06:56 -0800 Subject: [PATCH] Fix RTL scrolling Summary: We recently fixed RTL scrolling in Fabric on iOS: D26608231 (https://github.com/facebook/react-native/commit/e5921f7f384af45df4f355fa3fa1b58a20a269d3) Turns out, the mechanism for RTL scrolling on Android is completely different. It requires that content be wrapped in a "directional content view", which is `View` in LTR and `AndroidHorizontalScrollContentView` in RTL, backed by `ReactHorizontalScrollContainerView.java`. iOS doesn't require that and just uses View and some custom logic in ScrollView itself. In the future it would be great to align the platforms, but for now, for backwards-compat with non-Fabric and so we don't have to tear apart ScrollView.js, we codegen the AndroidHorizontalScrollContentView so it exists in C++, register the component, and stop mapping it to View explicitly in C++. Changelog: [Internal] Reviewed By: sammy-SC Differential Revision: D26659686 fbshipit-source-id: 3b9c646dbdb7fe9527d24d42bdc6acb1aca00945 --- ...izontalScrollContentViewNativeComponent.js | 26 +++++++++---------- .../fabric/jni/CoreComponentsRegistry.cpp | 3 +++ .../ComponentDescriptorRegistry.cpp | 7 +++-- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js b/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js index 4c542bddfac..71210f989d7 100644 --- a/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js +++ b/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js @@ -4,22 +4,20 @@ * 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 + * @flow strict-local */ -import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes'; -import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry'; -import {type ViewProps as Props} from '../View/ViewPropTypes'; +import codegenNativeComponent from '../../Utilities/codegenNativeComponent'; +import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; +import type {ViewProps} from '../View/ViewPropTypes'; -const AndroidHorizontalScrollContentViewNativeComponent: HostComponent = NativeComponentRegistry.get( +type NativeProps = $ReadOnly<{| + ...ViewProps, +|}>; + +type NativeType = HostComponent; + +export default (codegenNativeComponent( 'AndroidHorizontalScrollContentView', - () => ({ - uiViewClassName: 'AndroidHorizontalScrollContentView', - bubblingEventTypes: {}, - directEventTypes: {}, - validAttributes: {}, - }), -); - -export default AndroidHorizontalScrollContentViewNativeComponent; +): NativeType); diff --git a/ReactAndroid/src/main/java/com/facebook/react/fabric/jni/CoreComponentsRegistry.cpp b/ReactAndroid/src/main/java/com/facebook/react/fabric/jni/CoreComponentsRegistry.cpp index 560b8eaaa70..cd13e075b17 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/fabric/jni/CoreComponentsRegistry.cpp +++ b/ReactAndroid/src/main/java/com/facebook/react/fabric/jni/CoreComponentsRegistry.cpp @@ -64,6 +64,9 @@ CoreComponentsRegistry::sharedProviderRegistry() { concreteComponentDescriptorProvider()); providerRegistry->add( concreteComponentDescriptorProvider()); + providerRegistry->add( + concreteComponentDescriptorProvider< + AndroidHorizontalScrollContentViewComponentDescriptor>()); providerRegistry->add( concreteComponentDescriptorProvider()); providerRegistry->add(concreteComponentDescriptorProvider< diff --git a/ReactCommon/react/renderer/componentregistry/ComponentDescriptorRegistry.cpp b/ReactCommon/react/renderer/componentregistry/ComponentDescriptorRegistry.cpp index cb149393dde..27cb851b102 100644 --- a/ReactCommon/react/renderer/componentregistry/ComponentDescriptorRegistry.cpp +++ b/ReactCommon/react/renderer/componentregistry/ComponentDescriptorRegistry.cpp @@ -68,7 +68,7 @@ static std::string componentNameByReactViewName(std::string viewName) { } // TODO T63839307: remove this condition after deleting TextInlineImage from - // Paper + // non-Fabric code if (viewName == "TextInlineImage") { return "Image"; } @@ -94,9 +94,8 @@ static std::string componentNameByReactViewName(std::string viewName) { // We need this temporarily for testing purposes until we have proper // implementation of core components. - if (viewName == "ScrollContentView" || - viewName == "AndroidHorizontalScrollContentView" // Android - ) { + // iOS-only + if (viewName == "ScrollContentView") { return "View"; }