react-native-toast-alert

An awesome package for cool toast alerts in react-native 🚀

Toast.success("Welcome. you will definitely love this toast package.😉")

View Live Demo

Installation

npm install react-native-toast-alert

Usage

👉🏽 Step 1

Import ToastManager and Toast.

// ...
import ToastManager { Toast } from 'react-native-toast-alert'

👉🏽 Step 2

Add ToastManager component to the top of your app component structure.

const App = () => {
  return (
    <View>
      <ToastManager />
      <App>
        // Other parts of your application content can go here
      </App>
    </View>
  )
})

👉🏽 Step 3 (Final Step)

Call any of the Toast methods directly

const App = () => {
  // ...

  const showSuccessToast = () => {
    Toast.success("Yaay!!! You made it here...🚀🚀🚀")
  }

  const showErrorToast = () => {
    Toast.error("Error, looks like something went wrong.🙁")
  }

  const showInfoToast = () => {
    Toast.info("Hi, you're still online.")
  }

  const showWarningToast = () => {
    Toast.warning("Your wallet balance is running low.")
  }

  return (
    <View>
      <ToastManager />
      <Touchable
        onPress={() => showSuccessToast()}
      >
        Show
      </Touchable>
    </View>
  )
})

// ...

Note:

Each of the methods on the toast take 2 parameters: The toast message and an optional list of configuration options.

Options for Configuraton

| Option | Description | Type | Default Value | | --- | --- | --- | --- | | duration | How long the toast will be visible for (milliseconds) | number | 2000 | | withIcon | If there should be an icon in the alert | boolean | true | | icon | Custom icon image. Works only if withIcon is set to true | ImageSourcePropType | undefined | | progress | Show progress bar | boolean | false | | bounce | Add bounce effect while showing toast | boolean | false | | autoDismiss | Dismiss toast automatically | boolean | true | | centerText | Align the text in the toast centrally | boolean | false | | dismissMode | How to dismiss the toast manually. (This is useful if you set autoDismiss to false) | 'tap' or 'swipe' | tap |

Happy Coding 🥂

Contributing

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

License

MIT