Open QuangBinhDinh opened 9 months ago
Having similar issue, that is more related to react-navigation pre-rendering
I handled it by showing loader.
import { useFocusEffect } from '@react-navigation/native'
export const Screen = () => {
const [isReady, setIsReady] = React.useState(false)
useFocusEffect(
useCallback(() => {
setTimeout(() => setIsReady(true), 1000)
return () => setIsReady(false)
}, []),
)
if (!isReady) {
return <Loader />
}
return <HeavyComponent />
}
Decision Table
<yyy>
is not rendered”Good Faith Declaration
Description
I have a very long policy text which contains over 12k words (around 78k chars) on my website and I want to render it on the mobile app. When I try to navigate to the screen contains it, it took 5-6 seconds delay to navigate (video below)
https://github.com/meliorence/react-native-render-html/assets/43164997/77c56acd-fc62-4880-83f3-3083a143b5fb
Note that I also use
@native-html/table-plugin
to render table, but even without using it, the navigation is still laggyHere is my implement code
Any solution to deal with this scenario would be appreciated !
React Native Information
RNRH Version
react-native-render-html version: 6.3.4 @native-html/table-plugin version : 5.3.1
Tested Platforms
Reproduction Platforms
Minimal, Reproducible Example
I try to create an exact version of this scenario but seem I can't (Snack install
@react-navigation/native
failed) . Also myRenderHTML
is using custom fonts and base64 font (you can see in the code) so I don't know how to do it with Snack. But I already created a simple version of this, you can check it here: https://snack.expo.dev/@quangbinh1999/rnrhtml-template. The "very long html" is fetched from my server and you can find it inhtml
variable. I hope this does some help.Additional Notes
No response