Skip to content

Commit

Permalink
Add onPressIn & onPressOut props to Text (#31288)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
adrienharnay authored and facebook-github-bot committed May 6, 2021
1 parent 570c6f1 commit 1d92454
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 0 deletions.
6 changes: 6 additions & 0 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const Text: React.AbstractComponent<
ellipsizeMode,
onLongPress,
onPress,
onPressIn,
onPressOut,
onResponderGrant,
onResponderMove,
onResponderRelease,
Expand Down Expand Up @@ -64,9 +66,11 @@ const Text: React.AbstractComponent<
onPress,
onPressIn(event) {
setHighlighted(!suppressHighlighting);
onPressIn?.(event);
},
onPressOut(event) {
setHighlighted(false);
onPressOut?.(event);
},
onResponderTerminationRequest_DEPRECATED: onResponderTerminationRequest,
onStartShouldSetResponder_DEPRECATED: onStartShouldSetResponder,
Expand All @@ -78,6 +82,8 @@ const Text: React.AbstractComponent<
pressRetentionOffset,
onLongPress,
onPress,
onPressIn,
onPressOut,
onResponderTerminationRequest,
onStartShouldSetResponder,
suppressHighlighting,
Expand Down
2 changes: 2 additions & 0 deletions Libraries/Text/TextProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ export type TextProps = $ReadOnly<{|
* See https://reactnative.dev/docs/text.html#onpress
*/
onPress?: ?(event: PressEvent) => mixed,
onPressIn?: ?(event: PressEvent) => mixed,
onPressOut?: ?(event: PressEvent) => mixed,
onResponderGrant?: ?(event: PressEvent) => void,
onResponderMove?: ?(event: PressEvent) => void,
onResponderRelease?: ?(event: PressEvent) => void,
Expand Down

0 comments on commit 1d92454

Please sign in to comment.