Click not responding on second page onwards

[nikhil-alr]

Environment

Android 14 Oxygen OS One plus 8 pro
Running app by enabling new architecture

Description

When running example app using v7.0.0-rc.2 by enabling new architecture on second page onwards button not responding.

Reproducible Demo

Record_2024-06-19-13-43-08.mp4

Step to Produce

1.Clone library repo
2.Switch to v7.0.0-rc.2 branch
3.Do npm install
4.set enable new arch true
5.run app in Android 14 Oxygen OS One plus 8 pro

[MrRefactor]

Try with 6.3.3 version

[NikhilKamboja]

Issue still persists on 6.3.3 with new Arch on Android 14 Oxygen OS One plus 8 pro
PFA

Record_2024-06-20-12-27-27.mp4

[dengcqw]

utils.tsx L21

export const childrenWithOverriddenStyle = (
  children?: ReactNode,
  pageMargin = 0
) => {
  return Children.map(children, (child) => {
    return (
      <View
        style={{
          ...StyleSheet.absoluteFill,    // fix it by add this
          height: '100%',
          width: '100%',
          paddingHorizontal: pageMargin / 2,
        }}
        collapsable={false}
      >
        {child}
      </View>
    );
  });
};

[NikhilKamboja]

@dengcqw thanks it's working now
We can close this issue

[NikhilKamboja]

Hi team can you tell way forward to officially fix this issue.
Any plan to release a patch?

Thanks

[MrRefactor]

I will create PR for it soon.

[MrRefactor]

@NikhilKamboja I cannot reproduce it on android14, checked both js and native stack with new arch, did you apply any other changes?

[MrRefactor]

Screen.Recording.2024-07-18.at.17.16.14.mov

[NikhilKamboja]

Can you please check Android 14 Oxygen OS One plus 8 pro Real Device

[sriharsha-y]

utils.tsx L21

export const childrenWithOverriddenStyle = (
  children?: ReactNode,
  pageMargin = 0
) => {
  return Children.map(children, (child) => {
    return (
      <View
        style={{
          ...StyleSheet.absoluteFill,    // fix it by add this
          height: '100%',
          width: '100%',
          paddingHorizontal: pageMargin / 2,
        }}
        collapsable={false}
      >
        {child}
      </View>
    );
  });
};

We are using react-native-tab-view which internally uses this library. With ...StyleSheet.absoluteFill I don't see any issue in OnePlus physical device (Android 14 - Color OS), but now issue happens with iOS where the views are retained or never removed between tab switches. Conditionally putting ...StyleSheet.absoluteFill for Android works for both Android & iOS for tab switches. Not sure what the right approach would be here....

[MrRefactor]

hey @NikhilKamboja please check if those changes are fixing it:

diff --git a/node_modules/react-native-pager-view/src/utils.tsx b/node_modules/react-native-pager-view/src/utils.tsx
index 0d7d265..2f022a4 100644
--- a/node_modules/react-native-pager-view/src/utils.tsx
+++ b/node_modules/react-native-pager-view/src/utils.tsx
@@ -1,5 +1,5 @@
 import React, { Children, ReactNode } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';

 export const LEGACY_childrenWithOverriddenStyle = (children?: ReactNode) => {
   return Children.map(children, (child) => {
@@ -29,6 +29,7 @@ export const childrenWithOverriddenStyle = (
           height: '100%',
           width: '100%',
           paddingHorizontal: pageMargin / 2,
+          position: Platform.OS === 'android' ? 'absolute' : undefined,
         }}
         collapsable={false}
       >

[hannojg]

@MrRefactor we face this problem in expensify right now. With the proposed change the issue is fixed for this issue ticket:

• Android Native: The bottom half of the camera doesn't work (i.e. shutter, flash and file upload buttons) Expensify/App#47911

would appreciate if we could add this change to the library 🙏

(see this slack thread)

[NikhilKamboja]

hey @NikhilKamboja please check if those changes are fixing it:

diff --git a/node_modules/react-native-pager-view/src/utils.tsx b/node_modules/react-native-pager-view/src/utils.tsx
index 0d7d265..2f022a4 100644
--- a/node_modules/react-native-pager-view/src/utils.tsx
+++ b/node_modules/react-native-pager-view/src/utils.tsx
@@ -1,5 +1,5 @@
 import React, { Children, ReactNode } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';

 export const LEGACY_childrenWithOverriddenStyle = (children?: ReactNode) => {
   return Children.map(children, (child) => {
@@ -29,6 +29,7 @@ export const childrenWithOverriddenStyle = (
           height: '100%',
           width: '100%',
           paddingHorizontal: pageMargin / 2,
+          position: Platform.OS === 'android' ? 'absolute' : undefined,
         }}
         collapsable={false}
       >

HI @MrRefactor it's working please go ahead

[MrRefactor]

fixed in https://github.com/callstack/react-native-pager-view/releases/tag/v6.4.1