react native toast like component, pure javascript solution

Overview

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

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)

Comments
  • root-toast depends on root-siblings, and root-siblings version is not compatible with React Native v0.48

    root-toast depends on root-siblings, and root-siblings version is not compatible with React Native v0.48

    So related to #41, but more english in it.

    root-toast has a dependency: root-siblings

    screen shot 2017-09-08 at 3 53 55 pm

    root-siblings' version is not compatible with any higher React Native versions (I am currently on 0.45 for this to work)

    I need to upgrade RN so that other dependencies behave properly, but in order to do that, I will have to wipe out root-toast entirely.

    opened by KhalilKhalaf 14
  • Package incompatible with react-devtools - ERROR: Expected to find at least one React renderer.

    Package incompatible with react-devtools - ERROR: Expected to find at least one React renderer.

    Unfortunately this package incompatible with react-devtools and when you toggle inspector and click on some element react throws the error: Expected to find at least one React renderer.

    image

    If you remove the package the error does not occur.

    opened by samuelpismel 8
  • `useNativeDriver` was not specified.

    `useNativeDriver` was not specified.

    Hi, this is my code with no options :

    import Toaster from "react-native-root-toast";
    
    const toast = () => {
        Toaster.show("This is a message");
      };
    

    and here is result : image

    as you see there is a warning on my screen and toast doesn't show anything and it is not working

    consolse error :

    Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
    

    RN 0.62.0 React 16.11.0

    opened by SamimSdz 7
  • react-native Modal covers toast message

    react-native Modal covers toast message

    When ever Modal is opened toast message displays beneath the Modal window. A fix might make it right.

    react-native version : 0.52.2 Platform: Android & IOS

    Expected behaviour No matter how many Modal are opened, Toast must appear on top of all those Modals

    Observed Behaviour Toast is not appearing even if one Modal is opened.

    wontfix 
    opened by Yandamuri 7
  • Update ToastContainer.js - related Cannot read property 'setNativeProps' of null

    Update ToastContainer.js - related Cannot read property 'setNativeProps' of null

    @magicismight please merge this pull request this fixes issue https://github.com/magicismight/react-native-root-toast/issues/39 this an awesome library but if you are short on time it would be great to allow others to merge pull requests. Thanks

    opened by jqn 7
  • ERROR: Unable to resolve

    ERROR: Unable to resolve "redux" from "node_modules/react-redux/lib/connect/mapDispatchToProps.js"

    After adding the react-native-root-toast in my project I got this error: Unable to resolve "redux" from "node_modules/react-redux/lib/connect/mapDispatchToProps.js"

    To solve this you can add explicitly the redux package in your project:

    yarn add redux or npm install redux

    opened by samuelpismel 5
  • 【Usage】Is it necessary to call api like Toast.hide(this.toast)?

    【Usage】Is it necessary to call api like Toast.hide(this.toast)?

    Thank you for contributing firstly. I have a question about calling api like Toast.hide(toast) after let toast = Toast.show(...)? That looks like a bit troublesome. I mean, can I directly call Toast.show(...) without Toast.hide(toast)?

    Unfortunately, the memory is continuously speeding up when I press button many times to directly call Toast.show(...) without Toast.hide(toast). Is there any other good ways or suggestions?

    opened by lchenfox 4
  • why it requires

    why it requires "react-native-root-siblings"?

    I like this pure javascript solution, however, why it requires "react-native-root-siblings"? Furthermore, the "react-native-root-siblings" requires react-redux.... is this necessary?

    opened by xinyuwang 4
  • enable toast react component elements

    enable toast react component elements

    In some case, people may want to toast something special, toast message may contain images.

    So, I make this pr to help people who to customize their toast messages.

    There is a screenshot:

    image

    opened by hushicai 4
  • undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

    undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

    Hi, I installed "react-native-root-toast" and run the application. I got the error mentioned below:

    ERROR: undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

    I am newbie in React world. Please help me its appreciate me.

    Thanks,

    opened by reactnative103 4
  • replaced legacy methods: componentWillMount, componentWillReceiveProps

    replaced legacy methods: componentWillMount, componentWillReceiveProps

    Fixed the following warnings:

    • componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

    • componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

    opened by shynst 3
  • fixing onPress event + adding children option other than string

    fixing onPress event + adding children option other than string

    • Fixed onPress event that wasn't working, it wasn't firing (Web). Issue is TouchableWithoutFeedback always needs to have child View component. So a component that composes a View isn't enough. So added an extra View around Animated.View
    • Added an option to pass either a string as children prop where we applied textStyle and textColor like before or any type of children

    I tested those modifications in my project with patch-package and it's working great and shouldn't break anything with anyone who has that library installed

    opened by groger 3
  • invariant violation: ViewPropTypes has been removed from react native. migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

    invariant violation: ViewPropTypes has been removed from react native. migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

    Getting below error after upgrading the RN version 0.69.1 when run 'npx react-native run-ios'.

    Error: invariant violation: ViewPropTypes has been removed from react native. migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

    In React-native version 0.69 'ViewPropTypes'. has been removed.

    opened by jainmca21 1
  • ViewPropTypes warnings

    ViewPropTypes warnings

    Hi, after installing this package (v3.3.0) in my RN project (v0.68.1), i seem to be getting this warning:

    ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'
    
    opened by nataly87s 1
  • Installation Error: unable to resolve dependency tree

    Installation Error: unable to resolve dependency tree

    Hi,

    I failed to install the package onto my project. is there any missing dependencies?

    "react": "16.12.0",
    "react-native": "0.61.4",
    

    and here's the installation error:

    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR! 
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   [email protected]"16.12.0" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"16.9.0" from [email protected]
    npm ERR! node_modules/react-native
    npm ERR!   [email protected]"0.61.4" from the root project
    npm ERR!   peer [email protected]">=0.47.0" from [email protected]
    npm ERR!   node_modules/react-native-root-toast
    npm ERR!     [email protected]"*" from the root project
    

    thanks

    opened by ardiansyaherwin 1
  • The 'accessibilityLabel' prop is not accepting by the component. Automation framework is unable to find test ID's.

    The 'accessibilityLabel' prop is not accepting by the component. Automation framework is unable to find test ID's.

    Snippet

    Toast.show(_localize(message), {
                // opacity: 1,
                duration: Toast.durations.LONG,
                backgroundColor: isError ? '#CC0000' : '#007E33',
                position: Toast.positions.TOP,
                shadow: true,
                animation: true,
                hideOnPress: true,
                delay: 0,
                textStyle: { flex: 1, fontSize: 13 },
                onShow: () => {
                    // isCommonToastActive = true
                },
                onShown: () => {
                    // calls on toast\`s appear animation end.
                },
                onHide: () => {
                    // calls on toast\`s hide animation start.
                },
                onHidden: () => {
                    // isCommonToastActive = false
                },
                testID: `toast message`,
                accessibilityLabel: `toast message`
            });
    

    The prop accessibilityLabel is not displayed in automation test tools(Testproject). Is there is any other way to achieve this? Thanks.

    opened by vetrivendhan48 1
Owner
Horcrux
Front-end engineer graduated from Hogwarts school of codecraft and programry.
Horcrux
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations

react-native-customizable-toast yet another toast library based on reanimated 2 layout animations Features Imperative API Fully Customizable Custom to

kubilay 90 Sep 25, 2022
A pure JavaScript solution for react native`s modal component

react-native-root-modal Features Pure javascript solution, easy to install. Support both React element way and javascript class way to invoke, easy to

Horcrux 359 Jul 25, 2022
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Sep 28, 2022
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 544 Sep 27, 2022
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Ben-hur Santos Ott 1.6k Sep 24, 2022
Pure JavaScript material menu component for React Native

react-native-material-menu · Pure JavaScript material menu component for React Native with automatic RTL support. Install Using yarn yarn add react-na

Maksim Milyutin 451 Sep 1, 2022
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
A pure JavaScript Slider> component for react-native

react-native-slider A pure JavaScript <Slider> component for react-native. This is still very much a work in progress, ideas and contributions are ver

Jean Regisser 1.2k Sep 29, 2022
Pure javascript autocomplete input for react-native

react-native-autocomplete-input A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to

Laurence Bortfeld 728 Sep 27, 2022
Pure JavaScript React-Native dialog

react-native-dialog A pure JavaScript React-Native dialog that follows closely the UI of its native counterpart while expanding its features. Features

Matteo Mazzarolo 555 Sep 28, 2022
A native and easy to use toast plugin for react-native

react-native-toast-native React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS; Demo: Getting started $ n

null 99 Sep 10, 2022
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Jean Verster 274 Sep 15, 2022
Toast feedback messages for React Native

React-Native-Toastboard Toast feedback messages for React Native Installation Via NPM npm install react-native-toastboard Via YARN yarn add react-na

Undefined is not defined 22 Sep 9, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
null 133 Sep 20, 2022
:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.

react-native-masonry ?? An easy to use, pure JS react-native component to render a masonry~ish layout for remote images react-native-masonry is built

Brandon Him 1.2k Sep 8, 2022
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 452 Aug 11, 2022
Pure JS react native slider component with one or two markers.

react-native-multi-slider Note: Anyone using RN <=0.18 should use version 0.2.5 Pure JS react native slider component with one or two markers. Options

null 149 May 12, 2022
A pure React Native Component for circular progress bars

React-Native-CircularProgress A pure React Native Component for circular progress bars for iOS. Demo Installation Install library npm i --save react-n

Andy Chrzaszcz 44 Dec 28, 2020