Skip to content

Commit

Permalink
Fork onPress callbacks for ios highlighting (#44909)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #44909

Today we wrap all `onPressIn` and `onPressOut` callbacks we pass to pressability so we can set the `highlighted` state. However highlighted state is only ever set to anything other that false on iOS. This change not only skips calling `setHighlighted(false)` on every press event but also skips wrapping the callback.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D58391419

fbshipit-source-id: e79f51469609a59063098501f015f8078e3db79f
  • Loading branch information
pieterv authored and facebook-github-bot committed Jun 13, 2024
1 parent 0ad107b commit f7aea0c
Showing 1 changed file with 39 additions and 33 deletions.
72 changes: 39 additions & 33 deletions packages/react-native/Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,41 +101,47 @@ const Text: React.AbstractComponent<
_disabled !== true;

const initialized = useLazyInitialization(isPressable);
const config = useMemo(
() =>
initialized
? {
disabled: !isPressable,
pressRectOffset: pressRetentionOffset,
onLongPress,
onPress,
onPressIn(event: PressEvent) {
// Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
// in the best case, and cause issues with text selection in the worst case. Forcing
// the isHighlighted prop to false on all platforms except iOS.
setHighlighted(
(suppressHighlighting == null || !suppressHighlighting) &&
Platform.OS === 'ios',
);
onPressIn?.(event);
},
onPressOut(event: PressEvent) {
setHighlighted(false);
onPressOut?.(event);
},
}
: null,
[
initialized,
isPressable,
pressRetentionOffset,
const config = useMemo(() => {
if (!initialized) {
return null;
}

let _onPressIn = onPressIn;
let _onPressOut = onPressOut;

// Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
// in the best case, and cause issues with text selection in the worst case. Forcing
// the isHighlighted prop to false on all platforms except iOS.
if (Platform.OS === 'ios') {
_onPressIn = (event: PressEvent) => {
setHighlighted(suppressHighlighting == null || !suppressHighlighting);
onPressIn?.(event);
};

_onPressOut = (event: PressEvent) => {
setHighlighted(false);
onPressOut?.(event);
};
}

return {
disabled: !isPressable,
pressRectOffset: pressRetentionOffset,
onLongPress,
onPress,
onPressIn,
onPressOut,
suppressHighlighting,
],
);
onPressIn: _onPressIn,
onPressOut: _onPressOut,
};
}, [
initialized,
isPressable,
pressRetentionOffset,
onLongPress,
onPress,
onPressIn,
onPressOut,
suppressHighlighting,
]);

const eventHandlers = usePressability(config);
const eventHandlersForText = useMemo(
Expand Down

0 comments on commit f7aea0c

Please sign in to comment.