FAB.Group

To display a stack of FABs with related actions.

How to use

import React from 'react';
import {FAB, Portal} from '@gyri/native-ui-components';

const MyComponent = ({style, className}) => {
  const [state, setState] = React.useState({ open: false });

  const onStateChange = ({ open }) => setState({ open });

  const { open } = state;

  return (
    <Portal>
      <FAB.Group
        style={style}
        className={className}
        open={open}
        visible
        icon={open ? 'calendar-today' : 'plus'}
        actions={[
          {icon: 'plus', onPress: () => console.log('Pressed add')},
          {
            icon: 'star',
            label: 'Star',
            onPress: () => console.log('Pressed star'),
          },
          {
            icon: 'email',
            label: 'Email',
            onPress: () => console.log('Pressed email'),
          },
          {
            icon: 'bell',
            label: 'Remind',
            onPress: () => console.log('Pressed notifications'),
          },
        ]}
        onStateChange={onStateChange}
        onPress={() => {
          if (open) {
            // do something if the speed dial is open
          }
        }}
      />
    </Portal>
  )
};

export default MyComponent;

Props

#	Name	Data type	Default value	Values	Description
1	style	object			Custom style object
2	className	string	''		It defined nativewind style classes.
3	icon				Icon to display for the FAB.
4	color	string			Custom color for the FAB.
5	backdropColor	string			Custom backdrop color for opened speed dial background.
6	rippleColor				Color of the ripple effect.
7	open	boolean			Whether the speed dial is open.
8	visible	boolean			Whether FAB is currently visible.
9	onStateChange				Callback which is called on opening and closing the speed dial.

For more details https://callstack.github.io/react-native-paper/docs/components/FAB/FABGroup