callstack / callstack/react-native-pager-view
[iOS 15] Tab indicator does not update when switching pages after SwiftUI migration (v8)
- Lingua principale
- TypeScript
- Stelle
- 3.4k
- Fork
- 476
- Merge medio
- 10g 21h
- PR unite (30g)
- 2
Descrizione
## 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Riproduci il problema con la demo collegata e un simulatore iOS 15, quindi confrontalo con iOS 16 o versioni successive. Leggi PagerViewProps.swift e la migrazione a SwiftUI discussa in PR #1020, concentrandoti sullo stato segnalato e sulla propagazione degli eventi. Il lavoro è completo quando l’indicatore segue la pagina visualizzata su iOS 15, mentre il comportamento esistente rimane corretto sulle versioni più recenti.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- ios, react-native, swift, typescript
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 52/100