Inconsistent pointerEvents Behavior in FAB.Group on Mobile Browsers #4202

[abretonc7s]

• Re-opening Inconsistent pointerEvents Behavior in FAB.Group on Mobile Browsers #4202

Current behaviour

The FAB.Group component in React Native Paper, when closed, overlays the UI with a transparent layer that captures touch events on mobile browsers. This prevents users from interacting with elements beneath the FAB.Group, as seen in the attached screenshot.

I also noticed that the behaviour isn't consistent and depending on the scrolling status of the window, the interaction may not be blocked...

Expected behaviour

The FAB.Group should not interfere with the UI when in a closed state, allowing users to interact with other elements on the page.

How to reproduce?

Implement a FAB.Group component in a React Native Paper project.
Run the application in a mobile browser.
Close the FAB.Group component.
Try to interact with UI elements located under the closed FAB.Group.

Example code:

import * as React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';

import { FAB, Portal, Text, Button } from 'react-native-paper';

import ScreenWrapper from '../../ScreenWrapper';

const BugFABExample = () => {
  const [open, setOpen] = React.useState<boolean>(false);

  return (
    <ScreenWrapper style={styles.container}>
      <ScrollView>
        <View style={styles.content}>
          <Text variant="headlineMedium">Interaction Test</Text>
          <Text>
            Try interacting with the buttons below when the FAB is closed:
          </Text>
          {[...Array(10)].map((_, index) => (
            <Button
              key={index}
              mode="contained"
              onPress={() => alert(`Button ${index + 1} pressed`)}
              style={styles.button}
            >
              Button {index + 1}
            </Button>
          ))}
        </View>
      </ScrollView>
      <Portal>
        <FAB.Group
          open={open}
          visible
          icon={open ? 'close' : 'plus'}
          actions={[
            { icon: 'star', label: 'Star aaaaaaaaaaa', onPress: () => {} },
            { icon: 'email', label: 'Email bbbbbbbbbbb', onPress: () => {} },
            { icon: 'bell', label: 'Bell cccccccccc', onPress: () => {} },
          ]}
          onStateChange={({ open }) => setOpen(open)}
        />
      </Portal>
    </ScreenWrapper>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 16,
    paddingBottom: 80, // Add some padding at the bottom to ensure scrollability
  },
  button: {
    marginVertical: 8,
  },
});

export default BugFABExample;

Preview

In this case you cannot press on button 8 in the highlighted area...

What have you tried so far?

• PR with fix at fix: invalid touchable area on mobile browser #4514

Your Environment

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	x.x.x
node	x.x.x
npm or yarn	x.x.x
expo sdk	x.x.x