Skip to content

Commit

Permalink
Add isPressable native prop to Text
Browse files Browse the repository at this point in the history
Summary:
react-native-windows currently needs to maintain a fork of TextNativeComponent to wire through a native-only prop for `isPressable`.

The reason we do this on Windows is that we implement an optimization so we only attempt to hit test a virtual Text node if it is actually pressable, leading to significant perf improvement for pointer events (e.g., onMouseEnter / onMouseLeave) on Text.

Changelog:
[General][Added] - Native-only prop to optimize text hit testing on some RN platforms

Reviewed By: JoshuaGross

Differential Revision: D32564637

fbshipit-source-id: bf47c68d94a930d2c620cb3b1584355c5e412bd4
  • Loading branch information
rozele authored and facebook-github-bot committed Dec 1, 2021
1 parent 363ff5c commit f3bf2e4
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 0 deletions.
1 change: 1 addition & 0 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ const Text: React.AbstractComponent<
{...restProps}
{...eventHandlersForText}
isHighlighted={isHighlighted}
isPressable={isPressable}
numberOfLines={numberOfLines}
selectionColor={selectionColor}
style={style}
Expand Down
6 changes: 6 additions & 0 deletions Libraries/Text/TextNativeComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,18 @@ type NativeTextProps = $ReadOnly<{
...TextProps,
isHighlighted?: ?boolean,
selectionColor?: ?ProcessedColorValue,
// This is only needed for platforms that optimize text hit testing, e.g.,
// react-native-windows. It can be used to only hit test virtual text spans
// that have pressable events attached to them.
isPressable?: ?boolean,
}>;

export const NativeText: HostComponent<NativeTextProps> =
(createReactNativeComponentClass('RCTText', () => ({
validAttributes: {
...ReactNativeViewAttributes.UIView,
isHighlighted: true,
isPressable: true,
numberOfLines: true,
ellipsizeMode: true,
allowFontScaling: true,
Expand Down Expand Up @@ -59,6 +64,7 @@ export const NativeVirtualText: HostComponent<NativeTextProps> =
validAttributes: {
...ReactNativeViewAttributes.UIView,
isHighlighted: true,
isPressable: true,
maxFontSizeMultiplier: true,
},
uiViewClassName: 'RCTVirtualText',
Expand Down

0 comments on commit f3bf2e4

Please sign in to comment.