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

GitHub

View Github