# Toast Package for React Native & Expo

A simple and customizable Toast library for React Native and Expo. It allows you to show toast messages with different types, customizable styles, and positions.

---

## Installation

```bash
npm install toast-for-react-native
```

Usage

import { ToastProvider } from "toast-for-react-native";

and wrap your app with the ToastProivder

Basic Example

import { useToast } from "toast-for-react-native";

export default function App() {
  const { showToast } = useToast();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab Two</Text>
      <Button title='Success' onPress={() => showToast({ message: "Screen 2 is a success", type: 'success', duration: 2000, backgroundColor: 'black'})} />
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <EditScreenInfo path="app/(tabs)/two.tsx" />
    </View>
  );
}

Props

| Prop Name | Type | Default | Description | | ----------------- | ------ | ----------- | --------------------------------------------------------------------------- | | type | string | info | The type of toast message. Can be success, error, info, or warning. | | message | string | "" | The message to be displayed in the toast. | | backgroundColor | string | lightblue | Background color of the toast. | | textColor | string | black | Color of the toast text. | | position | string | bottom | Position of the toast on the screen (top or bottom). | | duration | number | 3000 | Duration for which the toast is visible (in milliseconds). | | icon | any | null | Custom icon for the toast. If not provided, no icon is displayed. |

Advanced Usage

Customizing Props

<View style={styles.container}>
  <Text style={styles.title}>Tab One</Text>
  <Button
    title="Success"
    onPress={() =>
      showToast({
        message: "Test Successful",
        type: "success",
        duration: 3000,
        backgroundColor: "lightblue",
        position: "bottom",
        icon: require("@/assets/images/icon.png"),
      })
    }
  />
  <Button
    title="Warning"
    onPress={() =>
      showToast({
        message: "Warning!!",
        type: "warning",
        duration: 3000,
        backgroundColor: "white",
        position: "bottom",
        icon: "../../assets/images/icon.png",
      })
    }
  />
  <Button
    title="Error"
    onPress={() =>
      showToast({
        message: "An Error Occurred",
        type: "error",
        duration: 3000,
        backgroundColor: "white",
        position: "bottom",
        icon: "../../assets/images/icon.png",
      })
    }
  />
  <Button
    title="Info"
    onPress={() =>
      showToast({
        message: "Info Are Here",
        type: "info",
        duration: 500,
        position: "bottom",
        icon: require("@/assets/images/icon.png"),
      })
    }
  />
  <View
    style={styles.separator}
    lightColor="#eee"
    darkColor="rgba(255,255,255,0.1)"
  />
  <EditScreenInfo path="app/(tabs)/index.tsx" />
</View>

No Icon Example

If you do not pass an icon prop, no app-icon will be shown in the toast.

Default Behaviors

• Type: The default toast type is info.
• Icon: If no icon is provided, the toast will display without an icon.
• Position: The default position of the toast is at the bottom of the screen.
• Background Color: Light blue by default.
• Text Color: Black by default.
• Duration: Toast is visible for 3000ms by default.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License.