[Android] PagerView 9 remounts/recreates page after navigating back to Material Top Tabs

[luutb]

[Android] PagerView 9 remounts/recreates page after navigating back to Material Top Tabs

Description

After upgrading react-native-pager-view from 8.0.2 to 9.x, a page inside @react-navigation/material-top-tabs appears to be recreated/remounted when navigating to another screen and then going back.

This causes components such as FlatList inside the tab to be rebuilt and lose their previous UI state.

The issue only occurs with PagerView 9.x on Android.

Downgrading to react-native-pager-view@8.0.2 fixes the issue.

Steps to reproduce

1. Create a Material Top Tab Navigator.
2. Render a FlatList inside one of the tabs.
3. Navigate from the Top Tab screen to another Stack screen.
4. Press Back to return to the Top Tab screen.
5. Observe that the tab/page is recreated and the FlatList is rebuilt.

Example navigation flow:

Stack
 ├── TopTabs
 │    ├── Tab A → FlatList
 │    └── Tab B
 │
 └── Detail

Tab A
  → Detail
  → Back
  → Tab A / FlatList rebuilt

A/B test

react-native-pager-view 9.x

Open Tab A
→ Navigate to Detail
→ Back
→ Page/scene recreated
→ FlatList rebuilt

Issue occurs.

react-native-pager-view 8.0.2

Open Tab A
→ Navigate to Detail
→ Back
→ Existing TopTab/page state is preserved

Issue does not occur.

The application code and navigation configuration are unchanged between these two tests. Only the react-native-pager-view version is changed.

Expected behavior

Returning from the Detail screen should preserve the existing PagerView page/scene, as it did with react-native-pager-view@8.0.2.

The FlatList should not be rebuilt because of the PagerView lifecycle.

Actual behavior

With PagerView 9.x on Android, returning to the Top Tab screen causes the page/scene to be recreated, resulting in the FlatList being rebuilt.

Additional investigation

We verified that the behavior is not caused by:

• useFocusEffect
• API refetching
• application cache
• explicit refresh logic

A/B testing consistently shows:

8.0.2 → works correctly
9.x   → issue occurs

Since PagerView 9 introduced changes to the Android implementation, this may be related to the new Android lifecycle/page handling.

Environment

React Native:
@react-navigation/native:
@react-navigation/material-top-tabs:
react-native-tab-view:
react-native-pager-view: 9.x

Android version:
Device/Emulator:
New Architecture: Yes/No

Workaround

Pinning PagerView to 8.0.2 resolves the issue:

"react-native-pager-view": "8.0.2"

[GaelCO]

Hi,

A repro and a fix is provided in #1103