React Native Toast

React Native JS level toast for both android and IOS which can be called from any component of your app.

Install

npm install @asaeed14/react-native-toast

OR

yarn add @asaeed14/react-native-toast

Example

How to Use

Wrap your application entry point with ToastProvider.

import { ToastProvider } from '@asaeed14/react-native-toast';

const App = () => {
  return (
    <ToastProvider
      defaultTheme={{
        message: 'Hello Toast',
        delay: 1000,
        position: 'bottom' | 'top',
        bottomOffset: 20,
        topOffset: 20,
        backgroundColor: 'black' | 'rgba(0, 0, 0, 0.75)',
        textColor: 'white' | 'black',
        type: 'success',
      }}
    >
      <App />
    </ToastProvider>
  );
};

You can use toast.show() from any of your component or screen.

// this is jsut an example you can call from anywhere based on your requirement.
import { useToastContext } from '@asaeed14/react-native-toast';

const LoginScreen = () => {
  const toast = useToastContext();
  useEffect(() => {
    if (login.success) {
      toast.show({
        message: 'Login Successfully',
        delay: 3000,
        position: 'bottom' | 'top',
        bottomOffset: 32,
        topOffest: 32,
        backgroundColor: 'black' | 'rgba(0, 0, 0, 0.75)',
        textColor: 'white' | 'black',
        type: 'success',
      });
    }
  }, [login]);

  return <View />;
};

ToastProvider Props

| Name | Type | Required | default | Description | | ------------ | ------ | :------: | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------: | | defaultTheme | object | false | default Props | You can provide default theme to make toast consistent to all over the app, default theme props can be replaced by "show" function props |

Props

| Name | Type | Required | default | Description | | --------------- | ----------------- | :------: | :-------------------: | :--------------------------------------------------------------------------------: | | message | string | false | "Hello Toast" | A message for toast | | delay | number | false | 1000 | Number in miliseconds to delay toast | | position | 'bottom' or 'top' | false | bottom | Position to show toast | | bottomOffset | number | false | 32 | Space from bottom if position is bottom | | topOffset | number | false | 32 | Space from top if position is top | | backgroundColor | string | false | 'rgba(0, 0, 0, 0.75)' | Background color of toast | | textColor | string | false | '#ffffff' | Color of toast message | | type | string | false | '' | Right now just "success" type supported. Icon will be shown on the left of message |