callstack / callstack/react-native-pager-view
[iOS 15] Tab indicator does not update when switching pages after SwiftUI migration (v8)
- 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
Assessment
This issue has not been assessed yet.