### Start Example App Packager
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Starts the Metro server for the example application. This allows for hot-reloading of JavaScript changes in the example app without a rebuild.
```sh
yarn example start
```
--------------------------------
### Run Example App on Web
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Builds and runs the example application in a web browser. This allows for testing on a web platform.
```sh
yarn example web
```
--------------------------------
### Bootstrap Project Dependencies
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Installs all project dependencies and initializes native dependencies (e.g., pods for iOS). This is a comprehensive setup script.
```sh
yarn bootstrap
```
--------------------------------
### Install react-native-alert-notification and Dependencies
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Instructions to install the react-native-alert-notification library and its dependencies, react-native-safe-area-context. Includes commands for both native and Expo projects.
```bash
# Install the library
yarn add react-native-alert-notification
# For Native projects - install dependencies
yarn add react-native-safe-area-context
cd ios && pod install
# For Expo projects - install dependencies
expo install react-native-safe-area-context
```
--------------------------------
### Run Example App on Android
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Builds and runs the example application on an Android device or emulator. Requires a properly configured Android development environment.
```sh
yarn example android
```
--------------------------------
### Run Example App on iOS
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Builds and runs the example application on an iOS device or simulator. Requires a properly configured iOS development environment (Xcode).
```sh
yarn example ios
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Installs all the necessary dependencies for the project using Yarn. It's recommended to use Yarn over npm for development as the tooling is built around it.
```sh
yarn
```
--------------------------------
### Install Dependencies for Expo Projects
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Installs the react-native-safe-area-context dependency specifically for Expo managed projects.
```sh
expo install react-native-safe-area-context
```
--------------------------------
### Install Dependencies for Native Projects
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Installs necessary dependencies for native React Native projects, including react-native-safe-area-context and its native pods.
```sh
yarn add react-native-safe-area-context
pod install
```
--------------------------------
### Install react-native-alert-notification
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Installs the react-native-alert-notification package using Yarn. This is the primary dependency for using the library's features.
```sh
yarn add react-native-alert-notification
```
--------------------------------
### React Native Alert Notification Integration Example
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
This React Native component demonstrates the usage of the react-native-alert-notification library to display various types of notifications. It includes handling form submissions with loading states, API call success and error feedback, and user confirmation dialogs for destructive actions. The example utilizes `Dialog` and `Toast` components with different `ALERT_TYPE` configurations.
```tsx
import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import {
AlertNotificationRoot,
Dialog,
Toast,
ALERT_TYPE
} from 'react-native-alert-notification';
const App = () => {
const [loading, setLoading] = useState(false);
const handleSaveData = async () => {
// Show loading dialog
Dialog.show({
type: ALERT_TYPE.INFO,
title: 'Saving',
textBody: 'Please wait while we save your data...',
closeOnOverlayTap: false
});
setLoading(true);
try {
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 2000));
Dialog.hide(); // Close loading dialog
// Show success toast
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Success',
textBody: 'Your data has been saved successfully',
autoClose: 3000
});
} catch (error) {
Dialog.hide(); // Close loading dialog
// Show error dialog
Dialog.show({
type: ALERT_TYPE.DANGER,
title: 'Error',
textBody: 'Failed to save data. Please try again.',
button: 'Retry',
onPressButton: () => {
Dialog.hide();
handleSaveData();
}
});
} finally {
setLoading(false);
}
};
const handleDeleteAccount = () => {
Dialog.show({
type: ALERT_TYPE.WARNING,
title: 'Confirm Deletion',
textBody: 'This action cannot be undone. Are you sure?',
button: 'Delete',
closeOnOverlayTap: true,
onPressButton: () => {
Dialog.hide();
Toast.show({
type: ALERT_TYPE.INFO,
title: 'Deleted',
textBody: 'Your account has been deleted',
autoClose: 5000
});
}
});
};
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
gap: 20
}
});
export default App;
```
--------------------------------
### Display Modal Dialog Boxes using Dialog.show()
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Examples of how to display different types of modal dialog boxes using the Dialog.show() method. Covers basic success, danger, and warning dialogs, including options for custom buttons, actions, auto-close timers, and callbacks.
```tsx
import { Dialog, ALERT_TYPE } from 'react-native-alert-notification';
// Basic success dialog
Dialog.show({
type: ALERT_TYPE.SUCCESS,
title: 'Success',
textBody: 'Your profile has been updated successfully!',
button: 'OK'
});
// Danger dialog with custom button action
Dialog.show({
type: ALERT_TYPE.DANGER,
title: 'Delete Account',
textBody: 'Are you sure you want to delete your account? This action cannot be undone.',
button: 'Confirm',
onPressButton: () => {
// Handle account deletion
console.log('Account deleted');
Dialog.hide();
}
});
// Warning dialog with auto-close and callbacks
Dialog.show({
type: ALERT_TYPE.WARNING,
title: 'Session Expiring',
textBody: 'Your session will expire in 5 seconds',
button: 'Extend Session',
autoClose: 5000, // Auto-close after 5 seconds
closeOnOverlayTap: false, // Prevent closing by tapping overlay
onShow: () => console.log('Dialog appeared'),
onHide: () => console.log('Dialog dismissed'),
onPressButton: () => {
// Extend session logic
Dialog.hide();
}
});
// Dialog without button (can only close by tapping overlay)
Dialog.show({
type: ALERT_TYPE.INFO,
title: 'Information',
textBody: 'Tap outside to close this message',
closeOnOverlayTap: true
});
```
--------------------------------
### Root Component Setup for Alert Notifications
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Demonstrates how to set up the AlertNotificationRoot component in a React Native application. This component manages notification state and rendering, allowing notifications to be triggered from anywhere. It shows basic configuration for theme and dialog/toast settings.
```tsx
import React from 'react';
import { View, Button } from 'react-native';
import { AlertNotificationRoot, Dialog, Toast, ALERT_TYPE } from 'react-native-alert-notification';
const App = () => {
return (
);
};
export default App;
```
--------------------------------
### Display Toast Notifications with Toast.show()
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Demonstrates various ways to display toast notifications using the Toast.show() method. It covers different alert types (SUCCESS, DANGER, WARNING, INFO), custom auto-close durations, styling options, and the use of onPress, onShow, and onHide callbacks for interactive toasts. Ensure 'react-native-alert-notification' is installed and imported.
```tsx
import { Toast, ALERT_TYPE } from 'react-native-alert-notification';
// Basic success toast
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Saved',
textBody: 'Your changes have been saved successfully'
});
// Danger toast with custom auto-close duration
Toast.show({
type: ALERT_TYPE.DANGER,
title: 'Error',
textBody: 'Failed to upload file. Please try again.',
autoClose: 10000 // Show for 10 seconds
});
// Warning toast with custom styling
Toast.show({
type: ALERT_TYPE.WARNING,
title: 'Low Battery',
textBody: 'Your device battery is below 20%',
titleStyle: { fontSize: 18, fontWeight: 'bold' },
textBodyStyle: { fontSize: 14, color: '#666' },
autoClose: 7000
});
// Interactive toast with onPress callback
Toast.show({
type: ALERT_TYPE.INFO,
title: 'New Message',
textBody: 'You have 3 unread messages. Tap to view.',
onPress: () => {
Toast.hide(); // Close current toast
// Navigate to messages screen
console.log('Navigating to messages...');
}
});
// Toast that doesn't auto-close
Toast.show({
type: ALERT_TYPE.DANGER,
title: 'Network Error',
textBody: 'Connection lost. Reconnecting...',
autoClose: false, // Must be closed manually
onPress: () => {
Toast.hide();
}
});
// Toast with show/hide callbacks
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Upload Complete',
textBody: 'Your file has been uploaded',
autoClose: 3000,
onShow: () => console.log('Toast appeared'),
onHide: () => {
console.log('Toast dismissed');
// Perform cleanup or next action
}
});
```
--------------------------------
### Programmatically Close Dialogs using Dialog.hide()
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Illustrates how to programmatically close an active dialog box using the Dialog.hide() method. This example shows a scenario where a loading dialog is displayed, and then hidden after a simulated asynchronous operation to show a success message.
```tsx
import { Dialog, ALERT_TYPE } from 'react-native-alert-notification';
// Show dialog with programmatic close
const showLoadingDialog = () => {
Dialog.show({
type: ALERT_TYPE.INFO,
title: 'Loading',
textBody: 'Please wait while we process your request...',
closeOnOverlayTap: false
});
// Simulate API call
setTimeout(() => {
Dialog.hide(); // Close the dialog programmatically
// Show success dialog
Dialog.show({
type: ALERT_TYPE.SUCCESS,
title: 'Complete',
textBody: 'Request processed successfully',
button: 'OK'
});
}, 3000);
};
```
--------------------------------
### React Native Alert Notification Usage
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Demonstrates how to integrate and use the AlertNotificationRoot component along with Dialog and Toast for displaying alerts and notifications in a React Native application. It shows basic examples of triggering success dialogs and toasts.
```tsx
import { ALERT_TYPE, Dialog, AlertNotificationRoot, Toast } from 'react-native-alert-notification';
// dialog box
;
```
--------------------------------
### Closing Popups (Dialog and Toast)
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Provides code examples for programmatically closing both the Dialog Box and Toast Notification components. These methods are used to dismiss the components manually when needed.
```typescript
// For Dialog Box
Dialog.hide();
// For Toast Notification
Toast.hide();
```
--------------------------------
### Utilize ALERT_TYPE Enum for Notifications
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Explains the ALERT_TYPE enum provided by 'react-native-alert-notification' for categorizing notifications. It lists the available types (SUCCESS, DANGER, WARNING, INFO) and provides an example of how to use these types when displaying dialogs based on conditional logic, like form submission results. Requires 'react-native-alert-notification' to be imported.
```tsx
import { ALERT_TYPE } from 'react-native-alert-notification';
// Available alert types
const types = {
success: ALERT_TYPE.SUCCESS, // Green - for successful operations
danger: ALERT_TYPE.DANGER, // Red - for errors and critical actions
warning: ALERT_TYPE.WARNING, // Orange - for warnings and cautions
info: ALERT_TYPE.INFO // Blue - for informational messages
};
// Usage in components
const handleFormSubmit = (success: boolean) => {
if (success) {
Dialog.show({
type: ALERT_TYPE.SUCCESS,
title: 'Form Submitted',
textBody: 'Thank you for your submission',
button: 'OK'
});
} else {
Dialog.show({
type: ALERT_TYPE.DANGER,
title: 'Submission Failed',
textBody: 'Please check your inputs and try again',
button: 'Retry'
});
}
};
```
--------------------------------
### Run Unit Tests with Jest
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Executes the unit tests for the project using Jest. It's recommended to add tests for any new changes to ensure code stability.
```sh
yarn test
```
--------------------------------
### Publish New Versions with Release-it
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Uses the release-it tool to automate the process of publishing new versions of the package. This includes bumping the version number, creating tags, and generating releases.
```sh
yarn release
```
--------------------------------
### Lint Code with ESLint
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Runs ESLint to check the code for style and potential errors. This helps maintain code consistency across the project.
```sh
yarn lint
```
--------------------------------
### Configure Custom Theme Colors
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Shows how to customize the appearance of toast notifications by providing custom color palettes to the AlertNotificationRoot component. This allows for theming the application's alerts to match design requirements. Supports defining colors for both light and dark themes. Requires 'react-native-alert-notification' and 'react' to be imported.
```tsx
import React from 'react';
import { AlertNotificationRoot } from 'react-native-alert-notification';
const App = () => {
const customColors = [
// Light theme colors
{
label: '#000000',
card: '#FFFFFF',
overlay: '#00000070',
success: '#00C853',
danger: '#FF1744',
warning: '#FFC400',
info: '#2196F3'
},
// Dark theme colors
{
label: '#FFFFFF',
card: '#1E1E1E',
overlay: '#00000090',
success: '#69F0AE',
danger: '#FF5252',
warning: '#FFD740',
info: '#40C4FF'
}
];
return (
{/* Your app content */}
);
};
```
--------------------------------
### Fix Formatting Errors with ESLint
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Runs ESLint with the --fix flag to automatically correct code formatting issues. This ensures adherence to the project's linting rules.
```sh
yarn lint --fix
```
--------------------------------
### Verify Code with TypeScript
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/CONTRIBUTING.md
Runs the TypeScript compiler to perform type checking on the project's codebase. Ensures type safety and catches potential errors.
```sh
yarn typescript
```
--------------------------------
### Toast.show() - Display Toast Notification
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Displays a toast notification with various types (SUCCESS, DANGER, WARNING, INFO) and customizable options like title, text body, auto-close duration, styling, and onPress callbacks.
```APIDOC
## Toast.show()
### Description
Displays a toast notification to the user.
### Method
`Toast.show(options)`
### Parameters
- **options** (object) - Required - Configuration object for the toast.
- **type** (string) - Required - The type of alert (e.g., `ALERT_TYPE.SUCCESS`, `ALERT_TYPE.DANGER`, `ALERT_TYPE.WARNING`, `ALERT_TYPE.INFO`).
- **title** (string) - Required - The main title of the toast.
- **textBody** (string) - Optional - The body text of the toast.
- **autoClose** (number | boolean) - Optional - Duration in milliseconds before the toast auto-closes, or `false` to keep it open until manually closed.
- **titleStyle** (object) - Optional - Custom styles for the title text.
- **textBodyStyle** (object) - Optional - Custom styles for the body text.
- **onPress** (function) - Optional - Callback function executed when the toast is pressed.
- **onShow** (function) - Optional - Callback function executed when the toast is displayed.
- **onHide** (function) - Optional - Callback function executed when the toast is dismissed.
### Request Example
```tsx
import { Toast, ALERT_TYPE } from 'react-native-alert-notification';
// Basic success toast
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Saved',
textBody: 'Your changes have been saved successfully'
});
// Danger toast with custom auto-close duration
Toast.show({
type: ALERT_TYPE.DANGER,
title: 'Error',
textBody: 'Failed to upload file. Please try again.',
autoClose: 10000 // Show for 10 seconds
});
```
### Response
N/A (This method performs an action, it does not return a value directly related to the action's outcome.)
### Error Handling
- If `type`, `title` are missing, the toast might not display correctly or might show default values.
- `onPress`, `onShow`, `onHide` callbacks can handle errors during their execution.
```
--------------------------------
### Custom Theme Colors
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Allows customization of the notification colors by providing an array of theme color objects to the `AlertNotificationRoot` component.
```APIDOC
## Custom Theme Colors
### Description
Customize the appearance of notifications by defining your own color palettes.
### Usage
Wrap your application or relevant part of it with `AlertNotificationRoot` and pass a `colors` prop.
### Parameters
- **colors** (array) - Required - An array of theme objects.
- Each theme object should contain:
- **label** (string) - Text color for labels.
- **card** (string) - Background color of the notification card.
- **overlay** (string) - Background color of the overlay behind the notification.
- **success** (string) - Color for success-type notifications.
- **danger** (string) - Color for danger-type notifications.
- **warning** (string) - Color for warning-type notifications.
- **info** (string) - Color for info-type notifications.
### Request Example
```tsx
import React from 'react';
import { AlertNotificationRoot } from 'react-native-alert-notification';
const App = () => {
const customColors = [
// Light theme colors
{
label: '#000000',
card: '#FFFFFF',
overlay: '#00000070',
success: '#00C853',
danger: '#FF1744',
warning: '#FFC400',
info: '#2196F3'
},
// Dark theme colors
{
label: '#FFFFFF',
card: '#1E1E1E',
overlay: '#00000090',
success: '#69F0AE',
danger: '#FF5252',
warning: '#FFD740',
info: '#40C4FF'
}
];
return (
{/* Your app content */}
);
};
```
### Response
N/A (This configuration affects the visual output of notifications.)
### Error Handling
- Invalid color formats (e.g., incorrect hex codes) might lead to default colors being used or unexpected visual results.
- If the `colors` prop is missing, default theme colors will be applied.
```
--------------------------------
### Dialog Box Component API
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
API documentation for the Dialog Box component, which allows displaying customizable dialogs with various options for title, type, text, buttons, and animations.
```APIDOC
## Dialog Box Component API
### Description
Provides a component for displaying dialog boxes with customizable content and behavior.
### Props
#### Standard Props
- **title** (String) - The title text for the dialog box.
- **type** (String) - Defines the type of the dialog box. Accepted values: "SUCCESS", "DANGER", "WARNING". This is a required field.
- **textBody** (String) - The main text content of the dialog box.
- **button** (String) - The text for the dialog button. If undefined, the button is hidden.
- **autoClose** (bool / number) - Defines the time in milliseconds after which the dialog box will automatically close. Can be a boolean or a number.
- **closeOnOverlayTap** (bool) - Allows the dialog box to be closed by tapping on the overlay. Defaults to true.
- **onPressButton** (() => void) - A callback function executed when the dialog button is pressed. If not declared and a button action is set, it defaults to closing the dialog.
- **onShow** (() => void) - A callback function executed after the open animation of the dialog box has finished.
- **onHide** (() => void) - A callback function executed after the close animation of the dialog box has finished.
### TypeScript Type Definition
```typescript
type IConfig = {
type: ALERT_TYPE;
title?: string;
textBody?: string;
button?: string;
autoClose?: number | boolean;
closeOnOverlayTap?: boolean;
onPressButton?: () => void;
onShow?: () => void;
onHide?: () => void;
};
```
### Usage Example
```javascript
// Assuming you have imported the necessary components/functions
Dialog.show({
type: 'SUCCESS',
title: 'Success',
textBody: 'Operation completed successfully!',
button: 'Ok',
onPressButton: () => {
console.log('Button pressed!');
}
});
```
### Closing the Dialog Box
```javascript
Dialog.hide();
```
```
--------------------------------
### ALERT_TYPE Enum
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
An enum providing predefined string constants for different notification types, ensuring consistency in usage.
```APIDOC
## ALERT_TYPE Enum
### Description
Provides a set of constants for different notification types, making it easier to specify the alert's intent.
### Usage
Import `ALERT_TYPE` and use its properties when calling `Toast.show()` or `Dialog.show()`.
### Available Types
- **`ALERT_TYPE.SUCCESS`**: Represents a successful operation. Typically displayed with green color.
- **`ALERT_TYPE.DANGER`**: Represents an error or critical action. Typically displayed with red color.
- **`ALERT_TYPE.WARNING`**: Represents a warning or caution. Typically displayed with orange/yellow color.
- **`ALERT_TYPE.INFO`**: Represents an informational message. Typically displayed with blue color.
### Request Example
```tsx
import { Toast, ALERT_TYPE } from 'react-native-alert-notification';
// Usage in components
const handleFormSubmit = (success: boolean) => {
if (success) {
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Form Submitted',
textBody: 'Thank you for your submission',
button: 'OK'
});
} else {
Toast.show({
type: ALERT_TYPE.DANGER,
title: 'Submission Failed',
textBody: 'Please check your inputs and try again',
button: 'Retry'
});
}
};
```
### Response
N/A (This is an enum for type definition.)
### Error Handling
Using an undefined or incorrect type constant will result in a default notification appearance or potential errors if the underlying system cannot resolve the type.
```
--------------------------------
### Dialog Box Component Configuration (TypeScript)
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Defines the configuration interface for the Dialog Box component. It specifies properties for title, type, text body, button, auto-close behavior, tap-to-close functionality, and callback events for showing and hiding.
```typescript
type IConfig = {
type: ALERT_TYPE;
title?: string;
textBody?: string;
button?: string;
autoClose?: number | boolean;
closeOnOverlayTap?: boolean;
onPressButton?: () => void;
onShow?: () => void;
onHide?: () => void;
};
```
--------------------------------
### Toast Notification Component Configuration (TypeScript)
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Defines the configuration interface for the Toast Notification component. It includes properties for type, title, text body, auto-close duration, custom styles, and callback events for press, show, and hide actions.
```typescript
type IConfig = {
type?: ALERT_TYPE;
title?: string;
textBody?: string;
autoClose?: number | boolean;
titleStyle?: StyleProp;
textBodyStyle?: StyleProp;
onPress?: () => void;
onShow?: () => void;
onHide?: () => void;
};
```
--------------------------------
### Toast Notification Component API
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
API documentation for the Toast Notification component, which enables displaying temporary, non-intrusive messages with options for title, type, text, and auto-closing behavior.
```APIDOC
## Toast Notification Component API
### Description
Provides a component for displaying toast notifications, which are temporary messages that appear and disappear automatically.
### Props
#### Standard Props
- **title** (String) - The title text for the toast notification.
- **type** (String) - Defines the type of the toast notification. Accepted values: "SUCCESS", "DANGER", "WARNING".
- **textBody** (String) - The main text content of the toast notification.
- **autoClose** (bool / number) - Defines the time in milliseconds after which the toast notification will automatically close. Defaults to 5000ms.
- **onPress** (bool) - An action to be triggered when the toast notification is pressed. The behavior might depend on the specific implementation (e.g., whether it dismisses the toast).
- **onShow** (() => void) - An event triggered after the open animation of the toast notification has finished.
- **onHide** (() => void) - An event triggered after the close animation of the toast notification has finished.
### TypeScript Type Definition
```typescript
type IConfig = {
type?: ALERT_TYPE;
title?: string;
textBody?: string;
autoClose?: number | boolean;
titleStyle?: StyleProp;
textBodyStyle?: StyleProp;
onPress?: () => void;
onShow?: () => void;
onHide?: () => void;
};
```
### Usage Example
```javascript
// Assuming you have imported the necessary components/functions
Toast.show({
type: 'WARNING',
title: 'Warning',
textBody: 'Please review the information.',
autoClose: 3000
});
```
### Closing the Toast Notification
```javascript
Toast.hide();
```
```
--------------------------------
### AlertNotificationRoot Component Props
Source: https://github.com/codingbyjerez/react-native-alert-notification/blob/master/README.md
Defines the TypeScript types for the props accepted by the AlertNotificationRoot component. This includes configuration for dialogs, toasts, themes, and custom colors.
```ts
type IProps = {
dialogConfig?: Pick;
toastConfig?: Pick;
theme?: 'light' | 'dark';
colors?: [IColors, IColors] /** ['light_colors' , 'dark_colors'] */;
};
type IColors = {
label: string;
card: string;
overlay: string;
success: string;
danger: string;
warning: string;
};
```
--------------------------------
### Close Active Toast with Toast.hide()
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Illustrates how to programmatically close an active toast notification using the Toast.hide() method. This is useful for scenarios where a toast needs to be dismissed based on certain conditions or after a specific action, such as completing a process. Requires 'react-native-alert-notification' to be imported.
```tsx
import { Toast, ALERT_TYPE } from 'react-native-alert-notification';
// Show toast and hide it programmatically
const showProcessingToast = () => {
Toast.show({
type: ALERT_TYPE.INFO,
title: 'Processing',
textBody: 'Uploading your data...',
autoClose: false
});
// After processing completes
setTimeout(() => {
Toast.hide(); // Hide the processing toast
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Done',
textBody: 'Upload completed successfully',
autoClose: 3000
});
}, 5000);
};
```
--------------------------------
### Toast.hide() - Close Active Toast
Source: https://context7.com/codingbyjerez/react-native-alert-notification/llms.txt
Programmatically closes the currently displayed toast notification.
```APIDOC
## Toast.hide()
### Description
Closes the currently visible toast notification.
### Method
`Toast.hide()`
### Parameters
None.
### Request Example
```tsx
import { Toast, ALERT_TYPE } from 'react-native-alert-notification';
// Show toast and hide it programmatically
const showProcessingToast = () => {
Toast.show({
type: ALERT_TYPE.INFO,
title: 'Processing',
textBody: 'Uploading your data...',
autoClose: false
});
// After processing completes
setTimeout(() => {
Toast.hide(); // Hide the processing toast
Toast.show({
type: ALERT_TYPE.SUCCESS,
title: 'Done',
textBody: 'Upload completed successfully',
autoClose: 3000
});
}, 5000);
};
```
### Response
N/A (This method performs an action, it does not return a value.)
### Error Handling
If no toast is currently displayed, calling `Toast.hide()` will have no effect.
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.