[ReactNative]Fix ReactNative column layout issue

source/community/reactnative/src/components/containers/column.js

@@ -96,32 +96,56 @@ export class Column extends React.Component {
 	 * @returns {flex}
 	 */
 
-	flex = (containerViewStyle) => {
-		var flex = 0
-		var columns = this.props.columns
-		const widthArray = columns.map((column) => column.width);
-		var sizeValues = []
-		widthArray.map((value) => {
-			if (Utils.isaNumber(value)) {
-				sizeValues.push(value)
-			}
-		})
-		var minValue = Math.min.apply(null, sizeValues)
-		var maxValue = Math.max.apply(null, sizeValues)
+	flex = (containerViewStyle, flexShrinkType) => {
+		//fix layout issue
+		var flex = 0;
+
 		if (Utils.isaNumber(this.column.width)) {
-			flex = this.column.width / maxValue
+			flex = this.column.width;
+			this.setFlexShrink(containerViewStyle, flexShrinkType, 1);
+		} else if (!this.column || this.column.width === 'auto') {
+			flex = 0;
+			this.setFlexShrink(containerViewStyle, flexShrinkType, 2);
+		} else if (this.column.width === undefined || this.column.width === 'stretch') {
+			flex = 1;
+			containerViewStyle.push({ flexShrink: 1 });
 		}
-		else if (!this.column || this.column.width === 'auto') {
-			if (sizeValues.length == 0) {
-				containerViewStyle.push({ flexWrap: 'wrap' })
-			} else {
-				flex = minValue / maxValue
-			}
+		return flex;
+	}
+	/**
+	 * @description set flexShrink to view
+	 * @param  containerViewStyle the container style
+	 * @param  flexShrinkType which type need to be set flexShrink
+	 * @param  currentViewFlexShrinkType the view flexShrinkType
+	 */
+	setFlexShrink = (containerViewStyle, flexShrinkType, currentViewFlexShrinkType) => {
+		if (flexShrinkType === currentViewFlexShrinkType) {
+			containerViewStyle.push({ flexShrink: 1 });
+		} else if (flexShrinkType > currentViewFlexShrinkType) {
+			containerViewStyle.push({ flexShrink: 0 });
 		}
-		else if (this.column.width === undefined || this.column.width === 'stretch') {
-			flex = 1
+	}
+
+	/**
+	 * @description get which type width need to be flexShrink.
+	 * 0 is pixel 1 is weight 2 is auto 3 is stretch
+	 * Precedence order of displaying elements with the width attribute
+	 * px > weight > auto > stretch
+	 * @param width the column payload width
+	 * @returns {flexShrinkType} 0 is pixel 1 is weight 2 is auto 3 is stretch
+	 */
+	getFlexShrinkType = (width) => {
+		var flexShrinkType = 3;
+		if (Utils.isPixelValue(width) && Utils.isaNumber(width)) {
+			flexShrinkType = 0;
+		} else if (Utils.isaNumber(width)) {
+			flexShrinkType = 1;
+		} else if (!this.column || this.column.width === 'auto') {
+			flexShrinkType = 2;
+		} else {
+			flexShrinkType = 3;
 		}
-		return flex;
+		return flexShrinkType;
 	}
 
 	render() {
@@ -143,11 +167,22 @@ export class Column extends React.Component {
 			spacingStyle.push({ marginLeft: this.spacing })
 		}
 		spacingStyle.push({ flexGrow: 1 });
-
+		// Get flexShrinkType to point which column need to be setted flexShrink:1
+		var columns = this.props.columns;
+		const widthArray = columns.map((column) => column.width);
+		// get flexShrinkType
+		var flexShrinkType = 0;
+		widthArray.map((value) => {
+			const tmpShrink = this.getFlexShrinkType(value);
+			if (tmpShrink > flexShrinkType) {
+				flexShrinkType = tmpShrink;
+			}
+		});
 		if (Utils.isPixelValue(this.column.width) && Utils.isaNumber(this.column.width)) {
-			containerViewStyle.push({ width: parseInt(this.column.width) })
+			containerViewStyle.push({ width: parseInt(this.column.width) });
+			this.setFlexShrink(containerViewStyle, flexShrinkType, 0);
 		} else {
-			containerViewStyle.push({ flex: this.flex(containerViewStyle) })
+			containerViewStyle.push({ flex: this.flex(containerViewStyle, flexShrinkType) });
 		}
 
 		let ActionComponent = React.Fragment;

source/community/reactnative/src/visualizer/payloads/payloads/Column.Auto.json

@@ -0,0 +1,54 @@
+{
+    "type": "AdaptiveCard",
+    "version": "1.3",
+    "body": [
+        {
+            "type": "ColumnSet",
+            "columns": [
+                {
+                    "type": "Column",
+                    "width": "auto",
+                    "items": [
+                        {
+                            "type": "Image",
+                            "url": "https://searchuxcdn.azureedge.net/designerapp/images/servicenow-icon.png",
+                            "size": "Small",
+                            "horizontalAlignment": "Center",
+                            "altText": "Not available"
+                        }
+                    ],
+                    "height": "stretch"
+                },
+                {
+                    "type": "Column",
+                    "width": 8,
+                    "items": [
+                        {
+                            "type": "TextBlock",
+                            "text": "[KB0033192 OneITVSO: Create Repos In a Test Instance and Provide Force Push Access](https://microsoft.service-now.com/kb_view.do?sys_kb_id=713adb5d131fd6003976bc42f244b0f2)",
+                            "color": "Accent",
+                            "size": "Medium",
+                            "weight": "Bolder"
+                        },
+                        {
+                            "type": "TextBlock",
+                            "text": "Last modified {{DATE(2022-03-21T14:02:23Z,SHORT)}}",
+                            "spacing": "None"
+                        },
+                        {
+                            "type": "TextBlock",
+                            "text": " 1. You can create repositories through the web application 2. For links to both Prod and Staging, ...",
+                            "wrap": true,
+                            "maxLines": 3,
+                            "spacing": "Small",
+                            "color": "Dark"
+                        }
+                    ],
+                    "horizontalAlignment": "Center",
+                    "spacing": "Medium"
+                }
+            ]
+        }
+    ],
+    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
+}

source/community/reactnative/src/visualizer/payloads/payloads/index.js

@@ -119,6 +119,10 @@ export default payloads = [
     "title": "Column.Explicit.Size.json",
     "json": require('./Column.Explicit.Size.json')
   },
+  {
+    "title": "Column.Auto.json",
+    "json": require('./Column.Auto.json')
+  },
   {
     "title": "ColumnSet.Empty.json",
     "json": require('./ColumnSet.Empty.json')