Bugfix: Flex problems fixed for spreadBehaviour prop.

example/src/pages/button/index.tsx

@@ -93,66 +93,76 @@ const ButtonPage = () => {
     }, []);
 
     return <PageContainer
-        isScrollable={false}
         isWorkWithHeaderSpace={false}
+        isScrollable={false}
         style={[
             stylesheet.container
         ]}
     >
-        <ScrollView
-            style={{ width: "100%", flex: 1 }}
-            contentContainerStyle={{ alignItems: "center", paddingBottom: 50 }}
-            showsVerticalScrollIndicator={false}
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+                style={{
+                    borderColor: colors.content.border.subtle,
+                    marginBottom: spaces.spacingMd,
+                    borderRadius: radiuses.form,
+                    borderWidth: borders.line,
+                    padding: spaces.spacingMd,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    minHeight: 120
+                }}
             >
-                <View
+                <Button
+                    spreadBehaviour={BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}
+                    variant={BUTTON_VARIANTS[variantIndex]}
+                    title={title || "Example Button"}
+                    isCustomPadding={isCustomPadding}
+                    type={BUTTON_TYPES[typeIndex]}
+                    size={BUTTON_SIZES[sizeIndex]}
+                    iconDirection={iconDirection}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    icon={showIcon ? ({
+                        color,
+                        size
+                    }) => <HomeIcon
+                        color={colors.content.icon[color]}
+                        size={size}
+                    /> : undefined}
                     style={{
-                        borderColor: colors.content.border.subtle,
-                        marginBottom: spaces.spacingMd,
-                        borderRadius: radiuses.form,
-                        borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        minHeight: 120,
-                        alignItems: "center",
-                        justifyContent: "center"
+                        marginBottom: spaces.spacingLg
                     }}
-                >
-                    <Button
-                        title={title || "Example Button"}
-                        spreadBehaviour={BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}
-                        type={BUTTON_TYPES[typeIndex]}
-                        variant={BUTTON_VARIANTS[variantIndex]}
-                        size={BUTTON_SIZES[sizeIndex]}
-                        isLoading={isLoading}
-                        isDisabled={isDisabled}
-                        isCustomPadding={isCustomPadding}
-                        iconDirection={iconDirection}
-                        icon={showIcon ? ({ color, size }) => <HomeIcon color={color as string} size={size} /> : undefined}
-                        style={{
-                            marginBottom: spaces.spacingLg
-                        }}
-                        onPress={() => {
-                        }}
-                    />
-                </View>
-                <TextInput
-                    value={title}
-                    onChangeText={setTitle}
-                    placeholder="Enter text"
-                    title="Button Title"
-                    style={{
-                        marginBottom: spaces.spacingMd
+                    onPress={() => {
                     }}
                 />
+            </View>
+            <TextInput
+                spreadBehaviour="stretch"
+                placeholder="Enter text"
+                onChangeText={setTitle}
+                title="Button Title"
+                value={title}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            />
+            <View
+                style={{
+                    gap: spaces.spacingMd,
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                    width: "100%"
+                }}
+            >
                 <Button
                     title={`Change Type: ${BUTTON_TYPES[typeIndex]}`}
                     spreadBehaviour="free"
                     variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setTypeIndex((typeIndex + 1) % BUTTON_TYPES.length);
                     }}
@@ -161,7 +171,7 @@ const ButtonPage = () => {
                     title={`Change Variant: ${BUTTON_VARIANTS[variantIndex]}`}
                     spreadBehaviour="free"
                     variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setVariantIndex((variantIndex + 1) % BUTTON_VARIANTS.length);
                     }}
@@ -170,7 +180,7 @@ const ButtonPage = () => {
                     title={`Change Spread: ${BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}`}
                     spreadBehaviour="free"
                     variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setSpreadIndex((spreadIndex + 1) % BUTTON_SPREAD_BEHAVIOURS.length);
                     }}
@@ -179,22 +189,16 @@ const ButtonPage = () => {
                     title={`Change Size: ${BUTTON_SIZES[sizeIndex]}`}
                     spreadBehaviour="free"
                     variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setSizeIndex((sizeIndex + 1) % BUTTON_SIZES.length);
                     }}
                 />
                 <Button
                     title={`Toggle Icon: ${showIcon ? "ON" : "OFF"}`}
+                    variant={showIcon ? "filled" : "outline"}
                     spreadBehaviour="free"
-                    variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
-                    icon={showIcon ? ({
-                        size
-                    }) => <HomeIcon
-                        color={"white"}
-                        size={size}
-                    /> : undefined}
+                    size="small"
                     onPress={() => {
                         setShowIcon(!showIcon);
                     }}
@@ -203,40 +207,40 @@ const ButtonPage = () => {
                     title={`Toggle Icon Direction: ${iconDirection}`}
                     spreadBehaviour="free"
                     variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setIconDirection(iconDirection === "left" ? "right" : "left");
                     }}
                 />
                 <Button
                     title={`Toggle Loading: ${isLoading ? "ON" : "OFF"}`}
+                    variant={isLoading ? "filled" : "outline"}
                     spreadBehaviour="free"
-                    variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setIsLoading(!isLoading);
                     }}
                 />
                 <Button
                     title={`Toggle Disabled: ${isDisabled ? "ON" : "OFF"}`}
+                    variant={isDisabled ? "filled" : "outline"}
                     spreadBehaviour="free"
-                    variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setIsDisabled(!isDisabled);
                     }}
                 />
                 <Button
                     title={`Toggle Custom Padding: ${isCustomPadding ? "ON" : "OFF"}`}
+                    variant={isCustomPadding ? "filled" : "outline"}
                     spreadBehaviour="free"
-                    variant="outline"
-                    style={{ marginBottom: spaces.spacingMd }}
+                    size="small"
                     onPress={() => {
                         setIsCustomPadding(!isCustomPadding);
                     }}
                 />
             </View>
-        </ScrollView>
+        </View>
     </PageContainer>;
 };
 export default ButtonPage;

src/components/button/index.tsx

@@ -130,7 +130,11 @@ const Button: FC<IButtonProps> = ({
         iconProps.customColor = colors.system.state.content.disabled[stateType];
     }
 
-    const renderIcon = () => {
+    const renderIcon = (direction: "left" | "right") => {
+        if(iconDirection !== direction) {
+            return null;
+        }
+
         if(!isDisabled && !isLoading) {
             if(customTextColor) {
                 const _customTextColor = customTextColor as keyof NCoreUIKit.ProjectColorPalette;
@@ -207,8 +211,9 @@ const Button: FC<IButtonProps> = ({
             containerDynamicStyle
         ]}
     >
-        {renderIcon()}
+        {renderIcon("left")}
         {renderTitle()}
+        {renderIcon("right")}
 
         {renderOverlay()}
     </TouchableOpacity>;

src/components/button/stylesheet.ts

@@ -199,7 +199,8 @@ export const useStyles = ({
             paddingLeft: currentSize.paddingHorizontal,
             paddingTop: currentSize.paddingVertical,
             borderRadius: radiuses.actions,
-            borderWidth: borders.line
+            borderWidth: borders.line,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         title: {
         } as Mutable<TextStyle>,
@@ -269,11 +270,12 @@ export const useStyles = ({
             }
         }
     }
-
     if (icon && title) {
         if (iconDirection === "left") {
+            styles.title.margin = undefined;
             styles.title.marginLeft = spaces.spacingSm;
         } else {
+            styles.title.margin = undefined;
             styles.title.marginRight = spaces.spacingSm;
         }
     }

src/components/checkBox/stylesheet.ts

@@ -134,7 +134,8 @@ export const useStyles = ({
 
     const styles = {
         container: {
-            padding: spaces.spacingSm
+            padding: spaces.spacingSm,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         indicatorContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],

src/components/chip/stylesheet.ts

@@ -111,7 +111,8 @@ export const useStyles = ({
             paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,
             paddingVertical: size === "small" ? spaces.spacingXs : spaces.spacingSm,
             backgroundColor: colors.content.container[currentType.containerColor],
-            borderRadius: radiuses.chip
+            borderRadius: radiuses.chip,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         titleContainer: {
         } as Mutable<ViewStyle>,

src/components/dateTimePicker/stylesheet.ts

@@ -177,6 +177,7 @@ export const useStyles = ({
 
     const styles = {
         container: {
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         contentContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],

src/components/highlightButton/index.tsx

@@ -105,7 +105,11 @@ const HighlightButton: FC<IHighlightButtonProps> = ({
         iconProps.customColor = colors.system.state.content.disabled[stateType];
     }
 
-    const renderIcon = () => {
+    const renderIcon = (direction: "left" | "right") => {
+        if(iconDirection !== direction) {
+            return null;
+        }
+
         if(!isDisabled && !isLoading) {
             if(customTextColor) {
                 const _customTextColor = customTextColor as keyof NCoreUIKit.ProjectColorPalette;
@@ -182,8 +186,9 @@ const HighlightButton: FC<IHighlightButtonProps> = ({
             containerDynamicStyle
         ]}
     >
-        {renderIcon()}
+        {renderIcon("left")}
         {renderTitle()}
+        {renderIcon("right")}
 
         {renderOverlay()}
     </TouchableOpacity>;

src/components/highlightButton/stylesheet.ts

@@ -169,6 +169,7 @@ export const useStyles = ({
             paddingTop: currentSize.paddingVertical,
             borderRadius: radiuses.actions,
             borderWidth: borders.line / 4,
+            alignSelf: "auto",
             ...webStyle({
                 boxShadow: `inset 0 0px 0.5px ${currentType.borderColor}, inset 0 -2px 6px ${currentType.borderColor}, 0 10px 30px ${currentType.borderColor}`,
                 WebkitBackdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`,
@@ -220,8 +221,10 @@ export const useStyles = ({
 
     if (icon && title) {
         if (iconDirection === "left") {
+            styles.title.margin = undefined;
             styles.title.marginLeft = spaces.spacingSm;
         } else {
+            styles.title.margin = undefined;
             styles.title.marginRight = spaces.spacingSm;
         }
     }

src/components/notificationIndicator/stylesheet.ts

@@ -107,7 +107,8 @@ export const useStyles = ({
 
     const styles = {
         container: {
-            padding: spaces.spacingSm
+            padding: spaces.spacingSm,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         indicatorContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],

src/components/numericInput/stylesheet.ts

@@ -194,6 +194,7 @@ export const useStyles = ({
 
     const styles = {
         container: {
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         content: {
             minWidth: (typography.labelLargeSize.fontSize * 2) + (spaces.spacingMd * 2),

src/components/pageContainer/index.tsx

@@ -50,6 +50,7 @@ const PageContainer: FC<IPageContainerProps> = ({
             keyboardShouldPersistTaps="handled"
             {...scrollViewProps}
             contentContainerStyle={[
+                stylesheet.contentContainer,
                 isCustomPadding ? null : {
                     padding: spaces.spacingMd,
                     paddingTop: spaces.spacingMd + (isWorkWithHeaderSpace ? configs.headerSpace : 0)
@@ -80,6 +81,7 @@ const PageContainer: FC<IPageContainerProps> = ({
         return <View
             {...props}
             style={[
+                stylesheet.contentContainer,
                 {
                     backgroundColor: colors.content.container[backgroundColor]
                 },

src/components/pageContainer/stylesheet.ts

@@ -8,6 +8,9 @@ const stylesheet = StyleSheet.create({
     },
     safeAreaViewContainer: {
         flex: 1
+    },
+    contentContainer: {
+        alignItems: "flex-start"
     }
 });
 export default stylesheet;

src/components/radioButton/stylesheet.ts

@@ -138,7 +138,8 @@ export const useStyles = ({
 
     const styles = {
         container: {
-            padding: spaces.spacingSm
+            padding: spaces.spacingSm,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         indicatorContainer: {
             borderRadius: (RADIO_INDICATOR_SIZE + (spaces.spacingXs * 2) + (borders.line * 2)) / 2,

src/components/selectBox/stylesheet.ts

@@ -176,6 +176,7 @@ export const useStyles = ({
 
     const styles = {
         container: {
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         contentContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],

src/components/sticker/stylesheet.ts

@@ -94,7 +94,8 @@ export const useStyles = ({
             paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,
             paddingVertical: size === "small" ? spaces.spacingXs : spaces.spacingSm,
             backgroundColor: colors.content.container[currentType.containerColor],
-            borderRadius: radiuses.chip
+            borderRadius: radiuses.chip,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         titleContainer: {
         } as Mutable<ViewStyle>,

src/components/switch/stylesheet.ts

@@ -129,7 +129,8 @@ export const useStyles = ({
 
     const styles = {
         container: {
-            padding: spaces.spacingSm
+            padding: spaces.spacingSm,
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         indicatorContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],

src/components/textAreaInput/stylesheet.ts

@@ -203,6 +203,7 @@ export const useStyles = ({
 
     const styles = {
         container: {
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         content: {
             backgroundColor: colors.content.container[currentType.containerColor],

src/components/textInput/stylesheet.ts

@@ -195,6 +195,7 @@ export const useStyles = ({
 
     const styles = {
         container: {
+            alignSelf: "auto"
         } as Mutable<ViewStyle>,
         content: {
             backgroundColor: colors.content.container[currentType.containerColor],