vergnet
/
application-amicale
Watch 5
Star 5
Fork 5
Code Issues 0 Pull Requests 0 Releases 5 Wiki Activity
Browse Source

feat: update html render

Arnaud Vergnet 2 years ago
parent
2c11addf40
commit
dc944060e1
3 changed files with 358 additions and 211 deletions
Split View Show Diff Stats
  1. 315
    189
      package-lock.json
  2. 1
    1
      package.json
  3. 42
    21
      src/components/Overrides/CustomHTML.tsx

+ 315
- 189
package-lock.json
File diff suppressed because it is too large
View File


+ 1
- 1
package.json View File 

@@ -48,7 +48,7 @@
48 48 
     "react-native-permissions": "3.0.5",
49 49 
     "react-native-push-notification": "8.1.0",
50 50 
     "react-native-reanimated": "1.13.2",
51 
-    "react-native-render-html": "5.1.1",
51 
+    "react-native-render-html": "6.1.0",
52 52 
     "react-native-safe-area-context": "3.3.2",
53 53 
     "react-native-screens": "3.7.0",
54 54 
     "react-native-splash-screen": "3.2.0",

+ 42
- 21
src/components/Overrides/CustomHTML.tsx View File 

@@ -18,9 +18,13 @@
18 18 
  */
19 19
20 20 
 import * as React from 'react';
21 
-import { Text } from 'react-native-paper';
22 
-import HTML from 'react-native-render-html';
23 
-import { GestureResponderEvent, Linking } from 'react-native';
21 
+import { Text, useTheme } from 'react-native-paper';
22 
+import HTML, {
23 
+  CustomRendererProps,
24 
+  TBlock,
25 
+  TText,
26 
+} from 'react-native-render-html';
27 
+import { Dimensions, GestureResponderEvent, Linking } from 'react-native';
24 28
25 29 
 type PropsType = {
26 30 
   html: string;
 
@@ -30,37 +34,54 @@ type PropsType = {
30 34 
  * Abstraction layer for Agenda component, using custom configuration
31 35 
  */
32 36 
 function CustomHTML(props: PropsType) {
37 
+  const theme = useTheme();
33 38 
   const openWebLink = (_event: GestureResponderEvent, link: string) => {
34 39 
     Linking.openURL(link);
35 40 
   };
36 41
37 
-  const getBasicText = (
38 
-    _htmlAttribs: any,
39 
-    children: any,
40 
-    _convertedCSSStyles: any,
41 
-    passProps: any
42 
-  ) => {
43 
-    return <Text {...passProps}>{children}</Text>;
42 
+  // Why is this so complex?? I just want to replace the default Text element with the one
43 
+  // from react-native-paper
44 
+  // Might need to read the doc a bit more: https://meliorence.github.io/react-native-render-html/
45 
+  // For now this seems to work
46 
+  const getBasicText = (rendererProps: CustomRendererProps<TBlock>) => {
47 
+    let text: TText | undefined;
48 
+    if (rendererProps.tnode.children.length > 0) {
49 
+      const phrasing = rendererProps.tnode.children[0];
50 
+      if (phrasing.children.length > 0) {
51 
+        text = phrasing.children[0] as TText;
52 
+      }
53 
+    }
54 
+    if (text) {
55 
+      return <Text>{text.data}</Text>;
56 
+    } else {
57 
+      return null;
58 
+    }
44 59 
   };
45 60
46 
-  const getListBullet = () => {
47 
-    return <Text>- </Text>;
48 
-  };
49 
-
50 
-  // Surround description with p to allow text styling if the description is not html
51 61 
   return (
52 62 
     <HTML
53 
-      html={`<p>${props.html}</p>`}
63 
+      // Surround description with p to allow text styling if the description is not html
64 
+      source={{ html: `<p>${props.html}</p>` }}
65 
+      // Use Paper Text instead of React
54 66 
       renderers={{
55 67 
         p: getBasicText,
56 68 
         li: getBasicText,
57 69 
       }}
58 
-      listsPrefixesRenderers={{
59 
-        ul: getListBullet,
70 
+      // Sometimes we have images inside the text, just ignore them
71 
+      ignoredDomTags={['img']}
72 
+      // Ignore text color
73 
+      ignoredStyles={['color', 'backgroundColor']}
74 
+      contentWidth={Dimensions.get('window').width - 50}
75 
+      renderersProps={{
76 
+        a: {
77 
+          onPress: openWebLink,
78 
+        },
79 
+        ul: {
80 
+          markerTextStyle: {
81 
+            color: theme.colors.text,
82 
+          },
83 
+        },
60 84 
       }}
61 
-      ignoredTags={['img']}
62 
-      ignoredStyles={['color', 'background-color']}
63 
-      onLinkPress={openWebLink}
64 85 
     />
65 86 
   );
66 87 
 }

Write Preview
Loading…
Cancel
Save