🚀 React Native Toastify Expo – Beautiful Toast Notifications for React Native & Expo

react-native-toastify-expo is a lightweight, customizable toast notification library built specifically for React Native apps using Expo. With cross-platform support, smooth animations, and full styling control, it's the easiest way to show success, error, or info toasts in your React Native project.

📦 Now available on npm

---

📱 Demo

iOS

Android

---

✨ Features

• 🎨 Highly Customizable – Control colors, icons, positions, durations, and styles
• 📱 Expo & React Native Support – Works seamlessly on both Android and iOS
• 🚀 Lightweight – No external dependencies
• ⚡ Smooth Animations – Clean UI transitions with animation support
• 🛠️ TypeScript Support – Full type definitions included
• 🎯 Flexible Placement – Position toasts on top or bottom
• 🔧 Custom Toast Types – Define your own toast variants

---

📦 Installation

1npm install react-native-toastify-expo
2# or
3yarn add react-native-toastify-expo

Quick Start

1. Wrap your app with the ToastProvider:

1import React from 'react';
2import { ToastProvider } from 'react-native-toastify-expo';
3
4export default function App() {
5  return (
6    <ToastProvider>
7      <YourApp />
8    </ToastProvider>
9  );
10}

2. Use the useToast hook in your components:

1import React from 'react';
2import { View, Button } from 'react-native';
3import { useToast } from 'react-native-toastify-expo';
4
5export const MyComponent = () => {
6  const { showToast } = useToast();
7
8  return (
9    <View>
10      <Button 
11        title="Show Success Toast"
12        onPress={() => showToast({
13          message: 'Operation completed successfully!',
14          type: 'success',
15          duration: 3000,
16          position: 'bottom'
17        })}
18      />
19      <Button 
20        title="Show Error Toast"
21        onPress={() => showToast({
22          message: 'Something went wrong!',
23          type: 'error',
24          duration: 5000,
25          position: 'top'
26        })}
27      />
28    </View>
29  );
30};

Props

Required Props

Prop	Type	Description
message	string	The message to display in the toast
type	ToastType	Toast type: 'success', 'error', 'warning', 'info', or custom string
duration	number	Duration in milliseconds before auto-dismiss
position	'top' | 'bottom'	Position of the toast on screen

Style Props

Prop	Type	Description
textStyle	object	Custom styles for the message text
containerStyle	object	Custom styles for the toast container

Custom Toast Types

Prop	Type	Description
customToastTypes	Record<string, ToastTypeConfig>	Custom toast type configurations

ToastTypeConfig Interface

1interface ToastTypeConfig {
2  backgroundColor: string;  // Background color of the toast
3  indicator: string;        // Icon/emoji to display
4  iconColor: string;        // Color of the indicator
5  textColor?: string;       // Color of the text (optional, defaults to iconColor)
6}

Examples

Basic Usage

1import { useToast } from 'react-native-toastify-expo';
2
3const MyComponent = () => {
4  const { showToast } = useToast();
5
6  const handleSuccess = () => {
7    showToast({
8      message: 'Data saved successfully!',
9      type: 'success',
10      duration: 3000,
11      position: 'bottom'
12    });
13  };
14
15  const handleError = () => {
16    showToast({
17      message: 'Failed to save data!',
18      type: 'error',
19      duration: 5000,
20      position: 'top'
21    });
22  };
23
24  const handleWarning = () => {
25    showToast({
26      message: 'Please check your input!',
27      type: 'warning',
28      duration: 4000,
29      position: 'bottom'
30    });
31  };
32
33  const handleInfo = () => {
34    showToast({
35      message: 'New update available!',
36      type: 'info',
37      duration: 3000,
38      position: 'bottom'
39    });
40  };
41
42  return (
43    <View>
44      <Button title="Success" onPress={handleSuccess} />
45      <Button title="Error" onPress={handleError} />
46      <Button title="Warning" onPress={handleWarning} />
47      <Button title="Info" onPress={handleInfo} />
48    </View>
49  );
50};

Advanced Configuration

1const { showToast } = useToast();
2
3// Custom duration and position
4showToast({
5  message: 'This toast will appear at the top for 5 seconds',
6  type: 'info',
7  duration: 5000,
8  position: 'top'
9});

Custom Styling with textStyle and containerStyle

You can fully customize the appearance of your toasts using the textStyle and containerStyle props:

1const { showToast } = useToast();
2
3// Custom styled toast with large text and rounded corners
4showToast({
5  message: 'Custom styled toast with large text and rounded corners!',
6  type: 'info',
7  duration: 4000,
8  position: 'top',
9  textStyle: {
10    fontSize: 18,
11    fontWeight: 'bold',
12    textAlign: 'center',
13    color: '#ffffff'
14  },
15  containerStyle: {
16    borderRadius: 20,
17    backgroundColor: '#9c27b0',
18    padding: 20,
19    marginHorizontal: 10
20  }
21});
22
23// Toast with custom background and text styling
24showToast({
25  message: 'Toast with custom background and text styling!',
26  type: 'success',
27  duration: 5000,
28  position: 'bottom',
29  textStyle: {
30    fontSize: 16,
31    fontStyle: 'italic',
32    textDecorationLine: 'underline',
33    color: '#fff'
34  },
35  containerStyle: {
36    backgroundColor: '#ff5722',
37    borderRadius: 12,
38    borderWidth: 2,
39    borderColor: '#fff',
40    shadowColor: '#000',
41    shadowOffset: { width: 0, height: 4 },
42    shadowOpacity: 0.3,
43    shadowRadius: 6,
44    elevation: 8
45  }
46});
47
48// Minimal design toast
49showToast({
50  message: 'Minimal design toast',
51  type: 'warning',
52  duration: 3000,
53  position: 'top',
54  textStyle: {
55    fontSize: 14,
56    color: '#333'
57  },
58  containerStyle: {
59    backgroundColor: '#fff',
60    borderRadius: 4,
61    padding: 12,
62    borderLeftWidth: 4,
63    borderLeftColor: '#ff9800'
64  }
65});

Styling

The toast component uses React Native's StyleSheet for styling. You can customize the appearance by passing textStyle and containerStyle props.

Default Styles

• Background Colors:
  • Success: #4caf50
  • Error: #f44336
  • Warning: #ff9800
  • Info: #2196f3
• Text Color: White
• Border Radius: 8px
• Padding: 15px
• Shadow: Subtle elevation/shadow for depth

Custom Styling

You can override any default style by using the textStyle and containerStyle props:

• textStyle: Overrides the message text styling (fontSize, color, fontWeight, etc.)
• containerStyle: Overrides the toast container styling (backgroundColor, borderRadius, padding, etc.)

The custom styles are merged with the default styles, so you only need to specify the properties you want to change.

Requirements

• React Native >= 0.60.0
• React >= 16.8.0

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please open an issue on GitHub.