callstack / callstack/react-native-pager-view

[iOS 15] Tab indicator does not update when switching pages after SwiftUI migration (v8)

Open
#1,080 2 comments 2 reactions 0 assignees View on GitHub
ios
Dominant language
TypeScript
Stars
3.4k
Forks
476
Avg merge
10d 21h
Merged PRs (30d)
2

Description

## Environment

| | Version |
|---|---|
| `react-native-pager-view` | 8.0.1 |
| `react-native-tab-view` | 4.1.2 |
| `@react-navigation/native` | 7.2.4 |
| `@react-navigation/bottom-tabs` | 7.16.1 |
| `@react-navigation/native-stack` | 7.15.1 |
| `@react-navigation/stack` | 7.9.2 |
| `@react-navigation/elements` | 2.9.18 |
| `react-native-screens` | 4.25.0 |
| `react-native` | 0.84.1 |
| iOS | **15.x** |

## Description

After upgrading to v8.0.0 (SwiftUI rewrite), the tab indicator (active tab highlight) no longer updates on iOS 15 when switching pages. The page content switches correctly, but the tab bar UI stays on the originally selected tab.

Downgrading to v7.0.2 resolves the issue immediately, which strongly suggests a regression introduced by the SwiftUI migration.

### iOS15
https://github.com/user-attachments/assets/e842d9b5-e5f0-404c-ada7-d975d088cdab

### iOS26.5
https://github.com/user-attachments/assets/da1c2566-c61f-453c-9841-f634fa3ace25

## Reproducible Demo

https://github.com/manakuro/react-native-pager-view-ios15-issue

### 1. Set up an iOS 15 simulator

An iOS 15 simulator runtime is required. If you don't have one:

1. Open Xcode
2. Go to **Xcode → Settings → Platforms**
3. Click **+** and download **iOS 15.x**
4. Once downloaded, open **Window → Devices and Simulators → Simulators**
5. Click **+** to add a new simulator, choose any device (e.g. iPhone 13) with the **iOS 15** runtime
### 2. Run the demo

```sh
git clone https://github.com/manakuro/react-native-pager-view-ios15-issue.git
cd react-native-pager-view-ios15-issue
yarn install
cd ios && pod install && cd ..
npx react-native run-ios --simulator "iPhone 13 (iOS 15)"
```

```App.tsx
import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const FirstRoute = () => (

);

const SecondRoute = () => (

);

const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});

const routes = [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
];

export default function App() {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);

return (





);
}
```

## Expected behavior

The tab indicator moves to the tapped tab, matching the displayed page content.

## Actual behavior

The page content switches correctly, but the tab indicator remains on the original tab. The tab bar UI and the actual page are out of sync.

## Reproduction

Reproducible with the standard `react-native-tab-view` setup on iOS 15. Confirmed working correctly on iOS 16 and above.

## Possible cause

During the PR review for the SwiftUI migration ([#1020](https://github.com/callstack/react-native-pager-view/pull/1020)), a reviewer flagged that `ObservableObject` usage in `PagerViewProps.swift` requires iOS 17+, while the stated minimum deployment target is iOS 15+. This may indicate that certain SwiftUI APIs used in v8 are not fully compatible with iOS 15, causing state/event propagation to silently break on that OS version.

## Workaround

Downgrade to v7.0.2:

```sh
npm install react-native-pager-view@7.0.2
# or
yarn add react-native-pager-view@7.0.2

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.