Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

toastify-react-native

Package Overview
Dependencies
Maintainers
0
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

toastify-react-native

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

  • 5.0.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.4M
increased by22.11%
Maintainers
0
Weekly downloads
 
Created
Source

toastify-react-native

npm version

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

Demo

View examples on snack.expo.io

https://user-images.githubusercontent.com/46484008/190667640-02a77a0c-8aed-4dc9-a1d3-abf9cb5b3c0a.mp4

Features

  • Smooth enter/exit animations
  • Plain simple and flexible APIs
  • Resize itself correctly on device rotation
  • Swipeable
  • Easy to set up for real, you can make it work in less than 10sec!
  • Super easy to customize
  • RTL support
  • Swipe to close 👌
  • Can choose swipe direction
  • Super easy to use an animation of your choice. Works well with animate.css for example
  • Define behavior per toast
  • Pause toast by click on the toast 👁
  • Fancy progress bar to display the remaining time
  • Possibility to update a toast
  • You can control the progress bar a la nprogress 😲
  • You can display multiple toast at the same time
  • Dark and light mode 🌒
  • And much more !

Installation

$ npm install toastify-react-native

A complete example

App.js

import React from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import ToastManager, { Toast } from "toastify-react-native";

import Another from "./Another";

const App = () => {
  const showToasts = () => {
    Toast.success("Promised is resolved");
  };

  return (
    <View style={styles.container}>
      <ToastManager />
      <Another />
      <TouchableOpacity
        onPress={showToasts}
        style={{
          backgroundColor: "white",
          borderColor: "green",
          borderWidth: 1,
          padding: 10,
        }}
      >
        <Text>SHOW SOME AWESOMENESS!</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

Another.js

import React from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import { Toast } from "toastify-react-native";
const Another = () => (
  <View style={styles.container}>
    <TouchableOpacity onPress={() => Toast.info("Lorem ipsum info", "bottom")} style={styles.buttonStyle}>
      <Text>SHOW SOME AWESOMENESS!</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonStyle: {
    marginTop: 10,
    backgroundColor: "white",
    borderColor: "green",
    borderWidth: 2,
    padding: 10,
  },
});

export default Another;

For a more complex example take a look at the /example directory.

Available props

NameTypeDefaultDescription
widthnumber or 'auto'256Width of toast
heightnumber or 'auto'68Height of the toast
styleanynullStyle applied to the toast
textStyleanynullStyle applied to the toast content
positiontop, center or bottomtopPosition of toast
positionValuenumber50position value of toast
durationnumber3000The display time of toast.
animationStyleupInUpOut, rightInOut or zoomInOutupInUpOutThe animation style of toast
animationInstring or object'slideInRight'Toast show animation
animationOutstring or object'slideOutLeft'Toast hide animation
animationInTimingnumber300Timing for the Toast show animation (in ms)
animationOutTimingnumber300Timing for the toast hide animation (in ms)
backdropTransitionInTimingnumber300The backdrop show timing (in ms)
backdropTransitionOutTimingnumber300The backdrop hide timing (in ms)
hasBackdropboolfalseRender the backdrop
backdropColorstring'black'The backdrop background color
backdropOpacitynumber0.2The backdrop opacity when the toast is visible
showCloseIconbooleantrueShows the close icon in the right corner
showProgressBarbooleantrueShows the progress bar in the toast

Available animations

Take a look at react-native-animatable to see the dozens of animations available out-of-the-box.

Acknowledgements

Pull requests, feedbacks and suggestions are welcome!

License

toastify-react-native is MIT licensed .

Keywords

FAQs

Package last updated on 24 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc