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

[manakuro]

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

Simulator.Screen.Recording.-.iPhone.7.-.2026-06-01.at.13.56.37.mov

iOS26.5

Simulator.Screen.Recording.-.iPhone.17.-.2026-06-01.at.13.58.35.mov

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

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)"

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 = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

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 (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <TabView
          navigationState={{ index, routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={{ width: layout.width }}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

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), 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:

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

[khanhkom]

have same issue with this, when i using lib react-native-collapsible-tab-view in Iphone 7 Plus (15.5)