Feature: spreadBehaviour prop added to Snackbar and Toast components.

src/components/index.ts

@@ -108,6 +108,7 @@ export {
 } from "./toast";
 
 export type {
+    ToastSpreadBehaviour,
     default as IToastProps
 } from "./toast/type";
 
@@ -116,7 +117,8 @@ export {
 } from "./snackBar";
 
 export type {
-    default as ISnackBarProps
+    default as ISnackBarProps,
+    SnackBarSpreadBehaviour
 } from "./snackBar/type";
 
 export {

src/components/snackBar/index.tsx

@@ -45,6 +45,7 @@ const SnackBar: FC<ISnackBarProps> = ({
     isCloseOnPressActionButton = true,
     closeAnimationDelay = 350,
     openAnimationDelay = 200,
+    spreadBehaviour = "free",
     autoCloseDelay = 5000,
     contentContainerStyle,
     isCloseOnPress = true,
@@ -102,6 +103,7 @@ const SnackBar: FC<ISnackBarProps> = ({
     } = useStyles({
         isInlineSafeArea,
         safeAreaTop: top,
+        spreadBehaviour,
         currentType,
         isFullWidth,
         radiuses,
@@ -352,7 +354,7 @@ const SnackBar: FC<ISnackBarProps> = ({
                 stylesheet.container,
                 containerDynamicStyle,
                 {
-                    width: isFullWidth ? windowWidth : windowWidth - (spaces.spacingMd * 2),
+                    width: isFullWidth ? windowWidth : (spreadBehaviour === "stretch" ? windowWidth - (spaces.spacingMd * 2) : undefined),
                     transform: [
                         {
                             translateY: transformAnim

src/components/snackBar/stylesheet.ts

@@ -106,6 +106,7 @@ const stylesheet = StyleSheet.create({
 
 export const useStyles = ({
     isInlineSafeArea,
+    spreadBehaviour,
     currentType,
     isFullWidth,
     safeAreaTop,
@@ -154,6 +155,16 @@ export const useStyles = ({
         styles.container.top = 0;
     }
 
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    } else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/snackBar/type.ts

@@ -9,10 +9,13 @@ import type {
     NCoreUIKitIcon
 } from "../../types";
 
+export type SnackBarSpreadBehaviour = "baseline" | "stretch" | "free";
+
 export type SnackBarDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
+    spreadBehaviour?: SnackBarSpreadBehaviour;
     isInlineSafeArea?: boolean;
     currentType: SnackBarTypes;
     isFullWidth?: boolean;
@@ -43,6 +46,7 @@ export type SnackBarInternalProps = {
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    spreadBehaviour?: SnackBarSpreadBehaviour;
     isCloseOnPressActionButton?: boolean;
     action?: {
         onPress: (props: {

src/components/toast/index.tsx

@@ -34,6 +34,7 @@ const Toast: FC<IToastProps> = ({
     isCloseOnPressActionButton = true,
     closeAnimationDelay = 350,
     openAnimationDelay = 200,
+    spreadBehaviour = "free",
     autoCloseDelay = 3000,
     contentContainerStyle,
     isCloseOnPress = true,
@@ -82,6 +83,7 @@ const Toast: FC<IToastProps> = ({
         title: titleDynamicStyle
     } = useStyles({
         safeAreaBottom: bottom,
+        spreadBehaviour,
         currentType,
         radiuses,
         subTitle,
@@ -257,7 +259,7 @@ const Toast: FC<IToastProps> = ({
                 stylesheet.container,
                 containerDynamicStyle,
                 {
-                    width: windowWidth - (spaces.spacingMd * 2),
+                    width: spreadBehaviour === "stretch" ? windowWidth - (spaces.spacingMd * 2) : undefined,
                     transform: [
                         {
                             translateY: transformAnim

src/components/toast/stylesheet.ts

@@ -104,6 +104,7 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
+    spreadBehaviour,
     safeAreaBottom,
     currentType,
     radiuses,
@@ -136,10 +137,8 @@ export const useStyles = ({
             marginTop: spaces.spacingXs
         } as Mutable<TextStyle>,
         contentContainer: {
-
         } as Mutable<ViewStyle>,
         title: {
-
         } as Mutable<TextStyle>
     };
 
@@ -147,6 +146,16 @@ export const useStyles = ({
         styles.container.borderRadius = radiuses.lg;
     }
 
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    } else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/toast/type.ts

@@ -9,10 +9,13 @@ import type {
     NCoreUIKitIcon
 } from "../../types";
 
+export type ToastSpreadBehaviour = "baseline" | "stretch" | "free";
+
 export type ToastDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
+    spreadBehaviour?: ToastSpreadBehaviour;
     currentType: ToastTypes;
     safeAreaBottom: number;
     subTitle?: string;
@@ -42,6 +45,7 @@ export type ToastInternalProps = {
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    spreadBehaviour?: ToastSpreadBehaviour;
     isCloseOnPressActionButton?: boolean;
     action?: {
         onPress: (props: {

src/index.tsx

@@ -89,6 +89,7 @@ export type {
     AvatarGroupMeasuresKeys,
     CheckBoxSpreadBehaviour,
     DateTimePickerDateRange,
+    SnackBarSpreadBehaviour,
     AvatarDynamicStyleType,
     AvatarGroupAvatarsType,
     AvatarSizeConstantType,
@@ -104,6 +105,7 @@ export type {
     ILocaleSwitcherProps,
     IMarkdownViewerProps,
     IMarkdownEditorProps,
+    ToastSpreadBehaviour,
     AvatarGroupSizeType,
     ChipSpreadBehaviour,
     DateTimePickerTypes,