react-native-simple-toast

React Native Toast component for both Android and iOS. It just lets iOS users have the same toast experience as on Android. Using scalessec/Toast on iOS and the React Native's ToastAndroid on Android.

Summary

• extremely simple fire-and-forget api, same as ToastAndroid
• renders on top of Modals and Alerts
• customizable styling

Screenshots

Expand for more screenshots

Install

Requires React Native 0.70 or later because the lib needs new architecture enabled. Version 2 will not work with old architecture. Use version 1 if you need to use it with the old architecture.

Please read more about the new architecture here.

yarn add react-native-simple-toast
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install

then rebuild your project

Usage

the module exposes the following functions, same as ToastAndroid, with extra styling parameter for iOS only:

import Toast from 'react-native-simple-toast';

Toast.show(message, duration, styles);

Toast.showWithGravity(message, duration, gravity, styles);

Toast.showWithGravityAndOffset(
  message,
  duration,
  gravity,
  xOffset,
  yOffset,
  styles,
);

exported duration and positioning constants:

import Toast from 'react-native-simple-toast';

Toast.LONG;
Toast.SHORT;
Toast.TOP;
Toast.BOTTOM;
Toast.CENTER;

Please note that yOffset and xOffset are ignored on Android 11 and above.

For styling on iOS, you can pass an object with the following properties:

type StylesIOS = {
  textColor?: ColorValue;
  backgroundColor?: ColorValue;
};

Examples

import Toast from 'react-native-simple-toast';

Toast.show('This is a short toast');

Toast.show('This is a long toast.', Toast.LONG);

Toast.showWithGravity(
  'This is a long toast at the top.',
  Toast.LONG,
  Toast.TOP,
);

Toast.show('This is a styled toast on iOS.', Toast.LONG, {
  backgroundColor: 'blue',
});

License

MIT

---

Made with create-react-native-library