I have a newsData array where multiple news object is coming from the backend and I am rendering that news as a card. after clicking on any card again I am rendering all the newsDatat in horizontal scroll with pagination with the help of intialScrollIndex in another flatlist which is called the details page. Users can swipe left to right or right to left. newsDatat has a description property in the description there are multiple HTML tags. For example Iframe of Twitter and Instagram, blockquote, h1, h2, p, ul, li, and various tags. the details page also has a vertical scroll to scroll the page vertically. The problem is Twitter and Instagram iframe is not taking his full height. the second problem is blockquote tag data is not showing because the script is not loading. The reason behind it is that I am using the react-native-render-html plugin and this plugin doesn't support javascript. I have installed the iframe plugin for Iframes along with webView. please assist me to fix these problems.
plugins which I am using.
- react-native-render-html. 2)react-native-webView. 3)@native-html/iframe-plugin
Project congfiguration expo:"~47.0.14"
For refrence we can refer dailyhunt news application. Afert clicking on any news artical there is horizontal swip with pagination.e.g. Swip for another artical detals.
const customHTMLElementModels = { iframe: HTMLElementModel.fromCustomModel({ tagName: "iframe", mixedUAStyles: { width: "auto", display: "flex", flex: 1, }, contentModel: HTMLContentModel.block, }), video: HTMLElementModel.fromCustomModel({ tagName: "video", mixedUAStyles: {}, contentModel: HTMLContentModel.block, }), img: HTMLElementModel.fromCustomModel({ tagName: "img", mixedUAStyles: { width: "auto", maxWidth: sw - 60, paddingLeft: 30, resizeMode: "contain", marginBottom: 4, }, contentModel: HTMLContentModel.block, }), figure: HTMLElementModel.fromCustomModel({ tagName: "figure", mixedUAStyles: { // margin: 0, // padding: 0, }, contentModel: HTMLContentModel.block, }), };
const renderers = { iframe: IframeRenderer, };
<RenderHtml
renderers={renderers}
WebView={WebView}
source={{ html: myItem.description }}
contentWidth={sw}
enableExperimentalMarginCollapsing={true}
renderersProps={{
ul: {
markerBoxStyle: { paddingRight: 5, top: 0 },
markerTextStyle: { color: Colors[theme].headingtext },
},
ol: {
markerBoxStyle: { paddingRight: 5, top: 0 },
markerTextStyle: { color: Colors[theme].headingtext },
},
iframe: {
scalesPageToFit: true,
webViewProps: {
allowsFullScreen: true,
opacity: 0.99,
androidLayerType:
Platform.OS === "android" && Platform.Version <= 22
? "hardware"
: "none",
renderToHardwareTextureAndroid: true,
},
},
img: {
enableExperimentalPercentWidth: true,
},
}}
customHTMLElementModels={customHTMLElementModels}
baseStyle={{
fontSize: 17,
lineHeight: 22,
letterSpacing: 0,
color: Colors[theme].headingtext,
// paddingHorizontal: 22,
marginBottom: 22,
}}
ignoredDomTags={ignoredDomTags}
systemFonts={systemFonts}
tagsStyles={{
h2: {
// fontSize: 22,
fontSize: storeSlice.configTextSize.h2.size,
// lineHeight: 26,
lineHeight: storeSlice.configTextSize.h2.lineheight,
fontFamily: "Poppins-SemiBold",
color: Colors[theme].headingtext,
margin: 0,
marginBottom: 22,
},
h3: {
// fontSize: 20,
fontSize: storeSlice.configTextSize.h3.size,
// lineHeight: 24,
lineHeight: storeSlice.configTextSize.h3.lineheight,
fontFamily: "Poppins-SemiBold",
color: Colors[theme].headingtext,
margin: 0,
marginBottom: 22,
},
h4: {
// fontSize: 18,
fontSize: storeSlice.configTextSize.h4.size,
// lineHeight: 22,
lineHeight: storeSlice.configTextSize.h4.lineheight,
fontFamily: "Poppins-SemiBold",
color: Colors[theme].headingtext,
margin: 0,
marginBottom: 22,
},
h5: {
// fontSize: 16,
fontSize: storeSlice.configTextSize.text.size,
// lineHeight: 22,
lineHeight: storeSlice.configTextSize.text.lineheight,
fontFamily: "Poppins-SemiBold",
color: Colors[theme].headingtext,
margin: 0,
marginBottom: 22,
},
p: {
// fontSize: 16,
fontSize: storeSlice.configTextSize.text.size,
// lineHeight: 22,
lineHeight: storeSlice.configTextSize.text.lineheight,
fontWeight: "400",
fontFamily: "Poppins-Regular",
color: Colors[theme].headingtext,
margin: 0,
marginBottom: 22,
},
a: {
// fontSize: 16,
fontSize: storeSlice.configTextSize.text.size,
// lineHeight: 22,
lineHeight: storeSlice.configTextSize.text.lineheight,
fontWeight: "400",
fontFamily: "Poppins-Medium",
color: "#0db04b",
},
figure: {
margin: 0,
marginBottom: 30,
display: "flex",
flex: 1,
height: "100%",
justifyContent: "center",
alignItems: "center",
},
iframe: {
marginBottom: -5,
marginTop: 2,
width: sw - 30,
//height: fh,
},
ul: {
listStyleType: "disc",
margin: 0,
marginBottom: 18,
},
ol: {
margin: 0,
marginBottom: 18,
},
li: {
// fontSize: 16,
fontSize: storeSlice.configTextSize.text.size,
// lineHeight: 22,
lineHeight: storeSlice.configTextSize.text.lineheight,
fontWeight: "400",
fontFamily: "Poppins-Regular",
color: Colors[theme].headingtext,
margin: 0,
marginBottom: 5,
},
table: {
borderWidth: 0.5,
borderColor: Colors[theme].shadowColor,
margin: 0,
marginTop: 7,
marginBottom: 28,
},
th: {
borderWidth: 0.5,
borderColor: Colors[theme].shadowColor,
textAlign: "left",
padding: 8,
textAlignVertical: "center",
},
td: {
borderWidth: 0.5,
borderColor: Colors[theme].shadowColor,
textAlign: "left",
padding: 8,
textAlignVertical: "center",
},
}}
/>
This is the RenderHtml code.
I also tried webView but If I enable nestedScrollEnable on details page then pagination horizontal scroll is not working.