Skip to content

scrollEnabled={false} doesn't prevent swipe on iOS #1029

@lucas-miak

Description

@lucas-miak

Environment

  • React Native version: 0.81.4
  • react-native-pager-view version: 6.9.1
  • Platform: iOS
  • iOS version: 26.x (tested on simulator/device)
  • macOS version: 26.0 (Sequoia)
  • Xcode version: 26.0.1
  • Expo SDK version: ~54.0.10
  • Architecture: New Architecture enabled

Description

The scrollEnabled={false} prop does not prevent user swipe gestures on iOS. Despite setting this prop to false, users can still swipe horizontally to change pages in the PagerView component.

Expected behavior: When scrollEnabled={false} is set, users should not be able to swipe between pages. Page changes should only be possible programmatically via setPage().

Actual behavior: Users can still swipe between pages even with scrollEnabled={false}. The prop seems to be ignored on iOS.

Note: This appears to work correctly on Android.

Reproducible Demo

import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';

export default function App() {
  return (
    <View style={styles.container}>
      <PagerView
        style={styles.pager}
        initialPage={0}
        scrollEnabled={false}  // This should prevent swiping but doesn't work on iOS
      >
        <View key="1" style={[styles.page, { backgroundColor: '#FF6B6B' }]}>
          <Text style={styles.text}>Page 1</Text>
        </View>
        
        <View key="2" style={[styles.page, { backgroundColor: '#4ECDC4' }]}>
          <Text style={styles.text}>Page 2</Text>
        </View>
        
        <View key="3" style={[styles.page, { backgroundColor: '#45B7D1' }]}>
          <Text style={styles.text}>Page 3</Text>
        </View>
      </PagerView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  pager: {
    flex: 1,
  },
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});

Steps to reproduce:

  1. Create a new React Native project with the environment specified above
  2. Install react-native-pager-view@6.9.1
  3. Copy the code above into your App component
  4. Run on iOS simulator or device
  5. Try to swipe between pages - swiping works even though scrollEnabled={false}
  6. Compare with Android where the prop works correctly

Additional context:
I'm using this in a multi-step form where I want to control navigation programmatically with "Next" and "Previous" buttons only, without allowing users to swipe between steps.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions