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
✅ supports both old and new architecture (RN >= 0.71 is required for new arch)
✅ extremely simple fire-and-forget api, same as ToastAndroid
✅ renders on top of Modal
s and Alert
s
✅ avoids keyboard
✅ customizable styling
Screenshots
Expand for more screenshots
Install
yarn add react-native-simple-toast
cd ios && pod install
then rebuild your project
Usage
the module exposes the following functions, same as ToastAndroid
, with extra configuration parameter for iOS only:
import Toast from 'react-native-simple-toast';
Toast.show(message, duration, options);
Toast.showWithGravity(message, duration, gravity, options);
Toast.showWithGravityAndOffset(
message,
duration,
gravity,
xOffset,
yOffset,
options,
);
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 customizing on iOS, you can pass an object with the following properties:
type OptionsIOS = {
textColor?: ColorValue;
backgroundColor?: ColorValue;
tapToDismissEnabled?: boolean;
};
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',
});
Toast.show('This is a toast that can be dismissed (iOS only).', Toast.LONG, {
tapToDismissEnabled: true,
});
License
MIT
Made with create-react-native-library