@asaeed14/react-native-toast
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    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

    Top Example Bottom 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

    Install

    npm i @asaeed14/react-native-toast

    DownloadsWeekly Downloads

    2

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    74.5 kB

    Total Files

    22

    Last publish

    Collaborators

    • asaeed14