Skip to main content

Notification

Notification provides a toast notification system for displaying temporary messages.

Features​

  • 🎨 Multiple types (success, error, warning, info)
  • ⏱️ Auto-dismiss
  • 🎯 Custom content
  • πŸ“ Position control
  • πŸ”§ Customizable styling

Basic Usage​

import { Notification } from '@tansuk/rott-ui';

// Success notification
Notification.success('Changes saved successfully');

// Error notification
Notification.error('Something went wrong');

// Warning notification
Notification.warning('Please verify your email');

// Info notification
Notification.info('New update available');

Custom Notification​

Notification.custom({
  title: 'Custom Title',
  message: 'Custom message content',
  icon: { name: 'STAR', variant: 'warning' },
  duration: 5000,
});

Props​

The Notification component uses react-native-toast-notifications under the hood.

Static Methods​

MethodParametersDescription
success(message: string)Show success toast
error(message: string)Show error toast
warning(message: string)Show warning toast
info(message: string)Show info toast
custom(options)Show custom toast

Examples​

After Form Submit​

const handleSubmit = async (values) => {
  try {
    await submitForm(values);
    Notification.success('Form submitted successfully');
    navigation.goBack();
  } catch (error) {
    Notification.error('Failed to submit form');
  }
};

After Delete​

const handleDelete = async (id) => {
  try {
    await deleteItem(id);
    Notification.success('Item deleted');
  } catch (error) {
    Notification.error('Failed to delete item');
  }
};

Network Status​

import NetInfo from '@react-native-community/netinfo';

NetInfo.addEventListener(state => {
  if (!state.isConnected) {
    Notification.warning('No internet connection');
  } else {
    Notification.success('Connected to internet');
  }
});

Custom with Icon​

Notification.custom({
  title: 'New Message',
  message: 'You have a new message from John',
  icon: { name: 'MAIL', variant: 'primary' },
  duration: 4000,
});