Is it possible to use this toast messages in action(Redux) files like an alert

[donni106]

I also want to trigger toasts from elsewhere, not in render of components. Could this be possible?

Edit: I found another package as wrapper around ToastAndroid working also for iOS: https://github.com/onemolegames/react-native-toast-native

[miguelocarvajal]

Same goes for me. Although I prefer to use this library since it is pure JavaScript.

Any ideas?

[nol13]

can create a connected component in app root that shows toaster when some value gets updated.

[samw2k00]

@nol13 do you mind show an example?

[nol13]

class RootToaster extends PureComponent {
 componentDidUpdate(prevProps) {
    if (this.props.alert && this.props.alert !== prevProps.alert) { 
        this.refs.toast.show(this.props.alert.message); 
    }
 }

 render() {
    return <Toast ref="toast"/>;
 }
}

export const ConnectedRootToaster = connect(({alerts}) => ({ alert: alerts.alert}))(RootToaster)

So will show toast every time alerts reducer updates alert object.

[mrcarjul]

class RootToaster extends PureComponent {
 componentDidUpdate(prevProps) {
    if (this.props.alert && this.props.alert !== prevProps.alert) { 
        this.refs.toast.show(this.props.alert.message); 
    }
 }

 render() {
    return <Toast ref="toast"/>;
 }
}

export const ConnectedRootToaster = connect(({alerts}) => ({ alert: alerts.alert}))(RootToaster)

So will show toast every time alerts reducer updates alert object.

Thank you very much!, it worked like a charm :)

[fredattack]

class RootToaster extends PureComponent {
 componentDidUpdate(prevProps) {
    if (this.props.alert && this.props.alert !== prevProps.alert) { 
        this.refs.toast.show(this.props.alert.message); 
    }
 }

 render() {
    return <Toast ref="toast"/>;
 }
}

export const ConnectedRootToaster = connect(({alerts}) => ({ alert: alerts.alert}))(RootToaster)

So will show toast every time alerts reducer updates alert object.

how use this with hooks?

this doesn't work....

 useEffect(() => {
        displayAlert();
    }, props.alert);

    const displayAlert=()=> {
        if (props.alert !== null && this_toast.current != null) {
            this_toast.current.show(props.alert.message);
        }
    }

thank you

[talha-m-dev]

class RootToaster extends PureComponent {
 componentDidUpdate(prevProps) {
    if (this.props.alert && this.props.alert !== prevProps.alert) { 
        this.refs.toast.show(this.props.alert.message); 
    }
 }

 render() {
    return <Toast ref="toast"/>;
 }
}

export const ConnectedRootToaster = connect(({alerts}) => ({ alert: alerts.alert}))(RootToaster)

So will show toast every time alerts reducer updates alert object.

how use this with hooks?

this doesn't work....

 useEffect(() => {
        displayAlert();
    }, props.alert);

    const displayAlert=()=> {
        if (props.alert !== null && this_toast.current != null) {
            this_toast.current.show(props.alert.message);
        }
    }

thank you

import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import Toast from 'react-native-easy-toast';
import { Colors } from '../../Config';

const RootToaster = (props) => {

  useEffect(() => {
    if (props.toastDetail) {
      toast.current.show(props.toastDetail, 2000);
    }
  }, [props]);

  const toast = useRef(null);

  return (
    <Toast
      ref={toast}
      style={{ backgroundColor: Colors.supernova, borderRadius: 25, padding: 10 }}
      position="bottom"
      positionValue={75}
      fadeInDuration={750}
      fadeOutDuration={1000}
    />
  );
};

export default connect((state) => ({ toastDetail: state.events.toastDetails }))(RootToaster);

You can use it as & it's working fine.