react-native-toast

Demo

Animated toast message component for React Native.

Features

• 🚀 Imperative API
• 🎨 Customizable layouts
• 🔧 Flexible config
• 📅 Promise Handling
• 📍 Position Control

Installation

npm install rn-toastify

Usage

To integrate the toast notifications into your application, follow these steps:

• Import and Setup

Start by importing the necessary components and hooks from the library:

import useToast from 'rn-toastify';
import ToastContainer from 'rn-toastify';

const AppContent = () => {
  // Toast functions here

  return (
    <View style={styles.container}>
      {/* Buttons to trigger toasts */}
      <ToastContainer />
    </View>
  );
};

export default AppContent;

• Implementing Toasts

The useToast hook provides access to different types of toasts. Below are examples of how to implement each toast type:

• Success Toast

import useToast from 'rn-toastify';

const { success } = useToast();

const handleSuccessToast = () => {
  success('Operation was successful!', { duration: 1500, position: 'top' });
};

• Error Toast

import useToast from 'rn-toastify';

const { error } = useToast();

const handleErrorToast = () => {
  error('Something went wrong!', { duration: 1500, position: 'top' });
};

• Promise Toast

import useToast from 'rn-toastify';

const { promise } = useToast();

const handlePromiseToast = () => {
  const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      // reject();
    }, 1500);
  });

  promise(myPromise, {
    loading: 'Loading...',
    success: 'Promise resolved!',
    error: 'Promise rejected!',
  });
};

• Custom Toast

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import useToast from 'rn-toastify';

const { custom } = useToast();

const handleCustomToast = () => {
  custom(
    <View style={styles.customContent}>
      <Image
        style={styles.image}
        source={{
          uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80',
        }}
      />
      <View style={styles.textContainer}>
        <Text style={styles.customText}>Emilia Gates</Text>
        <Text style={styles.customSubText}>Sure! 8:30pm works great!</Text>
      </View>
    </View>,
    { duration: 1500, position: 'top' }
  );
};

const styles = StyleSheet.create({
  customContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  image: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  textContainer: {
    marginLeft: 10,
  },
  customText: {
    fontWeight: 'bold',
  },
  customSubText: {
    color: 'gray',
  },
});

• Emoji Toast

import useToast from 'rn-toastify';

const { emoji } = useToast();

const handleEmojiToast = () => {
  emoji('Great job!', '👍', { duration: 1500, position: 'top' });
};

• Full Example

Here's a complete example to demonstrate how all the toast types can be implemented within a single component:

import React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import useToast from 'rn-toastify';
import ToastContainer from 'rn-toastify';

const AppContent = () => {
  const { success, error, promise, custom, emoji } = useToast();

  return (
    <View style={styles.container}>
      <Button title="Show Success Toast" onPress={() => success('Operation was successful!', { duration: 1500, position: 'top' })} />
      <Button title="Show Error Toast" onPress={() => error('Something went wrong!', { duration: 1500, position: 'top' })} />
      <Button title="Show Promise Toast" onPress={() => {
        const myPromise = new Promise((resolve) => setTimeout(resolve, 1500));
        promise(myPromise, { loading: 'Loading...', success: 'Promise resolved!', error: 'Promise rejected!' });
      }} />
      <Button title="Show Custom Toast" onPress={() => custom(
        <View style={styles.customContent}>
          <Text>Custom Toast Content</Text>
        </View>, 
        { duration: 1500, position: 'top' }
      )} />
      <Button title="Show Emoji Toast" onPress={() => emoji('Great job!', '👍', { duration: 1500, position: 'top' })} />
      <ToastContainer />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customContent: {
    padding: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
  },
});

export default AppContent;

This example integrates multiple toast types and demonstrates how to trigger each one. It also includes the necessary ToastContainer to display the toasts.

API Reference

useToast Hook Methods

All toast methods accept the following parameters:

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | message | string | Required. The message to display in the toast. | | options | object | Optional. Configuration options for the toast (e.g., duration, position). |

• Methods

• success : Displays a success toast.

• error : Displays an error toast.

• promise : Handles a promise and displays loading, success, and error toasts based on the promise's state.

Additional options for promise method: | Option | Type | Description | | :-------- | :------- | :------------------------- | | loading | string | The message to display in the toast. | | success | string | Message to display if the promise resolves. | | error | string | Message to display if the promise is rejected. |

• custom

Displays a custom toast with your own content.

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | content | element | Required. React element to render in the toast. |

• emoji

Displays a custom toast with your own content.

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | emoji | string | Required. The emoji to display alongside the message. |

• options

All toast methods accept an options object for configuration:

| Option | Type | Description | | :-------- | :------- | :------------------------- | | duration | number |Optional. Duration in milliseconds for which the toast is visible. | | position | string | Optional. Position of the toast on the screen (top, bottom, center). |

License

MIT