expo-react-native-toastify

expo-react-native-toastify allows you to add notifications to your expo react-native app (ios, android, web) with ease.

The earlier package was not working on expo web due module transpiling issue for expo web and various babel files which were present in the package.

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 expo-react-native-toastify

A complete example

App.js

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

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";
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

| Name | Type | Default | Description | | --------------------------- | ---------------------------------- | -------------- | ---------------------------------------------- | | width | number | 256 | Width of toast | | height | number | 68 | Height of the toast | | style | any | null | Style applied to the toast | | position | top, center or bottom | top | Position of toast | | positionValue | number | 50 | position value of toast | | duration | number | 3000 | The display time of toast. | | animationStyle | upInUpOut, rightInOut or zoomInOut | upInUpOut | The animation style of toast | | animationIn | string or object | 'slideInRight' | Toast show animation | | animationOut | string or object | 'slideOutLeft' | Toast hide animation | | animationInTiming | number | 300 | Timing for the Toast show animation (in ms) | | animationOutTiming | number | 300 | Timing for the toast hide animation (in ms) | | backdropTransitionInTiming | number | 300 | The backdrop show timing (in ms) | | backdropTransitionOutTiming | number | 300 | The backdrop hide timing (in ms) | | hasBackdrop | bool | false | Render the backdrop | | backdropColor | string | 'black' | The backdrop background color | | backdropOpacity | number | 0.2 | The backdrop opacity when the toast is visible |

|

Available animations

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

Credits

This package is inspired by (toastify-react-native)[https://www.npmjs.com/package/toastify-react-native].

License

expo-react-native-toastify is [MIT licensed], modded by geeek, and originally built by :heart: by Zahid Ali.