@iqorlobanov/react-native-toast

Animated toast component for React Native.

Documentation

• Installation
• Usage
• API

Installation

This component created by using react-native-reanimated and react-native-vector-icons. Make sure you have installed react-native-reanimated and react-native-vector-icons before start.

yarn add @iqorlobanov/react-native-toast
# or
npm install --save @iqorlobanov/react-native-toast

Usage

Render the ToastComponent in your app's entry file, as the LAST CHILD in the View hierarchy (along with any other components that might be rendered there):

// App.tsx
import { ToastComponent } from '@iqorlobanov/react-native-toast';

export default function App() {
  return (
    <>
      {/* ... */}
      <ToastComponent />
    </>
  );
}

Then use it anywhere in your app (even outside React components), by calling any Toast method directly:

// Foo.tsx
import { Toast, ToastType } from '@iqorlobanov/react-native-toast';
import { Button } from 'react-native';

export function Foo() {
  return (
    <Button
      title="Show toast"
      onPress={() => {
        Toast.show({
          title: 'Lorem Ipsum',
          description:
            'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
          type: ToastType.SUCCESS,
          visibilityTime: 5000,
        });
      }}
    />
  );
}

API

The Toast API consists of:

1. methods that can be called directly on the Toast object
2. props that can be passed to the ToastComponent component instance; they act as defaults for all Toasts that are shown

methods

show(options = {})

To show a Toast, call the show() method andd pass the options that suit your needs. Everything is optional, unless specified otherwise:

import { Toast } from '@iqorlobanov/react-native-toast';

Toast.show({
  title: 'Lorem Ipsum',
  description:
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  type: ToastType.SUCCESS,
  visibilityTime: 5000,
});

The complete set of options is described below:

| option | description | required | type | default value | | ---------------- | ----------------------------------------------------------------------- | -------- | ----------- | ------------------- | | type | Toast type. Available values of: SUCCESS, INFO, WARNING, ERROR. | true | ToastType | ToastType.SUCCESS | | title | First line of text | true | string | | | description | Second line of text | false | string | | | visibilityTime | Number of milliseconds after which Toast automatically hides. | false | number | 5000 | | topOffset | Offset from the top of the screen (in px). Has effect only when | false | number | 10 | | withShadow | Enable shadow effect | false | boolean | true | | touchable | Hide toast on toch | false | boolean | true | | showLeftIcon | Show left icon component | false | boolean | true | | showRightIcon | Show close icon component | false | boolean | true |

hide()

To hide the current visible Toast, call the hide() method:

Toast.hide();

props

The following set of props can be passed to the ToastComponent component instance to specify certain defaults for all Toasts that are shown:

| prop | description | type | default value | | -------------------- | --------------------------- | ----------------- | ------------- | | titleStyle | Title text style | TextStyle | | | descriptionStyle | Description text style | TextStyle | | | style | Toast view style | ViewStyle | | | leftIconComponent | Custom left icon component | React.ReactNode | | | rightIconComponent | Custom right icon component | React.ReactNode | |

// App.tsx
import { ToastComponent } from '@iqorlobanov/react-native-toast';
import CustomRightIcon from './CustomRightIcon'

export default function App() {
  return (
    <>
      {/* ... */}
      <ToastComponent
        titleStyle={{
          fontSize: 16,
          color: 'black',
        }}
        descriptionStyle={{
          fontSize: 14,
          color: 'gray',
        }}
        rightIconComponent={<CustomRightIcon />}
      />
    </>
  );
}

License

MIT