react-native-snackbar-context

Snackbar component for React Native

Installation

npm install react-native-snackbar-context --save

or

yarn add react-native-snackbar-context

Usage

SnackbarProvider

import { SnackbarProvider } from "react-native-snackbar-context";

const App: React.FC = () => {
  return (
    <SnackbarProvider>
      /* Other Components */
    </SnackbarProvider>
  );
}

export default App;

SnackbarProvider Props

Name	Type	Default
spaces	object	SnackbarSpaces
colorPalette	object	SnackbarColors
duration	number	SnackbarDurations.REGULAR

useSnackbarContext

import {
  useSnackbarContext,
  SnackbarMessageTypes,
  SnackbarDurations
} from "react-native-snackbar-context";

const Component: React.FC = () => {
  const { showMessage, hideMessage } = useSnackbarContext();

  const handleShowMessage = React.useCallback(() => {
    showMessage({
      type: SnackbarMessageTypes.SUCCESS,
      message: 'React Native Snackbar Context',
      duration: SnackbarDurations.FAST,
      actions: [{ title: 'OK', onPress: hideMessage }],
    });
  }, [showMessage, hideMessage])
  
  return (
    <Button title={'Show Snackbar'} onPress={handleShowMessage} />
  );
}

export default Component;

showMessage

Name	Type	Default
message*	string	-
type	success | info | warning | error | default	default
duration	number	SnackbarDurations.REGULAR
actions	object[]	-

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT