@asaeed14/react-native-toast v0.0.7

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

Props