fix: prevent FABGroup click when its hidden

[jbinda]

Fixes #1816

FAB in FAGBroup is clickable when group is closed/hidden. It also happens when passing visible={false}.

See below screen to see what is the issue (observe the pointer) :

Motivation

I have passed visible={open} prop from FABGroup to FAB to set pointer events on fab to none
Also depend on open state I change pointerEvents in FABGroup to box-none or none. Put there none cause that FAB in Group is not pressable on Android.

Screenshots

After proposed changes it looks like below:
Web

iOS

Android

Test plan

You can try to test after paste below code in example app in FABExample.tsx:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Colors, FAB, Portal, withTheme, Theme } from 'react-native-paper';

type Props = {
  theme: Theme;
};

type State = {
  visible: boolean;
  open: boolean;
};

class ButtonExample extends React.Component<Props, State> {
  static title = 'Floating Action Button';

  state = {
    visible: true,
    open: false,
  };

  render() {
    const {
      theme: {
        colors: { background },
      },
    } = this.props;

    return (
      <View style={[styles.container, { backgroundColor: background }]}>
        <View style={styles.row}>
        <Portal>
        <FAB.Group
          visible={true}
          open={this.state.open}
          icon={this.state.open ? 'today' : 'add'}
          actions={[
            { icon: 'add', onPress: () => console.log('Pressed add') },
            { icon: 'star', label: 'Star', onPress: () => console.log('Pressed star')},
            { icon: 'email', label: 'Email', onPress: () => console.log('Pressed email') },
            { icon: 'notifications', label: 'Remind', onPress: () => console.log('Pressed notifications') },
          ]}
          onStateChange={({ open }) => this.setState({ open })}
          onPress={() => {
            if (this.state.open) {
              // do something if the speed dial is open
            }
          }}
        />
      </Portal>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.grey200,
    padding: 4,
  },

  row: {
    justifyContent: 'center',
    alignItems: 'center',
  },

  fab: {
    margin: 8,
  },
});

export default withTheme(ButtonExample);

Then do as follow:

Web

1. Click on FAB and see if you can click the other buttons in group
2. Expect that there is no "clickable" area above visible FAB button
3. Change visible prop in example to false
4. Expect there is no "clickable" area in the place where FAB should be rendered

iOS/Android

1. Proceed with the same step as for web
2. Expect that FAB buttons in group are "pressable" when visible is true and group is open

[callstack-bot]

Hey @jbinda, thank you for your pull request 🤗. The documentation from this branch can be viewed here.