React Native/Expo Web: Input Focus Triggers Pull-to-Refresh (iOS Safari)

14 Views Asked by At

I'm encountering a specific behavior with pull-to-refresh in a React Native application running on Expo Router within iOS Safari (mobile web). Here's the scenario:

  • I have a ScrollView component containing content and an input field.
  • Setting touch-action: none on the ScrollView successfully disables pull-to-refresh when the input field is not focused.
  • However, when the input field gains focus, Safari Mobile automatically adjusts the view to ensure the input is fully visible. This focus-induced scroll seems to trigger the pull-to-refresh gesture unintentionally.

Expected Behavior:

I want to prevent pull-to-refresh entirely, regardless of input focus, while maintaining smooth scrolling functionality.

Tried Solutions:

Using touch-action: none on the ScrollView (works when input is not focused).

Questions:

  • Has anyone encountered this specific issue where input focus triggers pull-to-refresh in React Native/Expo web on iOS Safari?
  • Are there recommended approaches to handle focus scrolling while maintaining disabled pull-to-refresh on iOS devices using React Native/Expo web?

Additional Information:

React Native version 0.73.4 Expo version 50.0.11

0

There are 0 best solutions below