A customizable toast notification for React Native

react-native-buttered-toast

An utterly, butterly, customizable toast notification for React Native. Display any React <Component /> as a Toast notification.

Supports Android, iOS and Web.

? Getting Started

Using npm:

npm install --save react-native-buttered-toast

Using yarn:

yarn add react-native-buttered-toast

✍️ Example

There are a couple of prerequisites to be aware of before using this library:

  • You must use a <ButteredToastProvider> at the graphical root of your application.
    • react-native-buttered-toast does not render using a <Modal />, so any other elements higher in the hierarchy have the potential to render over the top of your notifications.
  • Any component you'd wish to have the ability to generate a toast will need to be wrapped with the withButter higher-order component (HOC).
import React, { useEffect } from 'react';
import { View, Text, Easing, StyleSheet } from 'react-native';
import ButteredToastProvider, { withButter } from 'react-native-buttered-toast';

const styles = StyleSheet
  .create(
    {
      container: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
  );

// XXX: The `withButter` HOC supplies the `makeToast` and `consumeToast` props, used to show and dismiss toasts respectively.
const App = ({ makeToast, consumeToast }) => {
  useEffect(
    () => {
      makeToast(
        ({ ...extraProps }) => (
          <Text
            {...extraProps}
            children="I will be rendered as a draggable, dismissable, toast!"
          />
        ),
        {
          // XXX: Allow swipe to dismiss.
          dismissable: true,
          // XXX: Automatically kill after two seconds.
          lifespan: 2000,
          // XXX: When the toast pops up, make it to bounce!
          easing: Easing.bounce,
        },
      );
    },
  );
  return (
    <View
      style={[
        StyleSheet.absoluteFill,
        styles.container,
      ]}
    >
      <Text
        children="This is an example."
      />
    </View>
  );
};

export default ({ ...extraProps }) => {
  const ButteryApp = withButter(
    App,
  );
  return (
    <ButteredToastProvider>
      <ButteryApp
        {...extraProps}
      />
    </ButteredToastProvider>
  );
};

? Props

ButteredToastProvider

Property Type Required Default value Description
paddingBottom number no 30 Spacing to apply to the bottom of the toasts.
paddingRight number no 10 Spacing to apply to the right of the toasts.
paddingBetween number no 10 Spacing to apply between successive toasts.
duration number no 500 Default amount of time to automatically consume (hide) a toast.
easing func no Easing.bounce Easing function when automatically consuming a toast.

makeToast Options

The makeToast prop injected by the ButteredToastProvider accepts a React Element as the first argument, and an options argument as the last. These options default to:

{
  containerStyle: styles.containerStyle, // An empty styles object.
  duration: 1200,
  easing: Easing.bounce,
  lifespan: -1, // Must be dismissed.
  dismissable: true,
}

GitHub