Skip to main content

useSnackbar

import { useSnackbar } from 'react-native-flix-snackbar';

useSnackbar is a hook to automatically handle Snackbar component either to show or hide

Example usage​

// other import
import { useSnackbar } from 'react-native-flix-snackbar';

export default MainApp = props => {
  const { show } = useSnackbar();

  return (
    <View style={{flex: 1}}>
      <TouchableOpacity onPress={() => show('Hi snackbar!')}>
        <Text>Open Snackbar</Text>
      </TouchableOpacity>;
    </View>
  );
};

Props​

message (required)​

Type: string

Text content to show in Snackbar component

options​

Type: object

List of config to handle Snackbar

options.label​

Type: string

Text label of button action in Snackbar

options.onPress​

Type: function void

Callback called when action Snackbar is pressed. The onPress prop is required if options.label is defined.

options.duration​

Type: number

default: 2000 (ms)

The duration for Snackbar to show

options.color​

Type: string

default: #dee5d8

The color of text label Snackbar

options.backgroundColor​

Type: string

default: #424940

The backgroundColor of Snackbar container