[FIX] App crashing when attachment color is an invalid HEX (#3021)

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -41357,6 +41357,85 @@ exports[`Storyshots Message list message 1`] = `
                   </View>
                 </View>
               </View>
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "#f3f4f5",
+                    "borderColor": "#e1e5e8",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "marginTop": 4,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "padding": 15,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "row",
+                        "flexWrap": "wrap",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Invalid color
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
             </View>
           </View>
         </View>

app/containers/message/Reply.js

@@ -158,6 +158,16 @@ const Reply = React.memo(({
 		openLink(url, theme);
 	};
 
+	let { borderColor, chatComponentBackground: backgroundColor } = themes[theme];
+	try {
+		if (attachment.color) {
+			backgroundColor = transparentize(attachment.color, 0.80);
+			borderColor = attachment.color;
+		}
+	} catch (e) {
+		// fallback to default
+	}
+
 	return (
 		<>
 			<Touchable
@@ -167,8 +177,7 @@ const Reply = React.memo(({
 					index > 0 && styles.marginTop,
 					attachment.description && styles.marginBottom,
 					{
-						backgroundColor: attachment.color ? transparentize(attachment.color, 0.80) : themes[theme].chatComponentBackground,
+						backgroundColor, borderColor
-						borderColor: attachment.color || themes[theme].borderColor
 					}
 				]}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}

storybook/stories/Message.js

@@ -775,6 +775,12 @@ export default ({ theme }) => {
 						value: 'Value 2',
 						short: true
 					}]
+				}, {
+					color: 'ASDASD',
+					fields: [{
+						title: 'Invalid color',
+						short: true
+					}]
 				}]}
 			/>