# react-native-root-toast

> react native toast like component, pure javascript solution

Latest version **4.0.1** (published 2025-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-root-toast
pnpm add react-native-root-toast
yarn add react-native-root-toast
bun add react-native-root-toast
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2025-03-25 |
| First published | 2016-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2135 |
| Maintainers | magicismight, sunnylqm, bellzhong |
| Keywords | react-component, react-native, ios, android, image, video, focus |

## Links

- npm: https://www.npmjs.com/package/react-native-root-toast
- Repository: https://github.com/magicismight/react-native-root-toast
- npm.io page: https://npm.io/package/react-native-root-toast

## Dependencies (1)

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) ^5.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 4.0.1 (latest) — 2025-03-25
- 4.0.0 — 2025-03-25
- 3.6.0 — 2024-05-15
- 3.5.1 — 2023-08-31
- 3.5.0 — 2023-08-24
- 3.4.1 — 2023-02-20
- 3.3.1 — 2022-11-15
- 3.4.0 — 2022-05-14
- 3.3.0 — 2021-10-27
- 3.2.1 — 2020-04-25
- 3.2.0 — 2019-10-25
- 3.1.2 — 2019-07-04
- 3.1.1 — 2019-05-30
- 3.1.0 — 2019-05-30
- 3.0.2 — 2018-12-16
- … 21 more at https://npm.io/package/react-native-root-toast/versions

## README

## react-native-root-toast [![npm version](https://badge.fury.io/js/react-native-root-toast.svg)](http://badge.fury.io/js/react-native-root-toast)

-----------------------

#### Features
1. Pure javascript solution.
2. Support both Android and iOS.
3. Lots of custom options for Toast.
4. You can show/hide Toast by calling api or using Component inside render.

![screen-shoots](./Example/screen-shoots.gif)

### Install

`npm install react-native-root-toast`

> react-native-root-toast >= 2.1.0 only supports react-native >= 0.47.0 , for lower version choose 2.0.0 or below.

In react native >= 0.62, the new LogBox component would impact this component's initialization. To make it work we have to explicitly insert a mount point in your app like this:

```js
// in your entry file like `App.js`

// In theory you don't have to install `react-native-root-siblings` because it's a dep of root-toast
// But you can install it explicitly if your editor complains about it.
import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function 
return (
  <RootSiblingParent>  // <- use RootSiblingParent to wrap your root component
    <App />
  </RootSiblingParent>
);
            
```

You can skip this step if your react-native is lower than 0.62. And actually you can inject RootSiblingParent into anywhere like a react portal, for example if you have multiple rootviews you can choose where to display the root toast.

Read more about [`react-native-root-siblings`](https://github.com/magicismight/react-native-root-siblings) which powers `react-native-root-toast`. 


### Usage

There are two different ways to manage a Toast.

##### **Calling api**

```js
import Toast from 'react-native-root-toast';


// Add a Toast on screen.
let toast = Toast.show('This is a message', {
    duration: Toast.durations.LONG,
    position: Toast.positions.BOTTOM,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0,
    onShow: () => {
        // calls on toast\`s appear animation start
    },
    onShown: () => {
        // calls on toast\`s appear animation end.
    },
    onHide: () => {
        // calls on toast\`s hide animation start.
    },
    onHidden: () => {
        // calls on toast\`s hide animation end.
    }
});

// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function () {
    Toast.hide(toast);
}, 500);

```

##### **Using a Component**

**NOTE:**
Showing a toast by using a Component inside render, The toast will be automatically disappeared when the `<Toast />` is unmounted.

```js
import React, {Component} from 'react-native';
import Toast from 'react-native-root-toast';

class Example extends Component{
    state = {
        visible: false
    }

    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 2000); // show toast after 2s

        setTimeout(() => this.setState({
            visible: false
        }), 5000); // hide toast after 5s
    };

    render() {
        return <Toast
            visible={this.state.visible}
            position={50}
            shadow={false}
            animation={false}
            hideOnPress={true}
        >This is a message</Toast>;
    }
}

```

---

## Reference

### Props

Name                | Default                  |  Type    | Description
--------------------|--------------------------|----------|---------------------------
duration            | Toast.durations.SHORT    | Number   | The duration of the toast. (Only for api calling method)
visible             | false                    | Bool     | The visibility of toast. (Only for Toast Component)
position            | Toast.positions.BOTTOM   | Number   | The position of toast showing on screen (A negative number represents the distance from the bottom of screen. A positive number represents the distance form the top of screen. `0` will position the toast to the middle of screen.)
animation           | true                     | Bool     | Should preform an animation on toast appearing or disappearing.
shadow              | true                     | Bool     | Should drop shadow around Toast element.
backgroundColor     | null                     | String   | The background color of the toast.
shadowColor         | null                     | String   | The shadow color of the toast.
textColor           | null                     | String   | The text color of the toast.
delay               | 0                        | Number   | The delay duration before toast start appearing on screen.
hideOnPress         | true                     | Bool     | Should hide toast that appears by pressing on the toast.
opacity             | 0.8                      | Number   | The Toast opacity.
onShow              | null                     | Function | Callback for toast\`s appear animation start
onShown             | null                     | Function | Callback for toast\`s appear animation end
onHide              | null                     | Function | Callback for toast\`s hide animation start
onHidden            | null                     | Function | Callback for toast\`s hide animation end

### Constants

##### Toast.durations

presets of duration of the toast.

1. Toast.durations.SHORT (equals to *2000*)

2. Toast.durations.LONG (equals to *3500*)

##### Toast.positions

presets of position of toast.

1. Toast.positions.TOP (equals to *20*)

2. Toast.positions.BOTTOM (equals to *-20*)

3. Toast.positions.CENTER (equals to *0*)

---
_Source: https://npm.io/package/react-native-root-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._