Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-root-toast

Package Overview
Dependencies
Maintainers
3
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-root-toast

react native toast like component, pure javascript solution

  • 3.6.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
34K
decreased by-6.65%
Maintainers
3
Weekly downloads
 
Created
Source

react-native-root-toast npm version


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

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:

// 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 which powers react-native-root-toast.

Usage

There are two different ways to manage a Toast.

Calling api
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.

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

class Example extends Component{
    constructor() {
        super(...arguments);
        this.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

NameDefaultTypeDescription
durationToast.durations.SHORTNumberThe duration of the toast. (Only for api calling method)
visiblefalseBoolThe visibility of toast. (Only for Toast Component)
positionToast.positions.BOTTOMNumberThe 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.)
animationtrueBoolShould preform an animation on toast appearing or disappearing.
shadowtrueBoolShould drop shadow around Toast element.
backgroundColornullStringThe background color of the toast.
shadowColornullStringThe shadow color of the toast.
textColornullStringThe text color of the toast.
delay0NumberThe delay duration before toast start appearing on screen.
hideOnPresstrueBoolShould hide toast that appears by pressing on the toast.
opacity0.8NumberThe Toast opacity.
onShownullFunctionCallback for toast`s appear animation start
onShownnullFunctionCallback for toast`s appear animation end
onHidenullFunctionCallback for toast`s hide animation start
onHiddennullFunctionCallback 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)

Keywords

FAQs

Package last updated on 15 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc