support toast queueing

components/ToastMessage/toastMessage.js

@@ -20,35 +20,99 @@ const config = {
   'shoutem-info': props => <InfoToast {...props} />,
   'shoutem-action': props => <ActionToast {...props} />,
 };
+const toastQueue = [];
 
 function normalizeProps(type, props) {
   const nativeProps = _.pick(props, NATIVE_PROPS_MAP);
 
   return {
     type,
     ...nativeProps,
+    onHide: () => {
+      if (nativeProps.onHide) {
+        nativeProps.onHide();
+      }
+
+      handleQueuedToastFinish(props.id);
+    },
     props,
   };
 }
 
+// Underlying library doesn't support stacking multiple
+// toasts, so we queue them instead
+const queueToast = (toast, id) => {
+  if (_.isEmpty(toastQueue)) {
+    toast();
+  }
+
+  toastQueue.push({
+    id,
+    toast,
+  });
+};
+
+const handleQueuedToastFinish = toastId => {
+  _.remove(toastQueue, toastConfig => toastConfig.id === toastId);
+
+  if (!_.isEmpty(toastQueue)) {
+    // Start the next toast with a bit of a delay to allow
+    // the hide transition to finish
+    _.delay(() => _.head(toastQueue).toast(), 300);
+  }
+};
+
 export const Provider = () => <Toast config={config} />;
 
-const showAction = props => Toast.show(normalizeProps('shoutem-action', props));
+const showAction = props => {
+  const id = _.uniqueId();
+
+  queueToast(
+    () => Toast.show(normalizeProps('shoutem-action', { ...props, id })),
+    id,
+  );
+};
+
+const showInfo = props => {
+  const id = _.uniqueId();
+
+  queueToast(
+    () => Toast.show(normalizeProps('shoutem-info', { ...props, id })),
+    id,
+  );
+};
 
-const showInfo = props => Toast.show(normalizeProps('shoutem-info', props));
+const showSuccess = props => {
+  const id = _.uniqueId();
+
+  queueToast(
+    () => Toast.show(normalizeProps('shoutem-success', { ...props, id })),
+    id,
+  );
+};
 
-const showSuccess = props =>
-  Toast.show(normalizeProps('shoutem-success', props));
+const showError = props => {
+  const id = _.uniqueId();
 
-const showError = props => Toast.show(normalizeProps('shoutem-error', props));
+  queueToast(
+    () => Toast.show(normalizeProps('shoutem-error', { ...props, id })),
+    id,
+  );
+};
+
+const showDefault = props => {
+  const id = _.uniqueId();
+
+  queueToast(() => Toast.show({ ...props, id }), id);
+};
 
 export default {
   Provider,
   showAction,
   showError,
   showSuccess,
   showInfo,
-  show: Toast.show,
+  show: showDefault,
   hide: Toast.hide,
   defaultConfig: config,
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.1.0-beta.1",
+  "version": "6.1.0-beta.2",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",