Skip to content

Commit 1d92454

Browse files
adrienharnayfacebook-github-bot
authored andcommitted
Add onPressIn & onPressOut props to Text (#31288)
Summary: I added onPressIn & onPressOut props to Text to help implement custom highlighting logic (e.g. when clicking on a Text segment). Since TouchableOpacity can't be nested in Text having custom lineHeights without bugs in some occasions, this modification helps to replicate its behavior. ## Changelog [General] [Added] - Add onPressIn & onPressOut props to Text Pull Request resolved: #31288 Test Plan: ``` const [pressing, setPressing] = useState(false); <Text onPressIn={() => setPressing(true)} onPressOut={() => setPressing(false)} style={{ opacity: pressing ? 0.5 : 1 }} /> ``` Thanks in advance! Reviewed By: yungsters Differential Revision: D27945133 Pulled By: appden fbshipit-source-id: 8342ca5f75986b4644a193d2f71eab3bc0ef1a5f
1 parent 570c6f1 commit 1d92454

File tree

2 files changed

+8
-0
lines changed

2 files changed

+8
-0
lines changed

Libraries/Text/Text.js

+6
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const Text: React.AbstractComponent<
3434
ellipsizeMode,
3535
onLongPress,
3636
onPress,
37+
onPressIn,
38+
onPressOut,
3739
onResponderGrant,
3840
onResponderMove,
3941
onResponderRelease,
@@ -64,9 +66,11 @@ const Text: React.AbstractComponent<
6466
onPress,
6567
onPressIn(event) {
6668
setHighlighted(!suppressHighlighting);
69+
onPressIn?.(event);
6770
},
6871
onPressOut(event) {
6972
setHighlighted(false);
73+
onPressOut?.(event);
7074
},
7175
onResponderTerminationRequest_DEPRECATED: onResponderTerminationRequest,
7276
onStartShouldSetResponder_DEPRECATED: onStartShouldSetResponder,
@@ -78,6 +82,8 @@ const Text: React.AbstractComponent<
7882
pressRetentionOffset,
7983
onLongPress,
8084
onPress,
85+
onPressIn,
86+
onPressOut,
8187
onResponderTerminationRequest,
8288
onStartShouldSetResponder,
8389
suppressHighlighting,

Libraries/Text/TextProps.js

+2
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,8 @@ export type TextProps = $ReadOnly<{|
122122
* See https://reactnative.dev/docs/text.html#onpress
123123
*/
124124
onPress?: ?(event: PressEvent) => mixed,
125+
onPressIn?: ?(event: PressEvent) => mixed,
126+
onPressOut?: ?(event: PressEvent) => mixed,
125127
onResponderGrant?: ?(event: PressEvent) => void,
126128
onResponderMove?: ?(event: PressEvent) => void,
127129
onResponderRelease?: ?(event: PressEvent) => void,

0 commit comments

Comments
 (0)