fix: add a style to prevent Android from breaking when rendering a ka…

…tex via webview (#5570)
RocketChat · Feb 19, 2024 · c4a3f9c · c4a3f9c
1 parent 1beb0d0
commit c4a3f9c
Showing 1 changed file with 8 additions and 3 deletions.
diff --git 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]} />
+			)}
 		/>
 	);
 };