@janiscommerce/ui-native 1.5.0 → 1.7.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/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.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactElement } from 'react';
+export declare enum animationTypes {
+    Slide = "slide",
+    Fade = "fade",
+    None = "none"
+}
+interface Props {
+    backgroundColor?: string;
+    isVisible?: boolean;
+    title?: string;
+    subtitle?: string;
+    iconName?: string;
+    textsColor?: string;
+    iconColor?: string;
+    animationType?: animationTypes;
+    duration?: number;
+    onEndDuration?: () => void;
+    children?: ReactElement | null;
+}
+declare const FullScreenMessage: FC<Props>;
+export default FullScreenMessage;

package/dist/components/FullScreenMessage/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
+import { base, primary } from '../../theme/palette';
+import Icon from '../Icon';
+import Text from '../Text';
+export var animationTypes;
+(function (animationTypes) {
+    animationTypes["Slide"] = "slide";
+    animationTypes["Fade"] = "fade";
+    animationTypes["None"] = "none";
+})(animationTypes || (animationTypes = {}));
+const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisible = false, subtitle = '', iconName = '', textsColor = base.white, iconColor = base.white, animationType = animationTypes.Slide, duration = 3000, onEndDuration = () => { }, children = null, ...props }) => {
+    const validTitle = !!title && typeof title === 'string';
+    const validSubtitle = !!subtitle && typeof subtitle === 'string';
+    const validIconName = !!iconName && typeof iconName === 'string';
+    const validPaddingHorizontal = scaledForDevice(50, moderateScale);
+    const validMarginBottomTitle = scaledForDevice(30, moderateScale);
+    const validMarginBottomSubtitle = scaledForDevice(50, moderateScale);
+    const validFontTitle = scaledForDevice(32, moderateScale);
+    const validFontSubtitle = scaledForDevice(16, moderateScale);
+    const validLineHeightTitle = scaledForDevice(40, moderateScale);
+    const styles = StyleSheet.create({
+        container: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: backgroundColor,
+        },
+        title: {
+            fontWeight: 'bold',
+            textAlign: 'center',
+            color: textsColor,
+            paddingHorizontal: validPaddingHorizontal,
+            marginBottom: validMarginBottomTitle,
+            fontSize: validFontTitle,
+            lineHeight: validLineHeightTitle,
+        },
+        subtitle: {
+            textAlign: 'center',
+            color: textsColor,
+            paddingHorizontal: validPaddingHorizontal,
+            marginBottom: validMarginBottomSubtitle,
+            fontSize: validFontSubtitle,
+        },
+    });
+    useEffect(() => {
+        if (isVisible) {
+            setTimeout(() => {
+                onEndDuration();
+            }, duration);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isVisible]);
+    return (<Modal visible={isVisible} animationType={animationType} transparent {...props}>
+			<View style={styles.container}>
+				{children ?? (<>
+						{validTitle && <Text style={styles.title}>{title}</Text>}
+						{validSubtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+						{validIconName && <Icon color={iconColor} size={130} name={iconName}/>}
+					</>)}
+			</View>
+		</Modal>);
+};
+export default FullScreenMessage;

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/index.d.ts

@@ -17,6 +17,8 @@ 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 * 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, };
+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, };

package/dist/index.js

@@ -17,6 +17,8 @@ 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 * 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, };
+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, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.5.0",
+	"version": "1.7.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -43,9 +43,9 @@
 	},
 	"homepage": "https://github.com/janis-commerce/ui-native#readme",
 	"peerDependencies": {
-		"react": ">=17.0.2 <=18.2.0",
-		"react-native": ">=0.67.5 <=0.71.7",
-		"react-native-gesture-handler": ">=2.9.0 <=2.13.4",
+		"react": ">=17.0.2",
+		"react-native": ">=0.67.5",
+		"react-native-gesture-handler": ">=2.9.0",
 		"react-native-reanimated": "2.17.0"
 	},
 	"devDependencies": {