@shoutem/ui 6.0.0 → 6.1.0-beta.0

package/components/Icon/assets/checkmark-oval.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1756 4.93236C15.4413 4.82187 15.7262 4.76498 16.0139 4.76498C16.3017 4.76498 16.5866 4.82186 16.8523 4.93236C17.118 5.04285 17.3592 5.20477 17.5621 5.40881L17.5636 5.4103L18.497 6.34364L18.4982 6.34493C19.1882 7.03151 20.1224 7.41664 21.0939 7.41664H22.4273C23.0063 7.41664 23.5617 7.64667 23.9711 8.05612C24.3806 8.46558 24.6106 9.02092 24.6106 9.59997V10.9333C24.6106 11.9049 24.9958 12.8391 25.6823 13.529L25.6836 13.5303L26.617 14.4636L26.6184 14.4651C26.8225 14.668 26.9844 14.9093 27.0949 15.1749C27.2054 15.4406 27.2623 15.7256 27.2623 16.0133C27.2623 16.3011 27.2054 16.586 27.0949 16.8517C26.9844 17.1174 26.8225 17.3586 26.6184 17.5615L26.617 17.563L25.6836 18.4963L25.6821 18.4978C24.9964 19.1874 24.6112 20.1203 24.6106 21.0929V21.0933V22.4266C24.6106 23.0057 24.3806 23.561 23.9711 23.9705C23.5617 24.3799 23.0063 24.61 22.4273 24.61H21.0939H21.0935C20.121 24.6105 19.1881 24.9957 18.4984 25.6815L18.497 25.683L17.5636 26.6163L17.5621 26.6178C17.3592 26.8218 17.118 26.9838 16.8523 27.0943C16.5866 27.2048 16.3017 27.2616 16.0139 27.2616C15.7262 27.2616 15.4413 27.2048 15.1756 27.0943C14.9099 26.9838 14.6687 26.8218 14.4658 26.6178L14.4643 26.6163L13.5309 25.683L13.5295 25.6815C12.8398 24.9957 11.9069 24.6105 10.9344 24.61H10.9339H9.60061C9.02156 24.61 8.46622 24.3799 8.05677 23.9705C7.64731 23.561 7.41728 23.0057 7.41728 22.4266V21.0933L7.41728 21.0929C7.41673 20.1203 7.03154 19.1874 6.34577 18.4978L6.34428 18.4963L5.41095 17.563L5.40945 17.5615C5.20541 17.3586 5.04349 17.1174 4.933 16.8517C4.82251 16.586 4.76562 16.3011 4.76562 16.0133C4.76562 15.7256 4.82251 15.4406 4.933 15.1749C5.04349 14.9093 5.20541 14.668 5.40945 14.4651L5.41094 14.4636L6.34428 13.5303L6.34577 13.5288C7.03154 12.8392 7.41673 11.9063 7.41728 10.9337L7.41728 10.9333V9.59997C7.41728 9.02092 7.64731 8.46558 8.05677 8.05612C8.46622 7.64667 9.02156 7.41664 9.60061 7.41664H10.9339L10.9344 7.41664C11.9069 7.41608 12.8398 7.0309 13.5295 6.34513L13.5309 6.34364L14.4643 5.4103L14.4658 5.40881C14.6687 5.20477 14.9099 5.04285 15.1756 4.93236ZM6.99611 6.99546C6.30535 7.68622 5.91728 8.62309 5.91728 9.59997V10.9329V10.9331V10.9333C5.91684 11.5093 5.6888 12.0618 5.28285 12.4704L5.28213 12.4711L4.35178 13.4015L4.35093 13.4023C4.00711 13.7445 3.73423 14.1511 3.54799 14.599C3.36158 15.0472 3.26562 15.5279 3.26562 16.0133C3.26562 16.4988 3.36158 16.9794 3.54799 17.4276C3.73422 17.8755 4.00707 18.2821 4.35086 18.6242L4.35178 18.6251L5.28213 19.5555L5.28291 19.5563C5.68882 19.9649 5.91684 20.5173 5.91728 21.0933V21.0935V21.0937V22.4266C5.91728 23.4035 6.30535 24.3404 6.99611 25.0312C7.68686 25.7219 8.62373 26.11 9.60061 26.11H10.9335C11.5097 26.1103 12.0623 26.3383 12.471 26.7444L12.4718 26.7451L13.4021 27.6755L13.4032 27.6766C13.7453 28.0203 14.1519 28.2931 14.5996 28.4793C15.0478 28.6657 15.5285 28.7616 16.0139 28.7616C16.4994 28.7616 16.9801 28.6657 17.4283 28.4793C17.876 28.2931 18.2826 28.0203 18.6247 27.6766L18.6258 27.6755L19.5561 26.7451L19.5569 26.7444C19.9656 26.3383 20.5182 26.1103 21.0944 26.11H22.4273C23.4042 26.11 24.341 25.7219 25.0318 25.0312C25.7226 24.3404 26.1106 23.4035 26.1106 22.4266V21.0937C26.1109 20.5176 26.339 19.965 26.745 19.5563L26.7458 19.5555L27.6761 18.6251L27.6772 18.624C28.0209 18.282 28.2937 17.8754 28.4799 17.4276C28.6663 16.9794 28.7623 16.4988 28.7623 16.0133C28.7623 15.5279 28.6663 15.0472 28.4799 14.599C28.2937 14.1512 28.0209 13.7447 27.6772 13.4026L27.6761 13.4015L26.7456 12.4709L26.7447 12.4701C26.3385 12.0614 26.1106 11.508 26.1106 10.9333V9.59997C26.1106 8.62309 25.7226 7.68622 25.0318 6.99546C24.341 6.30471 23.4042 5.91664 22.4273 5.91664H21.0939C20.5192 5.91664 19.9657 5.68871 19.557 5.2824L19.5563 5.28169L18.6258 4.35114L18.6249 4.35022C18.2827 4.00643 17.8761 3.73358 17.4283 3.54734C16.98 3.36094 16.4994 3.26498 16.0139 3.26498C15.5285 3.26498 15.0478 3.36094 14.5996 3.54734C14.1518 3.73359 13.7451 4.00646 13.403 4.35029L13.4021 4.35114L12.4718 5.28149L12.4711 5.28221C12.0624 5.68816 11.51 5.9162 10.9339 5.91664H10.9337H10.9335H9.60061C8.62373 5.91664 7.68686 6.30471 6.99611 6.99546ZM20.5303 13.8637C20.8232 13.5708 20.8232 13.0959 20.5303 12.803C20.2374 12.5101 19.7626 12.5101 19.4697 12.803L14.6667 17.606L12.5303 15.4697C12.2374 15.1768 11.7626 15.1768 11.4697 15.4697C11.1768 15.7626 11.1768 16.2374 11.4697 16.5303L14.1363 19.197C14.4292 19.4899 14.9041 19.4899 15.197 19.197L20.5303 13.8637Z" />
+</svg>

package/components/Icon/assets/checkmark-round.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM20.5303 13.8637C20.8232 13.5708 20.8232 13.0959 20.5303 12.803C20.2374 12.5101 19.7626 12.5101 19.4697 12.803L14.6667 17.606L12.5303 15.4697C12.2374 15.1768 11.7626 15.1768 11.4697 15.4697C11.1768 15.7626 11.1768 16.2374 11.4697 16.5303L14.1363 19.197C14.4292 19.4899 14.9041 19.4899 15.197 19.197L20.5303 13.8637Z"/>
+</svg>

package/components/Icon/assets/error-rectangle.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4 4H11.6C11.2 4 10.9333 4.13333 10.6667 4.4L4.4 10.6667C4.13333 10.9333 4 11.2 4 11.6V20.4C4 20.8 4.13333 21.0667 4.4 21.3333L10.6667 27.6C10.9333 27.8667 11.2 28 11.6 28H20.4C20.8 28 21.0667 27.8667 21.3333 27.6L27.6 21.3333C27.8667 21.0667 28 20.8 28 20.4V11.6C28 11.2 27.8667 10.9333 27.6 10.6667L21.3333 4.4C21.0667 4.13333 20.8 4 20.4 4ZM16 9.66667C16.5523 9.66667 17 10.1144 17 10.6667V16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16V10.6667C15 10.1144 15.4477 9.66667 16 9.66667ZM15 21.3333C15 20.781 15.4477 20.3333 16 20.3333H16.0125C16.5648 20.3333 17.0125 20.781 17.0125 21.3333C17.0125 21.8856 16.5648 22.3333 16.0125 22.3333H16C15.4477 22.3333 15 21.8856 15 21.3333Z" />
+</svg>

package/components/Icon/assets/index.js

@@ -17,6 +17,8 @@ import checkboxOff from './checkbox-off.svg';
 import checkboxOn from './checkbox-on.svg';
 import checkboxRectangleOff from './checkbox-rectangle-off.svg';
 import checkboxRectangleOn from './checkbox-rectangle-on.svg';
+import checkmarkOval from './checkmark-oval.svg';
+import checkmarkRound from './checkmark-round.svg';
 import clearText from './clear-text.svg';
 import clock from './clock.svg';
 import close from './close.svg';
@@ -32,6 +34,7 @@ import edit from './edit.svg';
 import email from './email.svg';
 import equalizer from './equalizer.svg';
 import error from './error.svg';
+import errorrRectangle from './error-rectangle.svg';
 import events from './events.svg';
 import exitToApp from './exit-to-app.svg';
 import eye from './eye.svg';
@@ -137,6 +140,8 @@ export const defaultConfig = [
   { name: 'checkbox-on', icon: checkboxOn },
   { name: 'checkbox-rectangle-off', icon: checkboxRectangleOff },
   { name: 'checkbox-rectangle-on', icon: checkboxRectangleOn },
+  { name: 'checkmark-oval', icon: checkmarkOval },
+  { name: 'checkmark-round', icon: checkmarkRound },
   { name: 'clear-text', icon: clearText },
   { name: 'clock', icon: clock },
   { name: 'close', icon: close },
@@ -152,6 +157,7 @@ export const defaultConfig = [
   { name: 'email', icon: email },
   { name: 'equalizer', icon: equalizer },
   { name: 'error', icon: error },
+  { name: 'error-rectangle', icon: errorrRectangle },
   { name: 'events', icon: events },
   { name: 'exit-to-app', icon: exitToApp },
   { name: 'eye', icon: eye },

package/components/ToastMessage/README.md

@@ -0,0 +1,100 @@
+# Shoutem UI Toasts :bread:
+
+New component used for multiple types of alerts, or simple action prompts. The component is based on the [react-native-toast-message ](https://github.com/calintamas/react-native-toast-message)package, with our wrapper implementation defining custom styled toast types
+
+> You are still free to use the react-native-toast-message show/hide methods directly, through our default export, if you so desire.
+
+## Usage
+
+Most of the time, you will want to use one of the four standard methods of showing a toast using this package.
+
+- Toast.showInfo
+- Toast.showAlert
+- Toast.showError
+- Toast.showSuccess
+
+- Toast.show() and Toast.hide() methods are identical to the ones in the parent library. So if you want to use your own components for alerts, you can do it just like you would normally.
+
+Each of these accepts same set or props / params, but implements different styling and color schemes, according to it's semantic significance. Below are a couple of examples of commonly used methods.
+
+```jsx
+import { Toast } from '@shoutem/ui';
+...
+Toast.showInfo({
+  title: 'Hello world!',
+  message: `This is a message!`,
+  iconSource: { 
+    uri: 'https://townsquare.media/site/341/files/2012/05/Mr.-Trololo.jpg',
+  },
+});
+...
+```
+
+```jsx
+import { Toast } from '@shoutem/ui';
+...
+Toast.showAlert({
+  title: 'Stop',
+  message: `Hammer time`,
+  iconSource: require('../assets/actionIcon.png'),
+  cancelButtonText: 'absolutely not',
+  confirmButtonText: `Hammer zeit!`,
+  onCancel: Toast.hide,
+  onConfirm: () => {
+    console.log('A man of culture....');
+    Toast.hide();
+  }
+});
+...
+```
+
+```jsx
+import { Toast } from '@shoutem/ui';
+...
+Toast.showError({
+  title: 'Error',
+  message: `We've failed to charge your credit card. Please check your CC data`,
+  iconName: 'error',
+  confirmButtonText: `Take me to payment details`,
+  onConfirm: () => {
+    navigateTo('PaymentDetailsScreen');
+    Toast.hide();
+  }
+  autoHide: false,
+});
+...
+```
+
+
+### Props
+
+Currently supported props mainly include "native" props from the parent library, with both, a few exclusions and a some additions. Also, you can pass any kind of custom prop you want, and it will be passed in to your custom toast component
+
+| **Name**                                    | **Type**          | **Default** | **Description**                                                                                                                  |
+|---------------------------------------------|-------------------|-------------|----------------------------------------------------------------------------------------------------------------------------------|
+| title                                       | String            | Required    | Title of the toast message                                                                                                       |
+| message                                     | String            | Required    | Description of the toast message                                                                                                 |
+| iconName                                    | String            | Info        | Name of the existing icon in the UI toolkit that will be used as a leading image                                                 |
+| iconSource                                  | ImageSourceType   | undefined   | Standard image source ( uri object, direct require, ... ). If this prop is passed in, it will take presedence over iconName prop |
+| durationIndicator                           | Bool              | true        | Displays the duration indicator line below the toast, in the duration of the `visibilityTime` prop                               |
+| onConfirm                                   | Function          | undefined   | Callback called when pressing the confirm button                                                                                 |
+| onCancel                                    | Function          | undefined   | Callback called when pressing the cancel button                                                                                  |
+| confirmButtonText                           | String            | undefined   |                                                                                                                                  |
+| cancelButtonText                            | String            | undefined   |                                                                                                                                  |
+| `-- props supported from parent library --` |                   |             |                                                                                                                                  |
+| position                                    | `top` or `bottom` | top         |                                                                                                                                  |
+| visibilityTime                              | Number            | 4000        | How long is the toast displayed                                                                                                  |
+| autoHide                                    | Bool              | true        | Hide automatically after visibilityTime has expired                                                                              |
+| topOffset                                   | Number            | 40          |                                                                                                                                  |
+| bottomOffset                                | Number            | 40          |                                                                                                                                  |
+| keyboardOffset                              | Number            | 10          |                                                                                                                                  |
+| onShow                                      | Function          |             |                                                                                                                                  |
+| onHide                                      | Function          |             |                                                                                                                                  |
+| onPress                                     | Function          |             |                                                                                                                                  |
+
+## BaseToast
+
+This component also exports our base component that contains all of the internal logic that understand how to compose and handle toast message. If you'd like to create a new Toast component, feel free to use the BaseToast, and inject `customToastStyle` prop that will be merged with the default styles, and / or any other prop manipualtion you require. 
+
+
+

package/components/ToastMessage/components/ActionToast.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { connectStyle } from '@shoutem/theme';
+import BaseToast from './BaseToast';
+
+function ActionToast({ style, isVisible, props }) {
+  return (
+    <BaseToast
+      customToastStyle={style}
+      iconName="checkmark-oval"
+      isVisible={isVisible}
+      {...props}
+    />
+  );
+}
+
+ActionToast.propTypes = BaseToast.propTypes;
+
+export default connectStyle('shoutem.ui.ActionToast')(ActionToast);

package/components/ToastMessage/components/BaseToast.js

@@ -0,0 +1,123 @@
+import React, { useMemo } from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { Icon, Image, Text, Touchable, View } from '@shoutem/ui';
+import ToastProgressBar from './ToastProgressBar';
+
+function BaseToast({
+  message,
+  title,
+  style,
+  iconSource,
+  iconName,
+  onConfirm,
+  confirmButtonText,
+  onCancel,
+  cancelButtonText,
+  durationIndicator,
+  visibilityTime,
+  customToastStyle,
+  isVisible,
+}) {
+  const hasConfirmButton = onConfirm && confirmButtonText;
+  const hasCancelButton = onCancel && cancelButtonText;
+  const resolvedStyle = useMemo(() => _.merge(style, customToastStyle), [
+    style,
+    customToastStyle,
+  ]);
+
+  return (
+    <View style={resolvedStyle.container}>
+      <View style={resolvedStyle.detailsContainer}>
+        {iconSource && (
+          <Image source={iconSource} style={resolvedStyle.image} />
+        )}
+        {!iconSource && <Icon name={iconName} style={resolvedStyle.icon} />}
+        <View style={resolvedStyle.textContainer}>
+          {title && <Text style={resolvedStyle.title}>{title}</Text>}
+          {message && <Text style={resolvedStyle.message}>{message}</Text>}
+        </View>
+      </View>
+      {(hasConfirmButton || hasCancelButton) && (
+        <View style={resolvedStyle.buttonContainer}>
+          {hasCancelButton && (
+            <Touchable
+              style={[
+                resolvedStyle.button,
+                resolvedStyle.cancelButton,
+                !hasConfirmButton && resolvedStyle.fullWidthButton,
+              ]}
+              onPress={onCancel}
+            >
+              <Text
+                style={[
+                  resolvedStyle.buttonText,
+                  resolvedStyle.cancelButtonText,
+                ]}
+              >
+                {cancelButtonText}
+              </Text>
+            </Touchable>
+          )}
+          {hasConfirmButton && (
+            <Touchable
+              style={[
+                resolvedStyle.button,
+                resolvedStyle.confirmButton,
+                !hasCancelButton && resolvedStyle.fullWidthButton,
+              ]}
+              onPress={onConfirm}
+            >
+              <Text
+                style={[
+                  resolvedStyle.buttonText,
+                  resolvedStyle.confirmButtonText,
+                ]}
+              >
+                {confirmButtonText}
+              </Text>
+            </Touchable>
+          )}
+        </View>
+      )}
+      <ToastProgressBar
+        duration={visibilityTime}
+        color={resolvedStyle.progressBar.color}
+        visible={isVisible && durationIndicator}
+      />
+    </View>
+  );
+}
+
+BaseToast.propTypes = {
+  isVisible: PropTypes.bool.isRequired,
+  style: PropTypes.object.isRequired,
+  cancelButtonText: PropTypes.string,
+  confirmButtonText: PropTypes.string,
+  customToastStyle: PropTypes.object,
+  durationIndicator: PropTypes.bool,
+  iconName: PropTypes.string,
+  iconSource: PropTypes.any,
+  message: PropTypes.string,
+  title: PropTypes.string,
+  visibilityTime: PropTypes.number,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+};
+
+BaseToast.defaultProps = {
+  customToastStyle: {},
+  title: undefined,
+  message: undefined,
+  confirmButtonText: undefined,
+  cancelButtonText: undefined,
+  onCancel: undefined,
+  onConfirm: undefined,
+  durationIndicator: true,
+  iconName: 'about',
+  iconSource: undefined,
+  visibilityTime: 4000,
+};
+
+export default connectStyle('shoutem.ui.BaseToast')(BaseToast);

package/components/ToastMessage/components/ErrorToast.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { connectStyle } from '@shoutem/theme';
+import BaseToast from './BaseToast';
+
+function ErrorToast({ style, props, isVisible }) {
+  return (
+    <BaseToast
+      customToastStyle={style}
+      isVisible={isVisible}
+      iconName="error-rectangle"
+      {...props}
+    />
+  );
+}
+
+ErrorToast.propTypes = BaseToast.propTypes;
+
+export default connectStyle('shoutem.ui.ErrorToast')(ErrorToast);

package/components/ToastMessage/components/InfoToast.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { connectStyle } from '@shoutem/theme';
+import BaseToast from './BaseToast';
+
+function InfoToast({ style, props, isVisible }) {
+  return (
+    <BaseToast customToastStyle={style} isVisible={isVisible} {...props} />
+  );
+}
+
+InfoToast.propTypes = BaseToast.propTypes;
+
+export default connectStyle('shoutem.ui.InfoToast')(InfoToast);

package/components/ToastMessage/components/SuccessToast.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { connectStyle } from '@shoutem/theme';
+import BaseToast from './BaseToast';
+
+function SuccessToast({ style, props, isVisible }) {
+  return (
+    <BaseToast
+      customToastStyle={style}
+      iconName="checkmark-round"
+      isVisible={isVisible}
+      {...props}
+    />
+  );
+}
+
+SuccessToast.propTypes = BaseToast.propTypes;
+
+export default connectStyle('shoutem.ui.SuccessToast')(SuccessToast);

package/components/ToastMessage/components/ToastProgressBar.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+
+function ToastProgressBar({
+  duration,
+  style,
+  onProgressComplete,
+  color,
+  visible,
+}) {
+  const progressValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!visible) {
+      progressValue.setValue(0);
+      return;
+    }
+
+    Animated.timing(progressValue, {
+      toValue: 1,
+      duration,
+      useNativeDriver: false,
+    }).start(handleAnimationEnd);
+  }, [visible, duration, handleAnimationEnd]);
+
+  const handleAnimationEnd = useCallback(() => {
+    progressValue.setValue(0);
+    if (onProgressComplete) {
+      onProgressComplete();
+    }
+  }, [onProgressComplete, progressValue]);
+
+  return (
+    <View style={style.container}>
+      <Animated.View
+        style={[
+          style.progressBar,
+          {
+            backgroundColor: color,
+            width: progressValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0%', '100%'],
+            }),
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+ToastProgressBar.propTypes = {
+  style: PropTypes.object.isRequired,
+  visible: PropTypes.bool.isRequired,
+  color: PropTypes.string,
+  duration: PropTypes.number,
+  onProgressComplete: PropTypes.func,
+};
+
+ToastProgressBar.defaultProps = {
+  color: '#00AADF',
+  duration: 4000,
+  onProgressComplete: undefined,
+};
+
+export default connectStyle('shoutem.ui.ToastProgressBar')(ToastProgressBar);

package/components/ToastMessage/components/index.js

@@ -0,0 +1,6 @@
+export { default as ActionToast } from './ActionToast';
+export { default as BaseToast } from './BaseToast';
+export { default as ErrorToast } from './ErrorToast';
+export { default as InfoToast } from './InfoToast';
+export { default as SuccessToast } from './SuccessToast';
+export { default as ToastProgressBar } from './ToastProgressBar';

package/components/ToastMessage/index.js

@@ -0,0 +1,2 @@
+export { BaseToast } from './components';
+export { default as Toast } from './toastMessage';

package/components/ToastMessage/toastMessage.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Toast from 'react-native-toast-message';
+import _ from 'lodash';
+import { ActionToast, ErrorToast, InfoToast, SuccessToast } from './components';
+
+const NATIVE_PROPS_MAP = [
+  'position',
+  'visibilityTime',
+  'autoHide',
+  'topOffset',
+  'bottomOffset',
+  'keyboardOffset',
+  'onShow',
+  'onHide',
+  'onPress',
+];
+const config = {
+  'shoutem-success': props => <SuccessToast {...props} />,
+  'shoutem-error': props => <ErrorToast {...props} />,
+  'shoutem-info': props => <InfoToast {...props} />,
+  'shoutem-action': props => <ActionToast {...props} />,
+};
+
+function normalizeProps(type, props) {
+  const nativeProps = _.pick(props, NATIVE_PROPS_MAP);
+
+  return {
+    type,
+    ...nativeProps,
+    props,
+  };
+}
+
+export const Provider = () => <Toast config={config} />;
+
+const showAction = props => Toast.show(normalizeProps('shoutem-action', props));
+
+const showInfo = props => Toast.show(normalizeProps('shoutem-info', props));
+
+const showSuccess = props =>
+  Toast.show(normalizeProps('shoutem-success', props));
+
+const showError = props => Toast.show(normalizeProps('shoutem-error', props));
+
+export default {
+  Provider,
+  showAction,
+  showError,
+  showSuccess,
+  showInfo,
+  show: Toast.show,
+  hide: Toast.hide,
+  defaultConfig: config,
+};

package/index.js

@@ -65,6 +65,7 @@ export { TabMenu } from './components/TabMenu';
 export { Caption, Heading, Subtitle, Text, Title } from './components/Text';
 export { TextInput } from './components/TextInput';
 export { Tile } from './components/Tile';
+export { Toast } from './components/ToastMessage';
 export { Touchable } from './components/Touchable';
 export { TouchableNativeFeedback } from './components/TouchableNativeFeedback';
 export { TouchableOpacity } from './components/TouchableOpacity';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.0.0",
+  "version": "6.1.0-beta.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -37,6 +37,7 @@
     "react-native-render-html-table-bridge": "0.6.0",
     "react-native-svg": "12.3.0",
     "react-native-svg-transformer": "1.0.0",
+    "react-native-toast-message": "2.1.5",
     "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
     "stream": "0.0.2",

package/theme.js

@@ -253,6 +253,28 @@ export const defaultThemeVariables = {
   sectionHeaderBackgroundColor: '#F2F2F2',
   indicatorColor: '#222222',
 
+  // Toast Container
+  toastBackgroundColor: '#FFFFFF',
+  toastSuccessBackgroundColor: '#333D27',
+  toastErrorBackgroundColor: '#3D272A',
+  // Toast Text
+  toastTitleColor: '#888FA1',
+  toastSuccessTitleColor: '#B4BDAA',
+  toastErrorTitleColor: '#B4BDAA',
+  toastMessageColor: '#444F6C',
+  toastSuccessMessageColor: '#FFFFFF',
+  toastErrorMessageColor: '#FFFFFF',
+  // Toast Action buttons
+  toastConfirmButtonBackgroundColor: '#444F6C',
+  toastConfirmButtonTextColor: '#FFFFFF',
+  toastCancelButtonTextColor: '#444F6C',
+  toastCancelButtonBackgroundColor: '#F3F4F6',
+  // Toast Progress Bar
+  toastProgressBarBackgroundColor: 'rgba(136, 143, 161, 0.1)',
+  toastProgressBarColor: '#00AADF',
+  toastSuccessProgressBarColor: '#88C242',
+  toastErrorProgressBarColor: '#D0021B',
+
   smallGutter: 5,
   mediumGutter: 15,
   largeGutter: 30,
@@ -3077,5 +3099,167 @@ export default () => {
     'shoutem.ui.ScrollView': {
       contentContainerStyle: {},
     },
+
+    // Toast messages
+
+    'shoutem.ui.ToastProgressBar': {
+      container: {
+        marginTop: responsiveWidth(10),
+        flexDirection: 'row',
+        height: responsiveHeight(2),
+        backgroundColor: 'rgba(136, 143, 161, 0.1)',
+      },
+      progressBar: {
+        flexDirection: 'row',
+        width: '100%',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8,
+      },
+    },
+
+    'shoutem.ui.BaseToast': {
+      container: {
+        width: resolveVariable('sizes.window.width') - responsiveWidth(20),
+        borderRadius: 8,
+        paddingTop: responsiveWidth(12),
+        backgroundColor: resolveVariable('toastBackgroundColor'),
+        shadowColor: '#000000',
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+        overflow: 'hidden',
+        borderWidth: 1,
+        borderColor: '#BDC0CB26',
+      },
+      detailsContainer: {
+        paddingHorizontal: responsiveWidth(12),
+        flexDirection: 'row',
+        flex: 1,
+        alignItems: 'center',
+      },
+      image: {
+        width: responsiveHeight(48),
+        height: responsiveHeight(48),
+        marginRight: responsiveWidth(8),
+        borderRadius: 4,
+      },
+      icon: {
+        width: responsiveWidth(32),
+        height: responsiveWidth(32),
+        marginRight: responsiveWidth(8),
+        color: resolveVariable('toastMessageColor'),
+      },
+      textContainer: {
+        height: responsiveHeight(48),
+        justifyContent: 'space-between',
+      },
+      title: {
+        color: resolveVariable('toastTitleColor'),
+        fontSize: 12,
+        fontFamily: resolveFontFamily(
+          resolveVariable('text.fontFamily'),
+          '400',
+        ),
+        fontWeight: resolveFontWeight('400'),
+        lineHeight: 14,
+      },
+      message: {
+        color: resolveVariable('toastMessageColor'),
+        fontSize: 14,
+        fontFamily: resolveFontFamily(
+          resolveVariable('text.fontFamily'),
+          '400',
+        ),
+        fontWeight: resolveFontWeight('400'),
+        lineHeight: 16,
+      },
+      buttonContainer: {
+        paddingHorizontal: responsiveWidth(12),
+        flexDirection: 'row',
+        flex: 1,
+        justifyContent: 'space-between',
+        marginTop: responsiveHeight(12),
+      },
+      button: {
+        borderRadius: 6,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: responsiveHeight(32),
+        width: '49%',
+        padding: responsiveWidth(8),
+      },
+      fullWidthButton: {
+        width: '100%',
+      },
+      buttonText: {
+        fontSize: 12,
+        fontFamily: resolveFontFamily(
+          resolveVariable('text.fontFamily'),
+          '500',
+        ),
+        fontWeight: resolveFontWeight('500'),
+        lineHeight: 16,
+      },
+      cancelButton: {
+        backgroundColor: resolveVariable('toastCancelButtonBackgroundColor'),
+      },
+      confirmButton: {
+        backgroundColor: resolveVariable('toastConfirmButtonBackgroundColor'),
+      },
+      cancelButtonText: {
+        color: resolveVariable('toastCancelButtonTextColor'),
+      },
+      confirmButtonText: {
+        color: resolveVariable('toastConfirmButtonTextColor'),
+      },
+      progressBar: {
+        color: resolveVariable('toastProgressBarColor'),
+      },
+    },
+    'shoutem.ui.ErrorToast': {
+      container: {
+        backgroundColor: resolveVariable('toastErrorBackgroundColor'),
+        borderWidth: 1,
+      },
+      title: {
+        color: resolveVariable('toastErrorTitleColor'),
+      },
+      message: {
+        color: resolveVariable('toastErrorMessageColor'),
+      },
+      progressBar: {
+        color: resolveVariable('toastErrorProgressBarColor'),
+      },
+      icon: {
+        color: '#D0021B',
+      },
+    },
+    'shoutem.ui.SuccessToast': {
+      container: {
+        backgroundColor: resolveVariable('toastSuccessBackgroundColor'),
+        borderWidth: 1,
+      },
+      title: {
+        color: resolveVariable('toastSuccessTitleColor'),
+      },
+      message: {
+        color: resolveVariable('toastSuccessMessageColor'),
+      },
+      progressBar: {
+        color: resolveVariable('toastSuccessProgressBarColor'),
+      },
+      icon: {
+        color: '#88C242',
+      },
+    },
   };
 };