From 7ea54cf5899facf5766c51f1d120c66d79a2b010 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Sun, 25 Sep 2022 15:45:56 +0500 Subject: [PATCH 1/2] useMemo for RenderHtml props to avoid rerenders --- .../postHtmlRenderer/postHtmlRenderer.tsx | 141 ++++++++++++------ 1 file changed, 92 insertions(+), 49 deletions(-) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index b12e64616..9ccef58f0 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -1,4 +1,4 @@ -import React, { memo } from 'react'; +import React, { memo, useMemo } from 'react'; import RenderHTML, { CustomRendererProps, Element, TNode } from 'react-native-render-html'; import styles from './postHtmlRendererStyles'; import { LinkData, parseLinkData } from './linkDataParser'; @@ -152,22 +152,22 @@ export const PostHtmlRenderer = memo( onElementIsImage(imgUrl); } - + //this avoids invalid rendering of first element of table pushing rest of columsn to extreme right. - if(element.tagName === 'table'){ + if (element.tagName === 'table') { console.log('table detected') - element.children.forEach((child)=>{ - if(child.name === 'tr'){ + element.children.forEach((child) => { + if (child.name === 'tr') { let headerIndex = -1; let colIndex = -1; - + child.children.forEach((gChild, index) => { //check if element of row in table is not a column while it's other siblings are columns - if(gChild.type === 'tag'){ - if(gChild.name !== 'td' && headerIndex === -1){ + if (gChild.type === 'tag') { + if (gChild.name !== 'td' && headerIndex === -1) { headerIndex = index; - }else if(colIndex === -1){ + } else if (colIndex === -1) { colIndex = index } } @@ -175,7 +175,7 @@ export const PostHtmlRenderer = memo( //if row contans a header with column siblings //remove first child and place it as first separate row in table - if(headerIndex !== -1 && colIndex !== -1 && headerIndex < colIndex){ + if (headerIndex !== -1 && colIndex !== -1 && headerIndex < colIndex) { console.log("time to do some switching", headerIndex, colIndex); const header = child.children[headerIndex]; const headerRow = new Element('tr', {}, [header]); @@ -286,7 +286,7 @@ export const PostHtmlRenderer = memo( // const tableProps = useHtmlTableProps(props); let maxColumns = 0; - props.tnode.children.forEach((child)=> + props.tnode.children.forEach((child) => maxColumns = child.children.length > maxColumns ? child.children.length : maxColumns ) @@ -328,56 +328,99 @@ export const PostHtmlRenderer = memo( }; - return ( - ({ + a: styles.a, + img: styles.img, + table: styles.table, + tr: { ...styles.tr, width: contentWidth }, //center tag causes tr to have 0 width if not exclusivly set, contentWidth help avoid that + th: { ...styles.th, minWidth: _minTableColWidth }, + td: { ...styles.td, minWidth: _minTableColWidth }, + div: { ...styles.div, maxWidth: contentWidth }, //makes sure width covers the available horizontal space for view and not exceed the contentWidth if parent bound id not defined + blockquote: styles.blockquote, + code: styles.code, + li: styles.li, + p: styles.p, + h6: styles.h6 + }), + [contentWidth] + ); + + const baseStyle = useMemo( + () => ( + { ...styles.baseStyle, width: contentWidth } + ), + [contentWidth] + ); + + const classesStyles = useMemo( + () => ( + { phishy: styles.phishy, 'text-justify': styles.textJustify, 'text-center': styles.textCenter, - }} - tagsStyles={{ - body: styles.body, - a: styles.a, - img: styles.img, - table: styles.table, - tr: { ...styles.tr, width: contentWidth }, //center tag causes tr to have 0 width if not exclusivly set, contentWidth help avoid that - th: { ...styles.th, minWidth: _minTableColWidth }, - td: { ...styles.td, minWidth: _minTableColWidth }, - div: { ...styles.div, maxWidth: contentWidth }, //makes sure width covers the available horizontal space for view and not exceed the contentWidth if parent bound id not defined - blockquote: styles.blockquote, - code: styles.code, - li: styles.li, - p: styles.p, - h6: styles.h6 - }} - domVisitors={{ - onElement: _onElement, - }} - renderers={{ + } + ), + [], + ); + + const renderers = useMemo( + () => ( + { img: _imageRenderer, a: _anchorRenderer, p: _paraRenderer, iframe: _iframeRenderer, table: _tableRenderer - }} + } as any + ), + [], + ); + + const domVisitors = useMemo( + () => ( + { + onElement: _onElement, + } + ), + [], + ); + + const customHTMLElementModels = useMemo( + () => ( + { + iframe: iframeModel, + } + ), + [], + ); + + const renderersProps = useMemo( + () => ( + { + iframe: { + scalesPageToFit: true + }, + } + ), + [], + ); + + return ( + ); From f60235c436be98e193d456664b401a9bc5465bc4 Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Mon, 26 Sep 2022 14:36:05 +0500 Subject: [PATCH 2/2] fixed back navigation failing in login screen --- src/screens/login/container/loginContainer.tsx | 2 ++ src/screens/login/screen/loginScreen.js | 3 +-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/screens/login/container/loginContainer.tsx b/src/screens/login/container/loginContainer.tsx index 2a3b3ef75..2e398c44f 100644 --- a/src/screens/login/container/loginContainer.tsx +++ b/src/screens/login/container/loginContainer.tsx @@ -271,9 +271,11 @@ class LoginContainer extends PureComponent { }; render() { + const { navigation } = this.props; const { isLoading } = this.state; return (