Customizable toast notifications for React Native using Expo
npm install react-native-toastify-exporeact-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
---
---
- 🎨 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
---
``bash`
npm install react-native-toastify-expoor
yarn add react-native-toastify-expo
1. Wrap your app with the ToastProvider:
`jsx
import React from 'react';
import { ToastProvider } from 'react-native-toastify-expo';
export default function App() {
return (
);
}
`
2. Use the useToast hook in your components:
`jsx
import React from 'react';
import { View, Button } from 'react-native';
import { useToast } from 'react-native-toastify-expo';
export const MyComponent = () => {
const { showToast } = useToast();
return (
title="Show Success Toast"
onPress={() => showToast({
message: 'Operation completed successfully!',
type: 'success',
duration: 3000,
position: 'bottom'
})}
/>
title="Show Error Toast"
onPress={() => showToast({
message: 'Something went wrong!',
type: 'error',
duration: 5000,
position: 'top'
})}
/>
);
};
`
| 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 |
| Prop | Type | Description |
|------|------|-------------|
| textStyle | object | Custom styles for the message text |containerStyle
| | object | Custom styles for the toast container |
| Prop | Type | Description |
|------|------|-------------|
| customToastTypes | Record | Custom toast type configurations |
`tsx`
interface ToastTypeConfig {
backgroundColor: string; // Background color of the toast
indicator: string; // Icon/emoji to display
iconColor: string; // Color of the indicator
textColor?: string; // Color of the text (optional, defaults to iconColor)
}
`jsx
import { useToast } from 'react-native-toastify-expo';
const MyComponent = () => {
const { showToast } = useToast();
const handleSuccess = () => {
showToast({
message: 'Data saved successfully!',
type: 'success',
duration: 3000,
position: 'bottom'
});
};
const handleError = () => {
showToast({
message: 'Failed to save data!',
type: 'error',
duration: 5000,
position: 'top'
});
};
const handleWarning = () => {
showToast({
message: 'Please check your input!',
type: 'warning',
duration: 4000,
position: 'bottom'
});
};
const handleInfo = () => {
showToast({
message: 'New update available!',
type: 'info',
duration: 3000,
position: 'bottom'
});
};
return (
);
};
`
`jsx
const { showToast } = useToast();
// Custom duration and position
showToast({
message: 'This toast will appear at the top for 5 seconds',
type: 'info',
duration: 5000,
position: 'top'
});
`
You can fully customize the appearance of your toasts using the textStyle and containerStyle props:
`jsx
const { showToast } = useToast();
// Custom styled toast with large text and rounded corners
showToast({
message: 'Custom styled toast with large text and rounded corners!',
type: 'info',
duration: 4000,
position: 'top',
textStyle: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#ffffff'
},
containerStyle: {
borderRadius: 20,
backgroundColor: '#9c27b0',
padding: 20,
marginHorizontal: 10
}
});
// Toast with custom background and text styling
showToast({
message: 'Toast with custom background and text styling!',
type: 'success',
duration: 5000,
position: 'bottom',
textStyle: {
fontSize: 16,
fontStyle: 'italic',
textDecorationLine: 'underline',
color: '#fff'
},
containerStyle: {
backgroundColor: '#ff5722',
borderRadius: 12,
borderWidth: 2,
borderColor: '#fff',
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 6,
elevation: 8
}
});
// Minimal design toast
showToast({
message: 'Minimal design toast',
type: 'warning',
duration: 3000,
position: 'top',
textStyle: {
fontSize: 14,
color: '#333'
},
containerStyle: {
backgroundColor: '#fff',
borderRadius: 4,
padding: 12,
borderLeftWidth: 4,
borderLeftColor: '#ff9800'
}
});
`
The toast component uses React Native's StyleSheet for styling. You can customize the appearance by passing textStyle and containerStyle props.
- Background Colors:
- Success: #4caf50
- Error:
- Warning:
- Info:
- Text Color: White
- Border Radius: 8px
- Padding: 15px
- Shadow: Subtle elevation/shadow for depth
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.
- React Native >= 0.60.0
- React >= 16.8.0
MIT
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature'
3. Commit your changes ()git push origin feature/amazing-feature`)
4. Push to the branch (
5. Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions, please open an issue on GitHub.