From c4a3f9ce192d421581b4a4c43cff451ae5035089 Mon Sep 17 00:00:00 2001
From: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
Date: Mon, 19 Feb 2024 12:06:09 -0300
Subject: [PATCH] fix: add a style to prevent Android from breaking when
 rendering a katex via webview (#5570)

---
 app/containers/markdown/new/Katex.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/containers/markdown/new/Katex.tsx b/app/containers/markdown/new/Katex.tsx
index ce432a3dc..3dd4b4a01 100644
--- a/app/containers/markdown/new/Katex.tsx
+++ b/app/containers/markdown/new/Katex.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
 import { KaTeX as KaTeXProps } from '@rocket.chat/message-parser';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Katex from 'react-native-katex';
 // eslint-disable-next-line import/no-unresolved
 import MathView, { MathText } from 'react-native-math-view';
-import Katex from 'react-native-katex';
 
+import { isAndroid } from '../../../lib/methods/helpers';
 import { useTheme } from '../../../theme';
 import { DEFAULT_MESSAGE_HEIGHT } from '../../message/utils';
 
@@ -13,11 +15,14 @@ interface IKaTeXProps {
 
 export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	const { colors } = useTheme();
+	const fixAndroidWebviewCrashStyle: StyleProp<ViewStyle> = isAndroid ? { opacity: 0.99, overflow: 'hidden' } : {};
 	return (
 		<MathView
 			math={value}
 			style={{ color: colors.bodyText }}
-			renderError={() => <Katex expression={value} style={{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }} />}
+			renderError={() => (
+				<Katex expression={value} style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]} />
+			)}
 		/>
 	);
 };