Skip to content

Commit

Permalink
Text: Cleanup Native Component Configuration
Browse files Browse the repository at this point in the history
Summary:
Cleans up the native component configuration for `RCTText` and `RCTVirtualText`.

This //does// lead to a breaking change because `Text.viewConfig` will no longer exist. However, I think this is acceptable because `viewConfig` has already long stopped being an exported prop on other core components (e.g. `View`).

Changelog:
[General][Removed] - `Text.viewConfig` is no longer exported.

Reviewed By: shergin

Differential Revision: D23708205

fbshipit-source-id: 1ad0b0772735834d9162a65d9434a9bbbd142416
  • Loading branch information
yungsters authored and facebook-github-bot committed Sep 29, 2020
1 parent 9da4d87 commit 06ce643
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 62 deletions.
75 changes: 13 additions & 62 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@

'use strict';

import {NativeText, NativeVirtualText} from './TextNativeComponent';

const DeprecatedTextPropTypes = require('../DeprecatedPropTypes/DeprecatedTextPropTypes');
const React = require('react');
const ReactNativeViewAttributes = require('../Components/View/ReactNativeViewAttributes');
const TextAncestor = require('./TextAncestor');
const Touchable = require('../Components/Touchable/Touchable');
const UIManager = require('../ReactNative/UIManager');

const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass');
const nullthrows = require('nullthrows');
const processColor = require('../StyleSheet/processColor');

Expand All @@ -27,7 +26,7 @@ import type {PressRetentionOffset, TextProps} from './TextProps';

type ResponseHandlers = $ReadOnly<{|
onStartShouldSetResponder: () => boolean,
onResponderGrant: (event: PressEvent, dispatchID: string) => void,
onResponderGrant: (event: PressEvent) => void,
onResponderMove: (event: PressEvent) => void,
onResponderRelease: (event: PressEvent) => void,
onResponderTerminate: (event: PressEvent) => void,
Expand All @@ -36,7 +35,7 @@ type ResponseHandlers = $ReadOnly<{|

type Props = $ReadOnly<{|
...TextProps,
forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
forwardedRef: ?React.Ref<typeof NativeText | typeof NativeVirtualText>,
|}>;

type State = {|
Expand All @@ -51,36 +50,6 @@ type State = {|

const PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};

const viewConfig = {
validAttributes: {
...ReactNativeViewAttributes.UIView,
isHighlighted: true,
numberOfLines: true,
ellipsizeMode: true,
allowFontScaling: true,
maxFontSizeMultiplier: true,
disabled: true,
selectable: true,
selectionColor: true,
adjustsFontSizeToFit: true,
minimumFontScale: true,
textBreakStrategy: true,
onTextLayout: true,
onInlineViewLayout: true,
dataDetectorType: true,
android_hyphenationFrequency: true,
},
directEventTypes: {
topTextLayout: {
registrationName: 'onTextLayout',
},
topInlineViewLayout: {
registrationName: 'onInlineViewLayout',
},
},
uiViewClassName: 'RCTText',
};

/**
* A React component for displaying text.
*
Expand Down Expand Up @@ -122,21 +91,19 @@ class TouchableText extends React.Component<Props, State> {
: null;
}

static viewConfig = viewConfig;

render(): React.Node {
let props = this.props;
if (isTouchable(props)) {
let {forwardedRef, selectionColor, ...props} = this.props;
if (isTouchable(this.props)) {
props = {
...props,
...this.state.responseHandlers,
isHighlighted: this.state.isHighlighted,
};
}
if (props.selectionColor != null) {
if (selectionColor != null) {
props = {
...props,
selectionColor: processColor(props.selectionColor),
selectionColor: processColor(selectionColor),
};
}
if (__DEV__) {
Expand All @@ -151,16 +118,17 @@ class TouchableText extends React.Component<Props, State> {
<TextAncestor.Consumer>
{hasTextAncestor =>
hasTextAncestor ? (
<RCTVirtualText
// $FlowFixMe[prop-missing] For the `onClick` workaround.
<NativeVirtualText
{...props}
// This is used on Android to call a nested Text component's press handler from the context menu.
// TODO T75145059 Clean this up once Text is migrated off of Touchable
onClick={props.onPress}
ref={props.forwardedRef}
ref={forwardedRef}
/>
) : (
<TextAncestor.Provider value={true}>
<RCTText {...props} ref={props.forwardedRef} />
<NativeText {...props} ref={forwardedRef} />
</TextAncestor.Provider>
)
}
Expand Down Expand Up @@ -263,26 +231,9 @@ const isTouchable = (props: Props): boolean =>
props.onLongPress != null ||
props.onStartShouldSetResponder != null;

const RCTText = createReactNativeComponentClass(
viewConfig.uiViewClassName,
() => viewConfig,
);

const RCTVirtualText =
UIManager.getViewManagerConfig('RCTVirtualText') == null
? RCTText
: createReactNativeComponentClass('RCTVirtualText', () => ({
validAttributes: {
...ReactNativeViewAttributes.UIView,
isHighlighted: true,
maxFontSizeMultiplier: true,
},
uiViewClassName: 'RCTVirtualText',
}));

const Text = (
props: TextProps,
forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
forwardedRef: ?React.Ref<typeof NativeText | typeof NativeVirtualText>,
) => {
return <TouchableText {...props} forwardedRef={forwardedRef} />;
};
Expand Down
68 changes: 68 additions & 0 deletions Libraries/Text/TextNativeComponent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/

'use strict';

import ReactNativeViewAttributes from '../Components/View/ReactNativeViewAttributes';
import UIManager from '../ReactNative/UIManager';
import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
import {type ProcessedColorValue} from '../StyleSheet/processColor';
import {type TextProps} from './TextProps';

type NativeTextProps = $ReadOnly<{
...TextProps,
isHighlighted?: ?boolean,
selectionColor?: ?ProcessedColorValue,
}>;

export const NativeText: HostComponent<NativeTextProps> = (createReactNativeComponentClass(
'RCTText',
() => ({
validAttributes: {
...ReactNativeViewAttributes.UIView,
isHighlighted: true,
numberOfLines: true,
ellipsizeMode: true,
allowFontScaling: true,
maxFontSizeMultiplier: true,
disabled: true,
selectable: true,
selectionColor: true,
adjustsFontSizeToFit: true,
minimumFontScale: true,
textBreakStrategy: true,
onTextLayout: true,
onInlineViewLayout: true,
dataDetectorType: true,
},
directEventTypes: {
topTextLayout: {
registrationName: 'onTextLayout',
},
topInlineViewLayout: {
registrationName: 'onInlineViewLayout',
},
},
uiViewClassName: 'RCTText',
}),
): any);

export const NativeVirtualText: HostComponent<NativeTextProps> =
UIManager.getViewManagerConfig('RCTVirtualText') == null
? NativeText
: (createReactNativeComponentClass('RCTVirtualText', () => ({
validAttributes: {
...ReactNativeViewAttributes.UIView,
isHighlighted: true,
maxFontSizeMultiplier: true,
},
uiViewClassName: 'RCTVirtualText',
})): any);

6 comments on commit 06ce643

@fmacherey
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @yungsters, you moved the viewConfig into the NativeText component within this commit. I looks that the android_hyphenationFrequency was accidentally dropped while moving the code. This code was added here: https://github.com/facebook/react-native/pull/29157/files
Or is the fix with hyphenation somewhere else? I am using react-native@0.63.4 and facing the hyphenation problem on android.

Or is the code elsewhere and everything is fine? Do you know, if this is to be released with 0.64?

Thanks for your help :)

@yungsters
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fmacherey Thanks for pointing that discrepancy out. That was an oversight and definitely needs to be fixed. Would you be interested in sending a PR to fix it? If not, I can get to it later this week.

@fmacherey
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yungsters Thanks for your reply. I'm not so fluent with the react-native code itself, so if its okay, I would prefer you can do this? Thanks for your help :)

@yungsters
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have an internal pull request to bring this back. Once accepted and landed, it will appear in the repository. Thanks again for reporting this!

@yungsters
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1433ed6 restores android_hyphenationFrequency on NativeText. Thanks again!

@fmacherey
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem. Thanks for your help 😃 .

Please sign in to comment.