Skip to content

Fix: Text component pressRetentionOffset issue on Windows #14596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

iamAbhi-916
Copy link
Contributor

@iamAbhi-916 iamAbhi-916 commented Apr 21, 2025

Description

Text component pressRetentionOffset on Windows wasnt working as expected behaviour as it is on native components

Problem:
PressRetentionOffset implementation is wasnt working correctly for windows.
(Expected behaviour )-> allowing touches to remain active within the expanded area while canceling them when moving beyond it.

1> when press is moved away from retention offset , it wasnt cancelling then .
2> JS side was handling in pressability and this was hooked to text using usePressability but the issue was that the
PressRetentionOffset  was called within onResponderMove which was never triggered from native side .


Fix:
1>When a component claims responder status (via onStartShouldSetResponder), the pointer is marked as an "active touch"
2>As that pointer moves across the screen, all move events are correctly dispatched to JavaScript
3> This allows the Pressability component in JavaScript to properly track the movement and apply the pressRetentionOffset logic

Type of Change

New feature (non-breaking change which adds functionality)

Why

the current code wasn't dispatching pointer move events through the touch event system for active touches with responders. The touch event system is what RNW uses to track touch interactions.

Resolves [Add Relevant Issue Here]
#13837

What

1>When a component claims responder status (via onStartShouldSetResponder), the pointer is marked as an "active touch"
2>As that pointer moves across the screen, all move events are correctly dispatched to JavaScript
3> This allows the Pressability component in JavaScript to properly track the movement and apply the pressRetentionOffset logic

Screenshots

pressOffsetrect_fix.mp4

Testing

using playground

import React from 'react';
import {
  StyleSheet,
  View,
  AppRegistry,
} from 'react-native';
import {Text} from 'react-native-windows';

const App = () => {
  const handlePressIn = () => console.log('🔵 Press In');
  const handlePressOut = () => console.log('🟡 Press Out');
  const handlePress = () => console.log('🟢 Press');
  return (
    <View style={styles.container}>
      <View style={styles.retentionZone}>
        <Text
          style={styles.pressableText}
          pressRetentionOffset={{top: 30, bottom: 30, left: 30, right: 30}}
          onPressIn={handlePressIn}
          onPressOut={handlePressOut}
          onPress={handlePress}>
          Tap and move slightly to test pressRetentionOffset
        </Text>
      </View>
    </View>
  );
};

Changelog

yes

Add a brief summary of the change to use in the release notes for the next release.

Text component pressRetentionOffset on Windows is added : allowing touches to remain active within the expanded area while canceling them when moving beyond it.

@iamAbhi-916 iamAbhi-916 requested a review from a team as a code owner April 21, 2025 18:45
@iamAbhi-916 iamAbhi-916 self-assigned this Apr 21, 2025
bool hasMoveEventListeners =
IsAnyViewInPathListeningToEvent(eventPathViews, facebook::react::ViewEvents::Offset::PointerMove) ||
IsAnyViewInPathListeningToEvent(eventPathViews, facebook::react::ViewEvents::Offset::PointerMoveCapture);
if (hasMoveEventListeners) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do we need to remove the hasMoveEventListeners check here? Isn't there a perf cost to this (now all move events will always have to be fired and propagated to JS, even if no-one is listening?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

only applies to active touches that have already claimed responder status - not to all pointer moves so sending these extra events for ongoing interactions, which is actually a small subset of all pointer movements

Copy link
Collaborator

@acoates-ms acoates-ms left a comment

Choose a reason for hiding this comment

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

It looks like pressRetentionOffset isn't supported on Text in core. It is a property on Pressable, not view/text.

Does it work on Pressable already? -- Is this change even needed?

@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Apr 21, 2025
@iamAbhi-916
Copy link
Contributor Author

It looks like pressRetentionOffset isn't supported on Text in core. It is a property on Pressable, not view/text.

Does it work on Pressable already? -- Is this change even needed?

so Official react docs explicitly lists pressRetentionOffset as a prop for [Text] components, showing that the functionality
When the touch is released outside this view, the press gesture continues to be detected, and onPress is triggered.

core support : on both iOS and Android this is supported , making Windows inconsistent without it.
so this should be added so that Users expect the same touch behavior across platforms

@microsoft-github-policy-service microsoft-github-policy-service bot added Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Apr 21, 2025
@iamAbhi-916 iamAbhi-916 requested a review from acoates-ms April 21, 2025 20:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants