react-native-toastify

create custom toast

Installation

1npm i @adityakmr7/react-native-toastify

Usage

1import { ToastProvider } from 'react-native-toastify';
2
3export default function App() {
4    return (
5        <ToastProvider ToastComponent={CustomToastComponent} theme={customTheme}>
6            // Your App Component
7        </ToastProvider>
8    );
9}
10

Usage inside view component

1
2
3import { useToastify } from 'react-native-toastify';
4
5const ToastComponent = () => {
6    const { Toast } = useToastify();
7
8    const handleToast = () => {
9        Toast.showToast({ message: 'Hello world', duration: 3000, type: "default" });
10    };
11
12    return (
13        <View>
14            <TouchableOpacity onPress={handleToast}>
15                <View>
16                    <Text>Click me to Show toast</Text>
17                </View>
18            </TouchableOpacity>
19        </View>
20    );
21};
22
23export default ToastComponent;
24

Usage outside view component

1const handleShowToast = () => {
2    Toast.showToast({ message: 'Hello world', duration: 3000, type: "default" });
3}

Configuration Props

ToastComponent : React.Element

Toast Component custom style support.

theme?: ToastThemeProps

Pass your toast theme configuration. Default Theme Configuration is below.

Example:

export const theme: any = {
  error: {
    primary: '#000000',
    secondary: '#fff',
  },
  success: {
    primary: '#2e7d32',
    secondary: '#fff',
  },
  warning: {
    primary: '#ff9800',
    secondary: '#fff',
  },
  default: {
    primary: '#000000',
    secondary: '#fff',
  },
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library