### Start Sample Project

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Starts the development server for the sample project using npm. This command is used to run the sample application for testing purposes.

```sh
npm start
```

--------------------------------

### Install Dependencies (Sample Project)

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Installs dependencies specifically for the sample project located in the 'sample' directory. This allows for testing changes in a real React Native environment.

```sh
cd sample
npm install
```

--------------------------------

### Install Dependencies (Main Package)

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Installs the necessary dependencies for the main toastify-react-native package using npm. This is a required step before developing or testing.

```sh
npm install
```

--------------------------------

### Install toastify-react-native and react-native-vector-icons

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Installs the core toastify-react-native library and its required dependency, react-native-vector-icons, using npm or yarn. Ensure you follow the react-native-vector-icons installation guide for platform-specific setup.

```sh
npm install toastify-react-native
# or
yarn add toastify-react-native

### Required Dependencies

This package requires `react-native-vector-icons`:

```sh
npm install react-native-vector-icons
# or
yarn add react-native-vector-icons
```

Follow the [react-native-vector-icons installation guide](https://github.com/oblador/react-native-vector-icons#installation) to complete the setup for your platform.
```

--------------------------------

### Install toastify-react-native and Dependencies

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README-legacy.md

Installs the core toastify-react-native package and its required dependencies, react-native-modal and react-native-vector-icons, using npm.

```sh
npm install toastify-react-native
npm install react-native-modal react-native-vector-icons
```

--------------------------------

### Clone Repository and Create Branch

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Commands to clone the toastify-react-native repository, navigate into the directory, and create a new local branch for development. Ensures a clean starting point for contributions.

```sh
git clone https://github.com/zahidalidev/toastify-react-native.git
cd toastify-react-native

git checkout -b my-branch
```

--------------------------------

### Info Toast with Position Example (React Native)

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README-legacy.md

Shows how to display an informational toast message at a specified position ('bottom') using the Toast.info() method from toastify-react-native. This example is integrated within a separate component.

```javascript
import React from 'react'
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native'
import { Toast } from 'toastify-react-native'
const Another = () => (
  <View style={styles.container}>
    <TouchableOpacity
      onPress={() => Toast.info('Lorem ipsum info', 'bottom')}
      style={styles.buttonStyle}>
      <Text>SHOW SOME AWESOMENESS!</Text>
    </TouchableOpacity>
  </View>
)

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonStyle: {
    marginTop: 10,
    backgroundColor: 'white',
    borderColor: 'green',
    borderWidth: 2,
    padding: 10,
  },
})

export default Another
```

--------------------------------

### Basic Toast Notification Example (React Native)

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README-legacy.md

Demonstrates how to set up and display a success toast notification within a React Native application. It requires importing ToastManager and Toast from 'toastify-react-native' and calling Toast.success().

```javascript
import React from 'react'
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

import Another from './Another'

const App = () => {
  const showToasts = () => {
    Toast.success('Promised is resolved')
  }

  return (
    <View style={styles.container}>
      <ToastManager />
      <Another />
      <TouchableOpacity
        onPress={showToasts}
        style={{
          backgroundColor: 'white',
          borderColor: 'green',
          borderWidth: 1,
          padding: 10,
        }}>
        <Text>SHOW SOME AWESOMENESS!</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App
```

--------------------------------

### React Native: Display Error Toast with Toast.error()

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Provides an example of displaying error toast notifications in React Native using Toast.error(). This is useful for handling failure scenarios and can be customized with position, icons, icon families, and modal behavior. The example includes a mock network request to trigger the error toast.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  const handleError = async () => {
    try {
      await performNetworkRequest()
    } catch (error) {
      Toast.error('Network request failed', 'top', 'error-outline', 'MaterialIcons', true)
    }
  }

  const performNetworkRequest = async () => {
    throw new Error('Connection timeout')
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Trigger Error' onPress={handleError} />
      <ToastManager />
    </View>
  )
}
```

--------------------------------

### React Native: Show Toast with Custom Close Icon Component

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Demonstrates how to use a custom React component as a close icon for a toast notification. This allows for highly customizable close button appearances. Ensure FontAwesome is installed and configured.

```jsx
// Custom close icon component
const CustomCloseIcon = ({ color }) => (
  <View
    style={{
      width: 24,
      height: 24,
      borderRadius: 12,
      backgroundColor: color || '#FF5722',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <FontAwesome name='times' size={14} color='#FFFFFF' />
  </View>
)

Toast.show({
  type: 'warn',
  text1: 'Custom Close Component',
  text2: 'Using a custom React component as close icon',
  closeIcon: <CustomCloseIcon color='#9C27B0' />,
})

// Using JSX directly as close icon
Toast.show({
  type: 'error',
  text1: 'JSX Close Icon',
  text2: 'Using JSX directly as close icon',
  closeIcon: (
    <View style={{ flexDirection: 'row' }}>
      <FontAwesome name='times' size={16} color='#FF5722' />
      <FontAwesome name='times' size={16} color='#FF5722' style={{ marginLeft: -4 }} />
    </View>
  ),
})

```

--------------------------------

### Customize Toast Close Button with toastify-react-native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

This example demonstrates customizing the close button of toast notifications in toastify-react-native. You can specify a different icon name, icon family, size, color, or replace it entirely with a custom React component. The ToastManager can also set global defaults for the close button.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'

const CustomCloseButton = () => (
  <View
    style={{
      width: 28,
      height: 28,
      borderRadius: 14,
      backgroundColor: 'rgba(255, 255, 255, 0.2)',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <MaterialIcons name='close' size={18} color='#fff' />
  </View>
)

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Custom Close Icon Name'
        onPress={() => {
          Toast.show({
            type: 'success',
            text1: 'Different Close Icon',
            closeIcon: 'times',
            closeIconFamily: 'FontAwesome',
            closeIconSize: 18,
            closeIconColor: '#e74c3c',
          })
        }}
      />

      <Button
        title='Custom Close Component'
        onPress={() => {
          Toast.show({
            type: 'info',
            text1: 'Custom Close Button',
            closeIcon: <CustomCloseButton />,
          })
        }}
      />

      <Button
        title='No Close Icon'
        onPress={() => {
          Toast.show({
            type: 'warn',
            text1: 'Auto-dismiss only',
            text2: 'No close button',
            showCloseIcon: false,
            visibilityTime: 3000,
          })
        }}
      />

      <ToastManager
        closeIcon='close-circle'
        closeIconFamily='MaterialCommunityIcons'
        closeIconSize={24}
        closeIconColor='#95a5a6'
      />
    </View>
  )
}

```

--------------------------------

### Conditional Toast Modal Usage Based on Context in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Provides examples of conditionally using the `useModal` prop for toasts based on the application context. This ensures toasts behave appropriately whether they are displayed within a modal or in the regular app interface.

```jsx
// Inside a modal component
const showToastInModal = () => {
  Toast.show({
    type: 'info',
    text1: 'Modal Context',
    text2: 'This toast appears over the modal',
    useModal: true, // Ensure it appears over the modal
  })
}
```

```jsx
// In regular app context
const showRegularToast = () => {
  Toast.show({
    type: 'success',
    text1: 'Regular Context',
    text2: 'Allow interaction with the app',
    useModal: false, // Allow background interaction
  })
}
```

--------------------------------

### Run Sample Project on iOS Simulator

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Builds and runs the sample project on an iOS simulator using npm. This command is part of the testing process for changes made to the library.

```sh
npm run ios
```

--------------------------------

### Run Sample Project on Android Emulator

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Builds and runs the sample project on an Android emulator using npm. This command is essential for testing the library's functionality across different platforms.

```sh
npm run android
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/CONTRIBUTING.md

Applies code formatting using Prettier to ensure consistent styling across the project. This command should be run before committing changes.

```sh
npm run prettier
```

--------------------------------

### Customize Toast Themes and Styles in React Native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Allows for global theming (e.g., dark theme) and custom styling of toasts, including background colors, text colors, and borders, to match application design. This provides flexibility in creating branded notification experiences. Requires the 'toastify-react-native' library.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a1a1a' }}>
      <Button
        title='Dark Theme Toast'
        onPress={() => {
          Toast.success('Styled notification', 'center')
        }}
      />

      <Button
        title='Custom Styled Toast'
        onPress={() => {
          Toast.show({
            type: 'info',
            text1: 'Custom Style',
            text2: 'With gradient background',
            backgroundColor: '#667eea',
            textColor: '#ffffff',
            iconColor: '#ffffff',
            progressBarColor: '#764ba2',
          })
        }}
      />

      <ToastManager
        theme='dark'
        width='92%'
        minHeight={75}
        style={{
          borderRadius: 16,
          borderLeftWidth: 4,
          borderLeftColor: '#3498db',
          paddingVertical: 12,
        }}
        textStyle={{
          fontSize: 15,
          fontWeight: '600',
          fontFamily: 'System',
        }}
        showProgressBar={true}
        showCloseIcon={true}
        animationStyle='slide'
      />
    </View>
  )
}
```

--------------------------------

### React Native: Show Information Toast with Toast.info()

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Demonstrates how to display informational toast notifications in React Native using Toast.info(). This function is suitable for general messages and updates, allowing for customization of position and icons from different icon families. Ensure ToastManager and Toast are imported.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  const showInfo = () => {
    Toast.info('New features available in settings')

    // Info with FontAwesome icon
    Toast.info('Syncing data...', 'center', 'sync', 'FontAwesome')
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Show Info' onPress={showInfo} />
      <ToastManager />
    </View>
  )
}
```

--------------------------------

### Toast Functions API

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Reference for the core Toastify functions to display and manage toasts.

```APIDOC
## Toast Functions

### `Toast.show(options)`

#### Description
Shows a toast with custom options.

#### Method
`Toast.show`

#### Parameters

##### Request Body
- **options** (object) - Required - An object containing various properties to configure the toast.
  - **type** (string) - Optional - The type of toast (e.g., 'success', 'error', 'info', 'warn').
  - **text1** (string) - Required - The primary text content of the toast.
  - **text2** (string) - Optional - Secondary text content for the toast.
  - **position** (string) - Optional - The position of the toast ('top', 'bottom'). Defaults to 'bottom'.
  - **closeIcon** (React.ReactNode | string) - Optional - A custom React node or icon name for the close button.
  - **closeIconFamily** (string) - Optional - The icon family for the close icon (e.g., 'FontAwesome', 'Ionicons').
  - **closeIconSize** (number) - Optional - The size of the close icon.
  - **closeIconColor** (string) - Optional - The color of the close icon.
  - **showCloseIcon** (boolean) - Optional - Whether to display the close icon. Defaults to true.
  - **autoHide** (boolean) - Optional - Whether the toast should auto-hide. Defaults to true.
  - **visibilityTime** (number) - Optional - The time in milliseconds before the toast auto-hides.

### `Toast.success(message, position?, icon?, iconFamily?, useModal?)`

#### Description
Shows a success toast.

#### Method
`Toast.success`

#### Parameters
- **message** (string) - Required - The message to display in the toast.
- **position** (string) - Optional - The position of the toast ('top', 'bottom').
- **icon** (string) - Optional - The name of the icon to display.
- **iconFamily** (string) - Optional - The family of the icon (e.g., 'FontAwesome').
- **useModal** (boolean) - Optional - Whether to use a modal for the toast.

### `Toast.error(message, position?, icon?, iconFamily?, useModal?)`

#### Description
Shows an error toast.

#### Method
`Toast.error`

#### Parameters
- **message** (string) - Required - The message to display in the toast.
- **position** (string) - Optional - The position of the toast ('top', 'bottom').
- **icon** (string) - Optional - The name of the icon to display.
- **iconFamily** (string) - Optional - The family of the icon (e.g., 'FontAwesome').
- **useModal** (boolean) - Optional - Whether to use a modal for the toast.

### `Toast.info(message, position?, icon?, iconFamily?, useModal?)`

#### Description
Shows an info toast.

#### Method
`Toast.info`

#### Parameters
- **message** (string) - Required - The message to display in the toast.
- **position** (string) - Optional - The position of the toast ('top', 'bottom').
- **icon** (string) - Optional - The name of the icon to display.
- **iconFamily** (string) - Optional - The family of the icon (e.g., 'FontAwesome').
- **useModal** (boolean) - Optional - Whether to use a modal for the toast.

### `Toast.warn(message, position?, icon?, iconFamily?, useModal?)`

#### Description
Shows a warning toast.

#### Method
`Toast.warn`

#### Parameters
- **message** (string) - Required - The message to display in the toast.
- **position** (string) - Optional - The position of the toast ('top', 'bottom').
- **icon** (string) - Optional - The name of the icon to display.
- **iconFamily** (string) - Optional - The family of the icon (e.g., 'FontAwesome').
- **useModal** (boolean) - Optional - Whether to use a modal for the toast.

### `Toast.hide()`

#### Description
Hides the currently displayed toast.

#### Method
`Toast.hide`

### Request Example
```javascript
// Example using Toast.show with custom options
Toast.show({
  type: 'warn',
  text1: 'Custom Close Component',
  text2: 'Using a custom React component as close icon',
  closeIcon: (
    <View style={{ flexDirection: 'row' }}>
      <FontAwesome name='times' size={16} color='#FF5722' />
      <FontAwesome name='times' size={16} color='#FF5722' style={{ marginLeft: -4 }} />
    </View>
  ),
  autoHide: false
});

// Example using Toast.success
Toast.success('Operation successful!', 'top');
```

### Response

#### Success Response (200)
Toasts are displayed visually and do not return a specific JSON response.

#### Response Example
N/A
```

--------------------------------

### ToastManager Configuration

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Configuration options for the global ToastManager component.

```APIDOC
## ToastManager Configuration

### `ToastManager` Component

#### Description
Used to set global configurations for all toasts.

#### Method
`<ToastManager />`

#### Parameters

##### Props
- **config** (object) - Optional - Configuration object for toasts.
- **theme** (string) - Optional - The theme for the toasts ('light', 'dark').
- **position** (string) - Optional - Default position for toasts ('top', 'bottom').
- **closeIcon** (string) - Optional - Default icon name for the close button.
- **closeIconFamily** (string) - Optional - Default icon family for the close button.
- **closeIconSize** (number) - Optional - Default size for the close icon.
- **closeIconColor** (string) - Optional - Default color for the close icon.

### Request Example
```jsx
<ToastManager
  config={toastConfig}
  theme='light'
  position='top'
  closeIcon='times'
  closeIconFamily='FontAwesome'
  closeIconSize={18}
  closeIconColor='#666'
/>
```

### Response

#### Success Response (200)
The ToastManager component configures the global toast settings and does not return a specific JSON response.

#### Response Example
N/A
```

--------------------------------

### React Native: Display Custom Toast with Toast.show()

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Demonstrates how to display a custom toast notification using Toast.show() in React Native. This method allows for extensive customization of type, position, duration, styling, and callbacks. It requires importing ToastManager and Toast from 'toastify-react-native'.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  const showAdvancedToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Operation Successful',
      text2: 'Your data has been saved successfully',
      position: 'bottom',
      visibilityTime: 5000,
      autoHide: true,
      backgroundColor: '#2ecc71',
      textColor: '#ffffff',
      iconColor: '#ffffff',
      iconSize: 28,
      progressBarColor: '#27ae60',
      theme: 'dark',
      useModal: false,
      onShow: () => console.log('Toast is visible'),
      onHide: () => console.log('Toast was hidden'),
      onPress: () => {
        console.log('Toast was pressed')
        Toast.hide()
      },
    })
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Show Advanced Toast' onPress={showAdvancedToast} />
      <ToastManager />
    </View>
  )
}
```

--------------------------------

### Configure ToastManager Provider in React Native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Illustrates how to use the ToastManager component as a root provider in React Native applications to configure global toast settings. This component allows customization of appearance, position, duration, and icons. It must be included at the top level of the application's component tree.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Show Toast' onPress={() => Toast.success('Configured!')} />

      <ToastManager
        width='95%'
        minHeight={70}
        duration={4000}
        position='top'
        theme='dark'
        animationStyle='slide'
        showCloseIcon={true}
        showProgressBar={true}
        isRTL={false}
        topOffset={50}
        bottomOffset={50}
        iconSize={24}
        iconFamily='MaterialIcons'
        useModal={true}
        closeIcon='close'
        closeIconSize={20}
        closeIconColor='#fff'
        closeIconFamily='MaterialIcons'
        style={{ borderRadius: 12 }}
        textStyle={{ fontSize: 16, fontWeight: '600' }}
        icons={{
          success: 'check-circle',
          error: 'error',
          info: 'info',
          warn: 'warning',
        }}
      />
    </View>
  )
}
```

--------------------------------

### Create Custom Success and Error Toasts in React Native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

This snippet demonstrates how to define and use custom toast components for success and error messages in a React Native application. It utilizes `toastify-react-native` and `react-native-vector-icons` for styling and icons. The `CustomSuccessToast` and `CustomErrorToast` components can be customized with different layouts, styles, and behaviors. The `ToastManager` is configured with these custom types, and buttons are provided to trigger them.

```jsx
import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

// Assuming Button component is available globally or imported
// import { Button } from 'react-native'; 

const CustomSuccessToast = ({ text1, text2, hide }) => {
  return (
    <View style={styles.customToast}>
      <View style={styles.iconContainer}>
        <Icon name='check-decagram' size={32} color='#FFD700' />
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.title}>{text1}</Text>
        {text2 && <Text style={styles.message}>{text2}</Text>}
      </View>
      <TouchableOpacity onPress={hide} style={styles.closeButton}>
        <Icon name='close-circle' size={24} color='#fff' />
      </TouchableOpacity>
    </View>
  )
}

const CustomErrorToast = ({ text1, text2, hide }) => {
  return (
    <View style={[styles.customToast, { backgroundColor: '#c0392b' }]}>
      <Icon name='alert-octagon' size={28} color='#fff' />
      <View style={styles.textContainer}>
        <Text style={styles.title}>{text1}</Text>
        {text2 && <Text style={styles.message}>{text2}</Text>}
      </View>
      <TouchableOpacity onPress={hide}>
        <Text style={styles.dismissText}>Dismiss</Text>
      </TouchableOpacity>
    </View>
  )
}

const toastConfig = {
  customSuccess: (props) => <CustomSuccessToast {...props} />,
  customError: (props) => <CustomErrorToast {...props} />,
}

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Custom Success'
        onPress={() => {
          Toast.show({
            type: 'customSuccess',
            text1: 'Achievement Unlocked!',
            text2: 'You earned 100 points',
          })
        }}
      />
      <Button
        title='Custom Error'
        onPress={() => {
          Toast.show({
            type: 'customError',
            text1: 'Critical Error',
            text2: 'Please try again later',
          })
        }}
      />
      <ToastManager config={toastConfig} />
    </View>
  )
}

const styles = StyleSheet.create({
  customToast: {
    width: '90%',
    backgroundColor: '#8e44ad',
    borderRadius: 12,
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 4.65,
    elevation: 8,
  },
  iconContainer: {
    marginRight: 12,
  },
  textContainer: {
    flex: 1,
  },
  title: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
  message: {
    color: '#f0f0f0',
    fontSize: 14,
    marginTop: 4,
  },
  closeButton: {
    marginLeft: 8,
  },
  dismissText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
})

```

--------------------------------

### Configure RTL Support for Toasts in React Native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Enables right-to-left (RTL) text direction and alignment for toasts, essential for applications supporting languages like Arabic or Hebrew. This configuration ensures proper display and user experience in RTL environments. It requires the 'toastify-react-native' library.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show RTL Toast'
        onPress={() => {
          Toast.success('تم حفظ البيانات بنجاح', 'top')
        }}
      />

      <ToastManager
        isRTL={true}
        position='top'
        theme='light'
        showProgressBar={true}
      />
    </View>
  )
}
```

--------------------------------

### Use Shorthand Methods for Modal Behavior in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Demonstrates how to apply the `useModal` behavior when using shorthand toast methods like `Toast.success` and `Toast.error`. The `useModal` parameter is passed as the fifth argument to these functions.

```jsx
// Success toast with modal behavior
Toast.success(
  'Success with Modal!',
  'bottom', // position
  undefined, // icon
  undefined, // iconFamily
  true, // useModal
)
```

```jsx
// Error toast without modal behavior
Toast.error(
  'Error without Modal!',
  'bottom', // position
  undefined, // icon
  undefined, // iconFamily
  false, // useModal
)
```

--------------------------------

### Basic Toast Notifications in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Demonstrates how to display basic success, error, info, and warning toasts using the ToastifyManager and Toast components. The ToastManager should be rendered at the root level of your application.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show Success Toast'
        onPress={() => {
          Toast.success('Success message!')
        }}
      />

      <Button
        title='Show Error Toast'
        onPress={() => {
          Toast.error('Error message!')
        }}
      />

      <Button
        title='Show Info Toast'
        onPress={() => {
          Toast.info('Info message!')
        }}
      />

      <Button
        title='Show Warning Toast'
        onPress={() => {
          Toast.warn('Warning message!')
        }}
      />

      {/* Toast provider should be at the root level */}
      <ToastManager />
    </View>
  )
}
```

--------------------------------

### React Native: Show Success Toast with Toast.success()

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Illustrates how to display success toast notifications in React Native using Toast.success(). This function supports basic messages, custom positions, custom icons with specified icon families, and controlling modal behavior. Ensure ToastManager and Toast are imported.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  const handleSuccess = () => {
    // Basic success toast
    Toast.success('Data saved successfully!')

    // Success toast with custom position
    Toast.success('Profile updated!', 'bottom')

    // Success toast with custom icon
    Toast.success('Upload complete!', 'top', 'cloud-done', 'MaterialIcons')

    // Success toast without modal overlay (allows background interaction)
    Toast.success('Quick notification', 'center', undefined, undefined, false)
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Show Success' onPress={handleSuccess} />
      <ToastManager />
    </View>
  )
}
```

--------------------------------

### Display Warning Toast with Toast.warn() in React Native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Demonstrates how to display a warning toast notification using the Toast.warn() method in React Native. This is useful for alerting users about potential issues. It requires importing Toast and ToastManager from 'toastify-react-native'. The function takes text, position, and icon details as arguments.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  const checkBatteryLevel = () => {
    const batteryLevel = 15 // example battery level

    if (batteryLevel < 20) {
      Toast.warn('Battery level is low', 'bottom', 'battery-alert', 'MaterialCommunityIcons')
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Check Battery' onPress={checkBatteryLevel} />
      <ToastManager />
    </View>
  )
}
```

--------------------------------

### Creating Custom Toast Components in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Demonstrates how to define and use custom toast components in react-native. This involves creating a React component that adheres to the toastify-react-native structure and registering it within the ToastManager configuration. The custom component can accept props like text1, text2, and a hide function for dismissal. It requires 'react', 'react-native', and 'toastify-react-native' as dependencies.

```jsx
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

const CustomToast = ({ text1, text2, hide }) => {
  return (
    <View style={styles.customToast}>
      <Icon name='star' size={24} color='#FFD700' />
      <View style={styles.textContainer}>
        <Text style={styles.title}>{text1}</Text>
        {text2 && <Text style={styles.message}>{text2}</Text>}
      </View>
      <Icon name='close' size={20} color='#fff' onPress={hide} />
    </View>
  )
}

const styles = StyleSheet.create({
  customToast: {
    width: '90%',
    backgroundColor: '#673AB7',
    borderRadius: 10,
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  textContainer: {
    flex: 1,
    marginLeft: 12,
  },
  title: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
  message: {
    color: '#fff',
    fontSize: 14,
    marginTop: 4,
  },
})

export default function App() {
  const toastConfig = {
    custom: (props) => <CustomToast {...props} />,
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show Custom Toast'
        onPress={() => {
          Toast.show({
            type: 'custom',
            text1: 'Custom Component',
            text2: 'This is a fully custom toast component!',
          })
        }}
      />

      <ToastManager config={toastConfig} />
    </View>
  )
}

```

--------------------------------

### Advanced Toast Configuration and Customization

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Shows how to configure custom toast appearance and behavior, including overriding default types and setting properties like position, visibility time, and callbacks. The ToastManager accepts a 'config' prop for custom toast definitions.

```jsx
import React from 'react'
import { View, Button, Text } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

// Custom toast configuration
const toastConfig = {
  success: (props) => (
    <View style={{ backgroundColor: '#4CAF50', padding: 16, borderRadius: 10 }}>
      <Text style={{ color: 'white', fontWeight: 'bold' }}>{props.text1}</Text>
      {props.text2 && <Text style={{ color: 'white' }}>{props.text2}</Text>}
    </View>
  ),
  // Override other toast types as needed
}

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show Custom Toast'
        onPress={() => {
          Toast.show({
            type: 'success',
            text1: 'Main message',
            text2: 'Secondary message',
            position: 'bottom',
            visibilityTime: 4000,
            autoHide: true,
            onPress: () => console.log('Toast pressed'),
            onShow: () => console.log('Toast shown'),
            onHide: () => console.log('Toast hidden'),
          })
        }}
      />

      {/* Toast provider with custom config */}
      <ToastManager config={toastConfig} />
    </View>
  )
}
```

--------------------------------

### Control Toast Modal Behavior in React Native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

Demonstrates how to control whether toasts appear as modals (blocking background interaction) or inline (allowing background interaction). This feature is useful for managing user focus on critical notifications. It requires the 'toastify-react-native' library.

```jsx
import React, { useState } from 'react'
import { View, Button, Modal, Text } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

export default function App() {
  const [modalVisible, setModalVisible] = useState(false)

  const showModalToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Modal Toast',
      text2: 'Background is blocked',
      useModal: true,
      position: 'center',
    })
  }

  const showInlineToast = () => {
    Toast.show({
      type: 'info',
      text1: 'Inline Toast',
      text2: 'Background remains interactive',
      useModal: false,
      position: 'top',
    })
  }

  const showToastInsideModal = () => {
    Toast.show({
      type: 'warn',
      text1: 'Toast in Modal',
      text2: 'Appears over this modal',
      useModal: true,
    })
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Show Modal Toast' onPress={showModalToast} />
      <Button title='Show Inline Toast' onPress={showInlineToast} />
      <Button title='Open Modal' onPress={() => setModalVisible(true)} />

      <Modal visible={modalVisible} transparent animationType='slide'>
        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
          <View style={{ backgroundColor: '#fff', padding: 20, borderRadius: 10 }}>
            <Text>Modal Content</Text>
            <Button title='Toast in Modal' onPress={showToastInsideModal} />
            <Button title='Close' onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>

      <ToastManager useModal={true} />
    </View>
  )
}
```

--------------------------------

### React Native: Toast Accessibility and Size Options

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Illustrates how to enhance toast accessibility by increasing the size and changing the icon of the close button, and how to completely hide the close icon. Useful for improving user experience and controlling toast visibility.

```jsx
// Larger close icon for better accessibility
Toast.show({
  type: 'success',
  text1: 'Accessible Close Icon',
  text2: 'Larger close button for better touch targets',
  closeIcon: 'close-outline',
  closeIconFamily: 'Ionicons',
  closeIconSize: 28,
  closeIconColor: '#333',
})

// Disable close icon entirely
Toast.show({
  type: 'info',
  text1: 'No Close Icon',
  text2: 'This toast has no close button',
  showCloseIcon: false,
  autoHide: true,
  visibilityTime: 3000,
})

```

--------------------------------

### Setting Toast Positions Programmatically

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Illustrates how to specify the display position of toasts (top, center, bottom) when calling toast functions. The second argument to Toast.success, Toast.error, Toast.info, and Toast.warn functions determines the position.

```javascript
Toast.success('Top toast', 'top') // default
Toast.error('Center toast', 'center')
Toast.info('Bottom toast', 'bottom')
```

--------------------------------

### Configure Custom Toast Icons with toastify-react-native

Source: https://context7.com/zahidalidev/toastify-react-native/llms.txt

This snippet shows how to use custom icons for toast notifications in toastify-react-native. It supports using icon names from different families, entire React components, or JSX elements. The ToastManager can also be configured with default icons and icon families.

```jsx
import React from 'react'
import { View, Button } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'
import FontAwesome from 'react-native-vector-icons/FontAwesome'

// Custom icon component
const CustomSuccessIcon = () => (
  <View
    style={{
      width: 36,
      height: 36,
      borderRadius: 18,
      backgroundColor: '#27ae60',
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 2,
      borderColor: '#fff',
    }}
  >
    <FontAwesome name='check' size={20} color='#fff' />
  </View>
)

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Different Icon Name'
        onPress={() => {
          Toast.show({
            type: 'success',
            text1: 'Custom Icon',
            icon: 'check',
          })
        }}
      />

      <Button
        title='Different Icon Family'
        onPress={() => {
          Toast.show({
            type: 'error',
            text1: 'FontAwesome Icon',
            icon: 'exclamation-triangle',
            iconFamily: 'FontAwesome',
            iconSize: 26,
            iconColor: '#e74c3c',
          })
        }}
      />

      <Button
        title='Custom Component Icon'
        onPress={() => {
          Toast.show({
            type: 'success',
            text1: 'Custom Component',
            icon: <CustomSuccessIcon />,
          })
        }}
      />

      <Button
        title='JSX Icon'
        onPress={() => {
          Toast.show({
            type: 'info',
            text1: 'Multiple Icons',
            icon: (
              <View style={{ flexDirection: 'row' }}>
                <FontAwesome name='star' size={18} color='#f39c12' />
                <FontAwesome name='star' size={18} color='#f39c12' style={{ marginLeft: 4 }} />
                <FontAwesome name='star' size={18} color='#f39c12' style={{ marginLeft: 4 }} />
              </View>
            ),
          })
        }}
      />

      <ToastManager
        icons={{
          success: 'check-circle-outline',
          error: 'alert-circle-outline',
          info: 'information-outline',
          warn: 'warning-outline',
        }}
        iconFamily='MaterialCommunityIcons'
        iconSize={26}
      />
    </View>
  )
}

```

--------------------------------

### Customize Individual Toast in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Demonstrates how to customize a single toast message in React Native using various options. This includes setting the type, text, position, visibility time, auto-hide behavior, background and text colors, icon properties, progress bar color, theme, and custom close icon properties.

```jsx
Toast.show({
  type: 'success',
  text1: 'Custom Toast',
  text2: 'With many options',
  position: 'bottom',
  visibilityTime: 5000,
  autoHide: true,
  backgroundColor: '#333',
  textColor: '#fff',
  iconColor: '#4CAF50',
  iconSize: 24,
  progressBarColor: '#4CAF50',
  theme: 'dark',
  // Custom close icon options
  closeIcon: 'times-circle',
  closeIconFamily: 'FontAwesome',
  closeIconSize: 20,
  closeIconColor: '#fff',
})
```

--------------------------------

### Configure ToastManager Modal Behavior in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Shows how to set the default modal behavior for all toasts managed by ToastManager. Setting `useModal` to `true` makes toasts appear with a modal overlay, blocking background interaction. Setting it to `false` allows background interaction.

```jsx
// All toasts will use modal behavior by default
<ToastManager useModal={true} />
```

```jsx
// All toasts will NOT use modal behavior by default
<ToastManager useModal={false} />
```

--------------------------------

### Customizing Toast Icons in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Learn to customize the icons displayed in toast notifications using toastify-react-native. You can specify different icon names from the default family, use icons from alternative families like FontAwesome, or even provide custom React components as icons. This flexibility allows for visually distinct toast messages tailored to your application's design. Requires 'react', 'react-native', and potentially icon libraries like 'react-native-vector-icons'.

```jsx
// Different icon name from the default family
Toast.show({
  type: 'success',
  text1: 'Different Icon',
  text2: 'Using a different icon name',
  icon: 'check', // Different icon name according to default icon family
})

// Using a different icon family
Toast.show({
  type: 'error',
  text1: 'FontAwesome Icon',
  text2: 'Using a different icon family',
  icon: 'exclamation-circle',
  iconFamily: 'FontAwesome',
})

// Using a custom React component as icon
const CustomIcon = ({ color }) => (
  <View
    style={{
      width: 30,
      height: 30,
      borderRadius: 15,
      backgroundColor: color || '#4CAF50',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <FontAwesome name='check' size={18} color='#FFFFFF' />
  </View>
)

Toast.show({
  type: 'info',
  text1: 'Custom Component',
  text2: 'Using a custom React component as icon',
  icon: <CustomIcon color='#3498db' />,
})

// Using JSX directly as icon
Toast.show({
  type: 'success',
  text1: 'JSX Icon',
  text2: 'Using JSX directly as icon',
  icon: (
    <View style={{ flexDirection: 'row' }}>
      <FontAwesome name='thumbs-up' size={22} color='#4CAF50' />
      <FontAwesome
        name='thumbs-up'
        size={22}
        color='#4CAF50'
        style={{ marginLeft: -8, marginTop: 5 }}
      />
    </View>
  ),
})

```

```jsx
// Setting default icons at the ToastManager level
<ToastManager
  config={toastConfig}
  theme='light'
  position='top'
  // Custom default icons configuration
  icons={{
    success: 'check-circle',
    error: 'error',
    info: 'info',
    warn: 'warning',
    default: 'notifications',
  }}
  // Default icon family
  iconFamily='MaterialIcons'
  // Default icon size
  iconSize={24}
/>

```

--------------------------------

### Set Modal Behavior for Individual Toasts in React Native

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Illustrates how to override the default modal behavior for specific toasts using the `useModal` prop within the `Toast.show()` method. This allows fine-grained control over whether a particular toast blocks background interaction.

```jsx
// This toast will use modal behavior
Toast.show({
  type: 'success',
  text1: 'Using Modal',
  text2: 'Background is not interactive',
  useModal: true,
})
```

```jsx
// This toast will NOT use modal behavior
Toast.show({
  type: 'error',
  text1: 'No Modal',
  text2: 'Background remains interactive',
  useModal: false,
})
```

--------------------------------

### React Native: Set Global Default Close Icon for Toasts

Source: https://github.com/zahidalidev/toastify-react-native/blob/master/README.md

Configures a default close icon for all toasts managed by ToastManager. This simplifies applying a consistent look for close buttons across the application. Requires setting specific props on ToastManager.

```jsx
// Setting default close icons at the ToastManager level
<ToastManager
  config={toastConfig}
  theme='light'
  position='top'
  // Custom default close icon configuration
  closeIcon='times'
  closeIconFamily='FontAwesome'
  closeIconSize={18}
  closeIconColor='#666'
/>

```