How can we use multiple Toast at the same time

[khelifioussama]

if I have 2 Toasts , I receive only the Last Toast

[francisleigh]

Yes, this feature would be great!

[johannbuscail]

Has this been implemented yet ?

[nightness]

Huge reason, I'm about to write my own toast. You can't show more than one at a time, or at least one after another. There is no queue for rapidly added toast messages. ;(

[nightness]

The data needs to be statefully put in to an array. This works for me... https://snack.expo.io/@nightness/toast-snack---bottom

[erhanersoz]

I queued the toasts. Maybe it works for you too. https://snack.expo.io/@erhanersoz/toastqueue

[omeranar1]

did you solve the problem Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

@erhanersoz

---

import React, { useState, useEffect, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import Toast from 'react-native-toast-message';

export default function App() {
   const toastRef = useRef();
  //const toastRef = React.forwardRef((props, ref) => <Toast ref={ref} {...props} />);
  const [toastQueue, setToastQueue] = useState([]);
  const [toastId, setToastId] = useState(1);
  const [toastVisible, setToastVisible] = useState(false);
  const [shownToast, setShownToast] = useState(null);
  let toastTimeout;

  const addToast = () => {
    setToastQueue([...toastQueue, {
      id: toastId,
      text1: toastId.toString(),
      autoHide: false,
      onPress: () => {
        toastRef.current.hide();
      },
      onHide: () => {
        clearTimeout(toastTimeout);
        setShownToast(toastId);
        setToastVisible(false);
      },
      onShow: () => {
        setToastVisible(true);
        toastTimeout = setTimeout(() => {
          toastRef.current.hide();
        }, 4000);
      }
    }]);
    setToastId(toastId + 1);
  };

  useEffect(() => {
    if (toastQueue.length > 0 && !toastVisible) {
      if(toastRef.current!=null)
      { 
      toastRef.current.show(toastQueue[0]);
      setToastVisible(true);
      }
    } 
  }, [toastQueue, toastVisible]);

  useEffect(() => {
    if (toastQueue.length > 0 && shownToast) {
      setToastQueue([...toastQueue.filter((item) => item.id !== shownToast)]);
      setShownToast(null);
    }
  }, [toastQueue, shownToast]);

  return (
    <>
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={() => addToast()}>
          <Text>Create New Toast</Text>
        </TouchableOpacity>
      </View>
      <Toast ref={toastRef} />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#a5e9a0',
    paddingVertical: 15,
    paddingHorizontal: 30,
  }
});

[erhanersoz]

@omeranar1 I don't remember. 😞

[omeranar1]

thank you, I found another package similar to this repo with supporting multiple notifications. problem solved. react-native-toast-notifications

[ArturoTorresMartinez]

Any news about this?

[enestatli]

Any news about this?

We exactly needed same feature in one of our applications so developed a toaster component which supports queue. You can find module here https://www.npmjs.com/package/react-native-toastable

[ammarfaris]

this will be an essential feature.. thanks @calintamas

[FabianMontoya]

Any update?

[iway1]

FYI it's not necessary to put this into state at all can use a global variable to prevent rerenders.