react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

[BUG] [Accessibility] [iOS] - PagerView with scroll disabled still scrolls when we focus an horizontal scrollview item inside it

Open gladiuscode opened this issue 11 months ago • 5 comments

First things first: Thanks for your great library!

Here are all the useful info I can share:

Environment

  • As per the example app;
  • Old Architecture & New Architecture as well;

Description

Since accessibility is kind of mandatory for most app, we need to ensure that ours is accessible as well and we are currently fighting with the pager view implementation. We use the react-native-tab-view library and initially we though the issue lied there, but in the end we cloned this project, ran the example app and found out that the issue is with the PagerView itself.

This is the error in detail:

If we render an horizontal FlatList, with items styled to fit the width of the screen, inside a PagerView with scrollEnabled set to false, once we start the VoiceOver and try to scroll the FlatList, the PagerView captures the gesture and scroll the tab instead.

Note: I know that having an horizontal scrollview inside a tab isn't the brightest of all ideas, but you know, you jump the ship, the ship already has this setup, you don't wanna touch it and you end up writing an issue on the react-native-pager-view repository.

Reproducible Demo

Here you can find the repo: react-native-pager-view. Build the bug/horizontal-scroll-view branch and check out the BasicPagerViewExample screen, you'll see that once you start the VoiceOver, you aren't able to scroll properly.

Question

Is this library built with accessibility in mind?

gladiuscode avatar Feb 20 '25 22:02 gladiuscode

Please check with 6.8.1 release.

MrRefactor avatar May 30 '25 05:05 MrRefactor

@MrRefactor still happening in 6.8.1 we have a GestureDetector listening for pan gestures inside the PagerView and even tho scrollEnabled is set to false the PagerView still scrolls

one workaround for this is to set scrollEnabled to true on the initial render and then set it to false later, like this:

const [scrollEnabled, setScrollEnabled] = useState(true)
.
.
.
  <PagerView
    scrollEnabled={scrollEnabled}
    onLayout={() => setScrollEnabled(false)}
    ...

first-dev avatar Jun 02 '25 14:06 first-dev

Also running into this issue with PagerView where if scrollEnabled is set to false the PagerView still scrolls. @first-dev 's workaround works for me for now

kittst avatar Dec 10 '25 07:12 kittst

Also running into this issue with PagerView where if scrollEnabled is set to false the PagerView still scrolls. @first-dev 's workaround works for me for now

~~Same here!~~ False. It worked on iOS, during testing in my dev environment, then I pushed it live and it still swipes on Android!

chandlery54 avatar Dec 18 '25 21:12 chandlery54

Please try https://github.com/callstack/react-native-pager-view/releases/tag/v8.0.0

troZee avatar Dec 19 '25 03:12 troZee

Please try https://github.com/callstack/react-native-pager-view/releases/tag/v8.0.0

I don't think I can because Expo Go is only compatible with 6.9.1

chandlery54 avatar Dec 19 '25 23:12 chandlery54