Skip to main content

React Native Toast

Reanimated v3 version license npm runs with expo
NPM Downloads

A toast library for React Native, inspired by react-hot-toast. Features include multiple toasts, keyboard handling, swipe-to-dismiss, positional toasts, and support for JS promises. Works on iOS, Android, and web.

video

Features​

  • Multiple toasts, multiple options. Want a toast on the top, bottom, different colors, or different types at the same time? Got it.
  • Keyboard handling (both iOS and Android). Move those toasts out of the way and into view when the user opens the keyboard
  • Swipe to dismiss
  • Positional toasts (top & bottom)
  • Customizable (custom styles, dimensions, duration, and even create your own component to be used in the toast)
  • Add support for promises ==> Really! Call toast.promise(my_promise) and watch react-native-toast work its magic, automatically updating the toast with a custom message on success -- or an error message on reject.
  • Runs on web
  • Support for native modals
  • Callbacks for onPress, onShow, and onHide

Installation​

yarn add @backpackapp-io/react-native-toast

OR

npm i @backpackapp-io/react-native-toast

Peer Dependencies​

Install and link react-native-reanimated, react-native-safe-area-context, and react-native-gesture-handler

yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler

Ensure you follow the installation of each package

Using expo?

npx expo install react-native-reanimated react-native-safe-area-context react-native-gesture-handler

info

React Native Gesture Handler v3 needs extra steps to finalize its installation, please follow their installation instructions. Please make sure to wrap your App with GestureHandlerRootView when you've upgraded to React Native Gesture Handler ^3.

React Native Reanimated v3 needs extra steps to finalize its installation, please follow their installation instructions.

Thank you react-hot-toast​

react-native-toast is built with modified react-hot-toast internals? Why? Well, react-native doesn't really need all the unnecessary web fluff (aria what?). So, I trimmed it down and made it perfect for mobile development by battle testing it on mobile devices and creating react-native components built specifically for iOS and Android development.

Author​

Nick DeBaise on LinkedIn

Email me directly: nickdebaise@gmail.com

Contributing​

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

License​

MIT

Made with create-react-native-library

Todos​

  • Add unit tests for Components and hooks
  • Allow theming in <Toasts />
  • Queue manager