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

https://github.com/callstack/react-native-pager-view/assets/11406239/cc636f92-0300-4a7c-a957-b24ccac9b0a5

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

https://github.com/callstack/react-native-pager-view/assets/96097646/e9e37440-1c5b-4f8c-b856-df3f9f5640e6

[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]

https://github.com/user-attachments/assets/65a9853b-6c05-4fe6-8b65-86259409199a

[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:

• https://github.com/Expensify/App/issues/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

[syahbes]

for me whats fixed this issue was to replace 'onPress' with 'onPressOut'

even with :

<TouchableOpacityonPressOut={() =>  { conssole.log("clicked")}>
   <Text>Click me</Text>
</TouchableOpacity>