@janiscommerce/ui-native 1.6.0 → 1.8.0

package/dist/components/BaseButton/index.d.ts

@@ -1,16 +1,10 @@
-import React, { FC } from 'react';
-import { PressableProps, ViewStyle, TextStyle } from 'react-native';
-interface BaseButtonProps extends PressableProps {
-    title?: string | null;
-    icon?: string;
-    iconRight?: boolean;
-    disabled?: boolean;
+import { FC, ReactNode } from 'react';
+import { PressableProps } from 'react-native';
+export interface BaseButtonProps extends PressableProps {
     borderRadius?: number;
-    pressedColor?: string;
-    style?: ViewStyle;
-    iconStyle?: ViewStyle;
-    textStyle?: TextStyle;
-    children?: React.ReactNode;
+    children?: ReactNode | null;
+    pressedStyle?: ReactNode;
+    style?: any;
 }
 declare const BaseButton: FC<BaseButtonProps>;
 export default BaseButton;

package/dist/components/BaseButton/index.js

@@ -1,58 +1,24 @@
 import React from 'react';
 import { Pressable, StyleSheet } from 'react-native';
-import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
-import { palette } from '../../theme/palette';
-import Text from '../Text';
-import Icon from '../Icon';
-const BaseButton = ({ title = null, icon = null, iconRight = false, disabled = false, borderRadius = 0, pressedColor, style, iconStyle, textStyle, children = null, ...props }) => {
-    if (!title && !icon && !children) {
+import { moderateScale, scaledForDevice } from '../../scale';
+const BaseButton = ({ borderRadius = 0, children = null, style, pressedStyle, ...props }) => {
+    if (!children) {
         return null;
     }
-    const bgColor = !disabled ? palette.primary.main : palette.grey[200];
-    const iconPaddingLeft = iconRight && title ? 8 : 0;
-    const iconPaddingRight = !iconRight && title ? 8 : 0;
-    const validatePaddingVertical = scaledForDevice(10, moderateScale);
-    const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
-    const validateFontSize = scaledForDevice(14, moderateScale);
     const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
-    const validatePaddingRightIcon = scaledForDevice(iconPaddingRight, horizontalScale);
-    const validatePaddingLeftIcon = scaledForDevice(iconPaddingLeft, horizontalScale);
     const styles = StyleSheet.create({
         container: {
-            display: 'flex',
-            flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            paddingHorizontal: validatePaddingHorizontal,
-            paddingVertical: validatePaddingVertical,
             borderRadius: validateBorderRadius,
-            backgroundColor: bgColor,
-        },
-        icon: {
-            color: palette.base.white,
-            paddingRight: validatePaddingRightIcon,
-            paddingLeft: validatePaddingLeftIcon,
-        },
-        title: {
-            fontSize: validateFontSize,
-            fontWeight: '500',
-            textAlign: 'center',
-            color: palette.base.white,
         },
     });
-    const noChildren = () => (<>
-			{icon && !iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
-			{title && <Text style={[styles.title, textStyle]}>{title}</Text>}
-			{icon && iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
-		</>);
-    /* istanbul ignore next */
-    const PressableStyle = ({ pressed }) => {
-        const backgroundColor = pressedColor ?? palette.primary.dark;
-        const pressedBgColor = pressed ? [{ backgroundColor }] : [];
-        return [styles.container, style, ...pressedBgColor];
-    };
-    return (<Pressable style={PressableStyle} disabled={disabled} {...props}>
-			{children ?? noChildren}
+    return (<Pressable style={({ pressed }) => [
+            styles.container,
+            style,
+            pressed && /* istanbul ignore next */ pressedStyle,
+        ]} {...props}>
+			{children}
 		</Pressable>);
 };
 export default BaseButton;

package/dist/components/BaseToast/index.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { BaseToastProps as Props } from 'react-native-toast-message';
+export declare enum Types {
+    Success = "success",
+    Notice = "notice",
+    Warning = "warning",
+    Error = "error",
+    Action = "action"
+}
+export interface BaseToastProps extends Props {
+    type?: Types;
+    children: ReactNode;
+    style?: {} | ViewStyle;
+}
+declare const BaseToast: FC<BaseToastProps>;
+export default BaseToast;

package/dist/components/BaseToast/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { black, palette } from '../../theme/palette';
+import { parseType } from './utils';
+export var Types;
+(function (Types) {
+    Types["Success"] = "success";
+    Types["Notice"] = "notice";
+    Types["Warning"] = "warning";
+    Types["Error"] = "error";
+    Types["Action"] = "action";
+})(Types || (Types = {}));
+const defaultType = Types.Notice;
+const BaseToast = ({ children, style, type = defaultType, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const selectedType = parseType[type];
+    const backgroundColor = palette[selectedType]?.main || palette[defaultType]?.main;
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor,
+            elevation: 5,
+            shadowColor: black.shadow,
+        },
+    });
+    return (<View style={[styles.container, style]} {...props}>
+			{children}
+		</View>);
+};
+export default BaseToast;

package/dist/components/BaseToast/utils/index.d.ts

@@ -0,0 +1,7 @@
+export declare const parseType: {
+    notice: string;
+    action: string;
+    success: string;
+    warning: string;
+    error: string;
+};

package/dist/components/BaseToast/utils/index.js

@@ -0,0 +1,7 @@
+export const parseType = {
+    notice: 'primary',
+    action: 'black',
+    success: 'success',
+    warning: 'alert',
+    error: 'error',
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { BaseButtonProps } from '../BaseButton';
+export declare const types: {
+    main: string;
+    secondary: string;
+};
+export declare const variant: {
+    contained: string;
+    outlined: string;
+    text: string;
+};
+export declare const color: {
+    primary: string;
+    black: string;
+    success: string;
+    error: string;
+    warning: string;
+    alert: string;
+};
+export declare const iconPosition: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};
+export type buttonType = typeof types;
+export type keyType = keyof buttonType;
+export type buttonVariant = typeof variant;
+export type keyVariant = keyof buttonVariant;
+export type buttonColor = typeof color;
+export type keyColor = keyof buttonColor;
+export type buttonIconPosition = typeof iconPosition;
+export type keyIconPosition = keyof buttonIconPosition;
+interface ButtonProps extends BaseButtonProps {
+    type?: keyType;
+    variant?: keyVariant;
+    color?: keyColor;
+    isLoading?: boolean;
+    value?: string | null;
+    icon?: string;
+    iconPosition?: keyIconPosition;
+    disabled?: boolean;
+    style?: ViewStyle;
+    pressedStyle?: ViewStyle;
+    iconStyle?: TextStyle;
+    textStyle?: TextStyle;
+}
+declare const Button: FC<ButtonProps>;
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import BaseButton from '../BaseButton';
+import getButtonStyles from './utils/getButtonStyles';
+import Loading from '../Loading';
+import Text from '../Text';
+import Icon from '../Icon';
+export const types = {
+    main: 'main',
+    secondary: 'secondary',
+};
+export const variant = {
+    contained: 'contained',
+    outlined: 'outlined',
+    text: 'text',
+};
+export const color = {
+    primary: 'primary',
+    black: 'black',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    alert: 'alert',
+};
+export const iconPosition = {
+    top: 'top',
+    bottom: 'bottom',
+    left: 'left',
+    right: 'right',
+};
+const Button = ({ type = 'main', variant = 'contained', color = 'primary', iconPosition = 'left', isLoading = false, value = 'Button', icon = null, disabled = false, style, iconStyle, textStyle, ...props }) => {
+    const validDisabled = disabled || isLoading;
+    const hasIconAndText = !!icon && !!value;
+    const borderRadius = variant === 'text' ? 6 : 50;
+    const buttonStyles = getButtonStyles({
+        type,
+        variant,
+        color,
+        iconPosition,
+        isLoading,
+        isDisabled: disabled,
+        hasIconAndText,
+    });
+    const styles = StyleSheet.create(buttonStyles);
+    const LoadingCompontent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24}/>;
+    const WrapperComponent = (<View style={styles.direction}>
+			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
+			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
+		</View>);
+    return (<BaseButton style={[styles.container, style]} pressedStyle={!validDisabled && styles.pressed} borderRadius={borderRadius} disabled={validDisabled} {...props}>
+			{isLoading ? LoadingCompontent : WrapperComponent}
+		</BaseButton>);
+};
+export default Button;

package/dist/components/Button/types/index.d.ts

@@ -0,0 +1,45 @@
+import type { keyColor, keyIconPosition, keyType, keyVariant } from '../';
+export interface SelectedColor {
+    main: string;
+    dark: string;
+}
+export interface Params {
+    type: keyType;
+    variant: keyVariant;
+    color: keyColor;
+    iconPosition: keyIconPosition;
+    isLoading: Boolean;
+    isDisabled: Boolean;
+    hasIconAndText?: Boolean;
+}
+export interface ReturnStyles {
+    container: object;
+    direction: object;
+    pressed: object;
+    icon: object;
+    text: object;
+    loadingColor: any;
+}
+export interface ContainerStyle {
+    isDisabled: Boolean;
+    isLoading: Boolean;
+    color: keyColor;
+    variant: keyVariant;
+    type: keyType;
+    iconPosition: keyIconPosition;
+}
+export interface TextStyle {
+    type: keyType;
+    variant: keyVariant;
+    color: keyColor;
+    isDisabled: Boolean;
+    isLoading: Boolean;
+    hasIconAndText?: Boolean;
+    iconPosition: keyIconPosition;
+}
+export interface LoadingStyle {
+    color: keyColor;
+}
+export interface DirectionStyle {
+    iconPosition: keyIconPosition;
+}

package/dist/components/Button/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/utils/getButtonStyles/index.d.ts

@@ -0,0 +1,3 @@
+import type { Params, ReturnStyles } from '../../types';
+declare const getButtonStyles: (params: Params) => ReturnStyles;
+export default getButtonStyles;

package/dist/components/Button/utils/getButtonStyles/index.js

@@ -0,0 +1,84 @@
+import { moderateScale, scaledForDevice } from '../../../../scale';
+import { palette } from '../../../../theme/palette';
+import { colorConfig, styleConfig } from './utils/styleConfigs';
+import { validTypes, validVariants, validIconPositions, verticalHeights } from './utils/constants';
+import { defaultColor, defaultIconPosition, defaultType, defaultVariant, } from './utils/defaultValues';
+const containerStyle = ({ isDisabled, isLoading, color, variant, type, iconPosition, }) => {
+    const selectedColor = palette[color] || palette[defaultColor];
+    const { main, disabled } = colorConfig(selectedColor);
+    const { container } = styleConfig;
+    const validType = validTypes.includes(type) ? type : defaultType;
+    const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+    const mainBgColor = main.background[validVariant];
+    const mainBorderColor = main.border[validVariant];
+    const disabledBgColor = disabled.background[validVariant];
+    const disabledBorderColor = disabled.border[validType][validVariant];
+    const containerHeight = container.height[validType];
+    // validation of height
+    const hasVerticalHeight = verticalHeights.includes(iconPosition);
+    return {
+        borderWidth: 1,
+        borderColor: isDisabled || isLoading ? disabledBorderColor : mainBorderColor,
+        backgroundColor: isDisabled || isLoading ? disabledBgColor : mainBgColor,
+        paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale),
+        ...(hasVerticalHeight && { paddingVertical: scaledForDevice(10, moderateScale) }),
+        ...(!hasVerticalHeight && {
+            height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale),
+        }),
+    };
+};
+const pressedStyle = ({ variant, color }) => {
+    const selectedColor = palette[color] || palette[defaultColor];
+    const { pressed } = colorConfig(selectedColor);
+    const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+    return {
+        borderColor: pressed.border[validVariant],
+        backgroundColor: pressed.background[validVariant],
+    };
+};
+const directionWrapperStyle = ({ iconPosition }) => {
+    const { directionWrapper } = styleConfig;
+    const flexCenter = directionWrapper.center;
+    const validIconPosition = validIconPositions.includes(iconPosition)
+        ? iconPosition
+        : defaultIconPosition;
+    const flexDirection = directionWrapper.flexDirection[validIconPosition];
+    return {
+        ...flexCenter,
+        flexDirection,
+    };
+};
+const baseTextStyle = ({ isDisabled, type, variant, color, isLoading }) => {
+    const selectedColor = palette[color] || palette[defaultColor];
+    const { main, disabled } = colorConfig(selectedColor);
+    const { text: textStyle } = styleConfig;
+    const validType = validTypes.includes(type) ? type : defaultType;
+    const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+    const mainTextColor = main.text[validType][validVariant];
+    const disabledTextColor = disabled.text[validType][validVariant];
+    return {
+        ...textStyle,
+        color: isDisabled || isLoading ? disabledTextColor : mainTextColor,
+    };
+};
+const textStyle = (params) => ({
+    ...baseTextStyle(params),
+    fontSize: scaledForDevice(14, moderateScale),
+});
+const iconStyle = (params) => {
+    const { hasIconAndText, iconPosition } = params;
+    const { icon } = styleConfig;
+    return {
+        ...baseTextStyle(params),
+        ...((!!hasIconAndText && icon.margin[iconPosition]) || {}),
+    };
+};
+const getButtonStyles = (params) => ({
+    container: containerStyle(params),
+    pressed: pressedStyle(params),
+    direction: directionWrapperStyle(params),
+    text: textStyle(params),
+    icon: iconStyle(params),
+    loadingColor: palette.primary.main,
+});
+export default getButtonStyles;

package/dist/components/Button/utils/getButtonStyles/utils/constants/index.d.ts

@@ -0,0 +1,5 @@
+declare const verticalHeights: string[];
+declare const validTypes: string[];
+declare const validVariants: string[];
+declare const validIconPositions: string[];
+export { verticalHeights, validTypes, validVariants, validIconPositions };

package/dist/components/Button/utils/getButtonStyles/utils/constants/index.js

@@ -0,0 +1,5 @@
+const verticalHeights = ['top', 'bottom'];
+const validTypes = ['main', 'secondary'];
+const validVariants = ['contained', 'outlined', 'text'];
+const validIconPositions = ['top', 'bottom', 'left', 'right'];
+export { verticalHeights, validTypes, validVariants, validIconPositions };

package/dist/components/Button/utils/getButtonStyles/utils/defaultValues/index.d.ts

@@ -0,0 +1,5 @@
+declare const defaultColor = "primary";
+declare const defaultType = "main";
+declare const defaultVariant = "contained";
+declare const defaultIconPosition = "left";
+export { defaultColor, defaultType, defaultVariant, defaultIconPosition };

package/dist/components/Button/utils/getButtonStyles/utils/defaultValues/index.js

@@ -0,0 +1,5 @@
+const defaultColor = 'primary';
+const defaultType = 'main';
+const defaultVariant = 'contained';
+const defaultIconPosition = 'left';
+export { defaultColor, defaultType, defaultVariant, defaultIconPosition };

package/dist/components/Button/utils/getButtonStyles/utils/styleConfigs/index.d.ts

@@ -0,0 +1,118 @@
+import { SelectedColor } from '../../../../types';
+export declare const colorConfig: (selectedColor: SelectedColor) => {
+    main: {
+        background: {
+            contained: string;
+            outlined: string;
+            text: string;
+        };
+        border: {
+            contained: string;
+            outlined: string;
+            text: string;
+        };
+        text: {
+            main: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+            secondary: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+        };
+    };
+    pressed: {
+        background: {
+            contained: string;
+            outlined: string;
+            text: string;
+        };
+        border: {
+            contained: string;
+            outlined: string;
+            text: string;
+        };
+        text: {
+            main: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+            secondary: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+        };
+    };
+    disabled: {
+        background: {
+            contained: string;
+            outlined: string;
+            text: string;
+        };
+        border: {
+            main: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+            secondary: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+        };
+        text: {
+            main: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+            secondary: {
+                contained: string;
+                outlined: string;
+                text: string;
+            };
+        };
+    };
+};
+export declare const styleConfig: {
+    container: {
+        height: {
+            main: number;
+            secondary: number;
+        };
+    };
+    directionWrapper: {
+        center: {
+            justifyContent: string;
+            alignItems: string;
+        };
+        flexDirection: {
+            left: string;
+            right: string;
+            top: string;
+            bottom: string;
+        };
+    };
+    text: {
+        fontWeight: string;
+        textAlign: string;
+    };
+    icon: {
+        margin: {
+            top: {};
+            bottom: {};
+            left: {
+                marginRight: number;
+            };
+            right: {
+                marginLeft: number;
+            };
+        };
+    };
+};

package/dist/components/Button/utils/getButtonStyles/utils/styleConfigs/index.js

@@ -0,0 +1,121 @@
+import { moderateScale, scaledForDevice } from '../../../../../../scale';
+import { base, black, grey, white } from '../../../../../../theme/palette';
+export const colorConfig = (selectedColor) => {
+    return {
+        main: {
+            background: {
+                contained: selectedColor.main,
+                outlined: base.white,
+                text: 'transparent',
+            },
+            border: {
+                contained: 'transparent',
+                outlined: grey[300],
+                text: 'transparent',
+            },
+            text: {
+                main: {
+                    contained: base.white,
+                    outlined: black.main,
+                    text: black.main,
+                },
+                secondary: {
+                    contained: base.white,
+                    outlined: selectedColor.main,
+                    text: selectedColor.main,
+                },
+            },
+        },
+        pressed: {
+            background: {
+                contained: selectedColor.dark,
+                outlined: base.white,
+                text: white.main,
+            },
+            border: {
+                contained: 'transparent',
+                outlined: selectedColor.main,
+                text: 'transparent',
+            },
+            text: {
+                main: {
+                    contained: base.white,
+                    outlined: black.main,
+                    text: black.main,
+                },
+                secondary: {
+                    contained: base.white,
+                    outlined: selectedColor.main,
+                    text: selectedColor.dark,
+                },
+            },
+        },
+        disabled: {
+            background: {
+                contained: grey[200],
+                outlined: grey[100],
+                text: 'transparent',
+            },
+            border: {
+                main: {
+                    contained: 'transparent',
+                    outlined: 'transparent',
+                    text: 'transparent',
+                },
+                secondary: {
+                    contained: 'transparent',
+                    outlined: grey[300],
+                    text: 'transparent',
+                },
+            },
+            text: {
+                main: {
+                    contained: grey[400],
+                    outlined: grey[300],
+                    text: grey[300],
+                },
+                secondary: {
+                    contained: grey[400],
+                    outlined: grey[300],
+                    text: grey[300],
+                },
+            },
+        },
+    };
+};
+export const styleConfig = {
+    container: {
+        height: {
+            main: scaledForDevice(50, moderateScale),
+            secondary: scaledForDevice(42, moderateScale),
+        },
+    },
+    directionWrapper: {
+        center: {
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        flexDirection: {
+            left: 'row',
+            right: 'row-reverse',
+            top: 'column',
+            bottom: 'column-reverse',
+        },
+    },
+    text: {
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    icon: {
+        margin: {
+            top: {},
+            bottom: {},
+            left: {
+                marginRight: scaledForDevice(8, moderateScale),
+            },
+            right: {
+                marginLeft: scaledForDevice(8, moderateScale),
+            },
+        },
+    },
+};

package/dist/components/FullScreenMessage/index.js

@@ -17,9 +17,10 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
     const validPaddingHorizontal = scaledForDevice(50, moderateScale);
     const validMarginBottomTitle = scaledForDevice(30, moderateScale);
     const validMarginBottomSubtitle = scaledForDevice(50, moderateScale);
-    const validFontTitle = scaledForDevice(32, moderateScale);
+    const validFontTitle = scaledForDevice(34, moderateScale);
     const validFontSubtitle = scaledForDevice(16, moderateScale);
     const validLineHeightTitle = scaledForDevice(40, moderateScale);
+    const validLineHeightSubtitle = scaledForDevice(20, moderateScale);
     const styles = StyleSheet.create({
         container: {
             justifyContent: 'center',
@@ -29,7 +30,7 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
             backgroundColor: backgroundColor,
         },
         title: {
-            fontWeight: 'bold',
+            fontFamily: 'Roboto-Medium',
             textAlign: 'center',
             color: textsColor,
             paddingHorizontal: validPaddingHorizontal,
@@ -38,11 +39,13 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
             lineHeight: validLineHeightTitle,
         },
         subtitle: {
+            fontFamily: 'Roboto-Regular',
             textAlign: 'center',
             color: textsColor,
             paddingHorizontal: validPaddingHorizontal,
             marginBottom: validMarginBottomSubtitle,
             fontSize: validFontSubtitle,
+            lineHeight: validLineHeightSubtitle,
         },
     });
     useEffect(() => {

package/dist/components/Select/Components/Modal/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Modal as ModalComponent, StyleSheet, View } from 'react-native';
-import { base, primary, white } from '../../../../theme/palette';
-import BaseButton from '../../../BaseButton';
+import { base } from '../../../../theme/palette';
 import { moderateScale, scaledForDevice } from '../../../../scale';
+import Button from '../../../Button';
 const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
     const validBottom = scaledForDevice(20, moderateScale);
     const validMinWidth = scaledForDevice(270, moderateScale);
@@ -11,7 +11,6 @@ const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
     const validPaddingHorizontal = scaledForDevice(20, moderateScale);
     const validLeft = scaledForDevice(8, moderateScale);
     const validTop = scaledForDevice(4, moderateScale);
-    const validFontSize = scaledForDevice(13, moderateScale);
     const styles = StyleSheet.create({
         background: {
             display: 'flex',
@@ -41,12 +40,7 @@ const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
             left: validLeft,
             top: validTop,
         },
-        button: {
-            backgroundColor: base.white,
-        },
         buttonText: {
-            color: primary.main,
-            fontSize: validFontSize,
             fontWeight: '700',
             textTransform: 'uppercase',
         },
@@ -56,7 +50,7 @@ const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
 				<View style={styles.contentWrapper}>
 					<View style={styles.containerModal}>{children}</View>
 					{isMulti && (<View style={styles.buttonWrapper}>
-							<BaseButton title={modalAcceptText} iconRight={false} pressedColor={white.main} style={styles.button} textStyle={styles.buttonText} onPress={() => setShow(false)}/>
+							<Button value={modalAcceptText} variant={'text'} type={'secondary'} textStyle={styles.buttonText} onPress={() => setShow(false)}/>
 						</View>)}
 				</View>
 			</View>

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TextStyle } from 'react-native';
+import { BaseToastProps } from '../BaseToast';
+export interface ToastProps extends BaseToastProps {
+    props?: {
+        showIcon?: boolean;
+        customIcon?: string;
+        showCloseIcon?: boolean;
+        actionTitle?: string;
+        onCloseCb?: () => void;
+        actionCb?: () => void;
+        iconStyle?: TextStyle;
+    };
+}
+declare const Toast: FC<ToastProps>;
+export default Toast;

package/dist/components/Toast/index.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
+import { defaultIcon } from './utils';
+import { base, black } from '../../theme/palette';
+import BaseToast from '../BaseToast';
+import Text from '../Text';
+import Icon from '../Icon';
+const Toast = ({ type, text1, text2, style, props }) => {
+    const validType = type && typeof type === 'string';
+    const validTitle = text1 && typeof text1 === 'string';
+    const validMessage = text2 && typeof text2 === 'string';
+    if (!validType || !validMessage) {
+        return null;
+    }
+    const { showIcon = false, customIcon = null, showCloseIcon = false, actionTitle = null, onCloseCb = () => { }, actionCb = () => { }, iconStyle = {}, } = props || {};
+    const validColor = type === 'warning' ? black.main : base.white;
+    const defaultIconName = defaultIcon[type] || defaultIcon.notice;
+    const selectedIconName = customIcon || defaultIconName;
+    const horizontalAlign = validTitle ? 'flex-start' : 'center';
+    const styles = StyleSheet.create({
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: horizontalAlign,
+            width: '95%',
+            borderRadius: scaledForDevice(4, moderateScale),
+            paddingHorizontal: scaledForDevice(16, moderateScale),
+            paddingVertical: scaledForDevice(16, moderateScale),
+        },
+        textWrapper: {
+            flex: 1,
+        },
+        title: {
+            fontFamily: 'Roboto-Bold',
+            fontSize: scaledForDevice(18, moderateScale),
+            lineHeight: scaledForDevice(22, moderateScale),
+            marginBottom: scaledForDevice(10, moderateScale),
+            color: validColor,
+        },
+        message: {
+            fontFamily: 'Roboto-Regular',
+            fontSize: scaledForDevice(14, moderateScale),
+            lineHeight: scaledForDevice(20, moderateScale),
+            color: validColor,
+        },
+        icon: {
+            paddingRight: scaledForDevice(10, moderateScale),
+        },
+        feedbackWrapper: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        closeIcon: {
+            paddingLeft: scaledForDevice(10, moderateScale),
+        },
+        actionTitle: {
+            marginRight: scaledForDevice(5, moderateScale),
+            marginLeft: scaledForDevice(10, moderateScale),
+            fontFamily: 'Roboto-Medium',
+            fontSize: scaledForDevice(14, moderateScale),
+            lineHeight: scaledForDevice(16, moderateScale),
+            color: validColor,
+        },
+    });
+    return (<BaseToast type={type} style={[styles.container, style]}>
+			{showIcon && (<Icon name={selectedIconName} color={validColor} size={24} style={{ ...styles.icon, ...iconStyle }}/>)}
+
+			<View style={styles.textWrapper}>
+				{validTitle && <Text style={styles.title}>{text1}</Text>}
+				{validMessage && <Text style={styles.message}>{text2}</Text>}
+			</View>
+
+			<View style={styles.feedbackWrapper}>
+				{actionTitle && (<TouchableOpacity onPress={actionCb} activeOpacity={0.6}>
+						<Text style={styles.actionTitle}>{actionTitle}</Text>
+					</TouchableOpacity>)}
+				{showCloseIcon && (<TouchableOpacity onPress={onCloseCb} activeOpacity={0.6}>
+						<Icon name="cross_light" color={validColor} size={24} style={styles.closeIcon}/>
+					</TouchableOpacity>)}
+			</View>
+		</BaseToast>);
+};
+export default Toast;

package/dist/components/Toast/utils/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ToastProps } from '../';
+export declare const configToast: {
+    success: (props: ToastProps) => React.JSX.Element;
+    notice: (props: ToastProps) => React.JSX.Element;
+    warning: (props: ToastProps) => React.JSX.Element;
+    error: (props: ToastProps) => React.JSX.Element;
+    action: (props: ToastProps) => React.JSX.Element;
+};
+export declare const defaultIcon: {
+    success: string;
+    notice: string;
+    warning: string;
+    error: string;
+    action: string;
+};

package/dist/components/Toast/utils/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Toast from '..';
+export const configToast = {
+    success: (props) => <Toast {...props}/>,
+    notice: (props) => <Toast {...props}/>,
+    warning: (props) => <Toast {...props}/>,
+    error: (props) => <Toast {...props}/>,
+    action: (props) => <Toast {...props}/>,
+};
+export const defaultIcon = {
+    success: 'check_circle_bold',
+    notice: 'info_circle_bold',
+    warning: 'exclamation_triangle_bold',
+    error: 'cross_big_circle_bold',
+    action: 'info_circle_bold',
+};

package/dist/index.d.ts

@@ -17,7 +17,10 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import Button from './components/Button/index';
 import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
+import Toast from 'react-native-toast-message';
+import { configToast } from './components/Toast/utils';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, FullScreenMessage, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };

package/dist/index.js

@@ -17,7 +17,10 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import Button from './components/Button/index';
 import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
+import Toast from 'react-native-toast-message';
+import { configToast } from './components/Toast/utils';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, FullScreenMessage, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };

package/dist/theme/palette.js

@@ -6,6 +6,7 @@ const primary = {
 const black = {
     main: '#2F2F2F',
     dark: '#050505',
+    shadow: '#00000096',
     semiTransparent: '#0000001a',
 };
 const white = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.6.0",
+	"version": "1.8.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -46,6 +46,7 @@
 		"react": ">=17.0.2",
 		"react-native": ">=0.67.5",
 		"react-native-gesture-handler": ">=2.9.0",
+		"react-native-toast-message": ">=1.6.0",
 		"react-native-reanimated": "2.17.0"
 	},
 	"devDependencies": {
@@ -126,6 +127,7 @@
 		"react-native-safe-area-context": "^4.6.4",
 		"react-native-svg": "12.1.1",
 		"react-native-vector-icons": "^9.2.0",
+		"react-native-toast-message": ">=1.6.0",
 		"react-native-web": "^0.15.0"
 	}
 }