feat: optimize inline latex display for android (#11)

aws-samples · Dec 30, 2024 · d758c29 · d758c29
1 parent bdc1a2b
commit d758c29
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/react-native/src/chat/component/CustomMarkdownRenderer.tsx b/react-native/src/chat/component/CustomMarkdownRenderer.tsx
@@ -575,7 +575,8 @@ const customStyles = StyleSheet.create({
     width: '100%',
   },
   inlineMath: {
-    marginTop: 2,
+    marginTop: Platform.OS === 'android' ? 0 : 2,
+    maxHeight: 24,
   },
   displayMathView: {
     marginVertical: 0,

diff --git a/react-native/src/chat/component/CustomTokenizer.ts b/react-native/src/chat/component/CustomTokenizer.ts
@@ -1,4 +1,5 @@
 import { CustomToken, MarkedLexer, MarkedTokenizer } from 'react-native-marked';
+import { Platform } from 'react-native';
 
 export class CustomTokenizer extends MarkedTokenizer<CustomToken> {
   list(this: MarkedTokenizer<CustomToken>, src: string) {
@@ -27,8 +28,12 @@ export class CustomTokenizer extends MarkedTokenizer<CustomToken> {
       const match = inlineMatch || displayMatch;
       if (match && match.length > 1) {
         const text = match[1].trim();
-        const isDisplayMode = !!displayMatch;
-
+        let isDisplayMode = !!displayMatch;
+        if (isDisplayMode && Platform.OS === 'android') {
+          if (!src.includes('\n\n') && src.includes('\n')) {
+            isDisplayMode = false;
+          }
+        }
         const token: CustomToken = {
           type: 'custom',
           raw: match[0],