import * as React from "react"; import { StyleProp, ViewStyle } from "react-native"; import { DefaultTheme } from "styled-components"; declare type Props = { /** * Action items to display in the form of a speed dial. * An action item should contain the following properties: * - `icon`: icon to display (required) * - `label`: optional label text * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified * - `color`: custom icon color of the action item * - `style`: pass additional styles for the fab item, for example, `backgroundColor` * - `small`: boolean describing whether small or normal sized FAB is rendered. Defaults to `true` * - `onPress`: callback that is called when `FAB` is pressed (required) */ actions: Array<{ icon: React.ReactElement; label?: string; color?: string; accessibilityLabel?: string; style?: StyleProp; small?: boolean; onPress: () => void; testID?: string; }>; /** * Icon to display for the `FAB`. * You can toggle it based on whether the speed dial is open to display a different icon. */ icon: React.ReactElement; /** * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. */ accessibilityLabel?: string; /** * Custom color for the `FAB`. */ color?: string; /** * Function to execute on pressing the `FAB`. */ onPress?: () => void; /** * Whether the speed dial is open. */ open: boolean; /** * Callback which is called on opening and closing the speed dial. * The open state needs to be updated when it's called, otherwise the change is dropped. */ onStateChange: (state: { open: boolean; }) => void; /** * Whether `FAB` is currently visible. */ visible: boolean; /** * Style for the group. You can use it to pass additional styles if you need. * For example, you can set an additional padding if you have a tab bar at the bottom. */ style?: StyleProp; /** * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor. */ fabStyle?: StyleProp; /** * @optional */ theme?: DefaultTheme; /** * Pass down testID from Group props to FAB. */ testID?: string; }; /** * A component to display a stack of FABs with related actions in a speed dial. * To render the group above other components, you'll need to wrap it with the [`Portal`](portal.html) component. * *
* *
* * ## Usage * ```js * import * as React from 'react'; * import FAB from 'react-native-simple-elements/components/FAB'; * import Portal from "react-native-simple-elements/components/Portal"; * import Provider from "react-native-simple-elements/components/theme/Provider"; * * const MyComponent = () => { * const [state, setState] = React.useState({ open: false }); * * const onStateChange = ({ open }) => setState({ open }); * * const { open } = state; * * return ( * * * 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'), * small: false, * }, * ]} * onStateChange={onStateChange} * onPress={() => { * if (open) { * // do something if the speed dial is open * } * }} * /> * * * ); * }; * * export default MyComponent; * ``` */ declare const FABGroup: { ({ actions, icon, open, onPress, accessibilityLabel, theme, style, fabStyle, visible, testID, onStateChange, color: colorProp, }: Props): JSX.Element; displayName: string; }; export default FABGroup; declare const FABGroupWithTheme: { ({ actions, icon, open, onPress, accessibilityLabel, theme, style, fabStyle, visible, testID, onStateChange, color: colorProp, }: Props): JSX.Element; displayName: string; }; export { FABGroupWithTheme as FABGroup };