React Native Toastify

A customizable toast notification component for React Native, designed to work seamlessly on both Android and iOS platforms and allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! :fire: 🎉

---

Installation

1npm install react-native-toastify-pro
2cd ios && pod install
3cd android && ./gradlew clean

or

1yarn add react-native-toastify-pro
2cd ios && pod install
3cd android && ./gradlew clean

---

Toast Component with Context Provider

This repository includes a Toast component for displaying notifications in a React Native app, along with a ToastProvider context for easy integration throughout your application.

Installation

Follow the same installation process described earlier.

---

Toast Context Integration

To use the Toast component globally, wrap your app with the ToastProvider and access it via the useToast hook.

---

1. Modify App.js

Wrap your app's main component (e.g., navigation or root-level component) with the ToastProvider:

1import React from 'react';
2import { ToastProvider } from "react-native-toastify-pro";
3
4export default function App() {
5    return (
6        <ToastProvider>
7                {/* Your other app components */}
8        </ToastProvider>
9    );
10}
11

2. Using useToast

To show toasts, use the useToast hook in any component. Here's an example:

1import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
2import React from 'react';
3import { useToast } from "react-native-toastify-pro";
4
5const ExampleModule = () => {
6    const { showToast } = useToast();
7
8    return (
9        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
10
11      <TouchableOpacity onPress={() => {
12        showToast({ message: 'success toast', type: 'success', position: 'top', duration: 3000 });
13      }} style={[styles.btnWrapper, { backgroundColor: 'green' }]}>
14        <Text style={styles.textStyle}>SUCCESS</Text>
15      </TouchableOpacity>
16
17      <TouchableOpacity onPress={() => {
18        showToast({ message: 'error toast', type: 'error', position: 'bottom', duration: 4000 });
19      }} style={[styles.btnWrapper, { backgroundColor: 'red' }]}>
20        <Text style={styles.textStyle}>ERROR</Text>
21      </TouchableOpacity>
22
23      <TouchableOpacity onPress={() => {
24        showToast({ message: 'info toast', type: 'info', position: 'top', duration: 5000 });
25      }} style={[styles.btnWrapper, { backgroundColor: 'blue' }]}>
26        <Text style={styles.textStyle}>INFO</Text>
27      </TouchableOpacity>
28
29      <TouchableOpacity onPress={() => {
30        showToast({ message: 'custom toast', type: 'info', position: 'top', duration: 5000,
31         backgroundColor: 'black', textColor: 'white',  positionOffset:100  });
32      }} style={[styles.btnWrapper, { backgroundColor: 'black' }]}>
33        <Text style={styles.textStyle}>CUSTOM</Text>
34      </TouchableOpacity>
35    </View>
36    );
37};
38
39export default ExampleModule;
40const styles = StyleSheet.create({
41  btnWrapper: {
42    width: 250,  
43    height: 50, 
44    marginTop: 20,
45    justifyContent: 'center', 
46    alignItems: 'center',
47  },
48  textStyle: { color: '#fff', fontSize: 16, fontWeight: '500' }
49});
50
51
52

---

Props

Prop	Type	Default	Description
message	string	''	The text to display in the toast.
type	string	'info'	The type of toast (e.g., info, success, error).
position	positionType	'top'	The position of the toast (top or bottom).
positionValue	number	60	Custom vertical offset for the toast.
backgroundColor	string	Depends on type or you can specify a custom background color	Background color of the toast.
textColor	string	'#fff'	Text color of the toast message.
duration	number	3000	How long the toast remains visible (in ms).
positionOffset	number	50	Offset position for top or bottom. Specifies the distance in pixels from the edge of the screen where the toast will appear.

---

Methods

Method	Description
show	Displays the toast with the specified configuration.
hide	Hides the currently visible toast.

---

TypeScript Support

This library is TypeScript friendly. Below are the available types:

ToastOptions: Configuration for toast messages. ToastContextType: Type definition for the toast context.

---

Gestures

The toast supports gestures for dismissal. Tap on the toast to dismiss.

---

Features

• Customizable: Modify toast colors, positioning, and duration.
• Interactive: Dismiss by tapping.
• Lightweight: No external dependencies for fast integration.
• Cross-Platform: Compatible with both Android and iOS.
• Context API Support: Use ToastProvider for global toast management.

---

Contributing

Contributions are always welcome! If you’d like to contribute, feel free to fork the repository and submit a pull request with your improvements.

For bug reports, feature requests, or any issues, please open an issue on the GitHub repository or contact me directly at ashifalmohammed@gmail.com.

Thank you for your interest in contributing!

Author

almdashif

License

MIT Licensed react-native-toastify-pro is under BSD license. © Mohammed Ashif 2024 - present