Plugins for react-native-render-html
License: MIT License
| Package | Release | Build Status | Coverage |
|---|---|---|---|
| @native-html/iframe-plugin |  |
 |
 |
| @native-html/heuristic-table-plugin |  |
 |
 |
| @native-html/table-plugin |  |
 |
 |
| react-native-render-html | iframe | table | heuristic-table |
|---|---|---|---|
| ≥ 4.2.1 < 5.0.0 | No Plugin, iframes were rendered internally | 2.x (documentation) | No Plugin |
| ≥ 5.0.0 < 6.0.0 | 1.x (documentation) | 3.x (documentation) | No Plugin |
| ≥ 6.0.0 | 2.x (documentation) | 4.x (documentation) 5.x (documentation) |
0.x (documentation) |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
It pop "Unrecognized font family 'DengXian'" error, how can i set in style that all will use as fontFamily:system ?
Or is that anyway to ignore the font-family style?
I have tried set baseFontStyle={{ fontFamily:"System" }} but same error shows out.
"<p><span style=\"font-family:DengXian; font-size:15.0pt\">testing</span></p>"
I swear that I have completed these tasks before submitting:
(Write your steps here:)
I have a screen with different html sections.
With using the react-native-render-html-table-bridge renderers, every section without a table gets loss of its content in the moment the table is rendered.
I see the other html sections for a second and than they are away.
Implementation:
import PropTypes from 'prop-types';
import React from 'react';
import HTML from 'react-native-render-html';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import { WebView } from 'react-native-webview';
import { device, normalize, styles } from '../config';
import { openLink } from '../helpers';
const renderers = {
table: makeTableRenderer({
WebViewComponent: WebView
})
};
const htmlConfig = {
alterNode,
renderers,
ignoredTags: IGNORED_TAGS
};
export const HtmlView = (props) => (
<HTML
{...props}
{...htmlConfig}
tagsStyles={{ ...styles.html, ...props.tagsStyles }}
emSize={normalize(16)}
baseFontStyle={styles.baseFontStyle}
imagesMaxWidth={device.width}
staticContentMaxWidth={device.width}
onLinkPress={(evt, href) => openLink(href)}
/>
);
HtmlView.propTypes = {
tagsStyles: PropTypes.object
};
HtmlView.defaultProps = {
tagsStyles: {}
};
On screens with html sections without a table everything still works.
But on screens where somewhere a table is included, this strange disappearing happens.
When I comment out // renderers in the htmlConfig every data is still visible, even from the table, but the table contents are of course not displayed as a table.
How can we fix that?
I swear that I have completed these tasks before submitting:
(Write your steps here:)
(Describe the expected outcome, and compare it to the observed outcome. You are
encouraged to join screenshots and screencasts, or pictures of the rendering
tree from debugging tools such as flipper)
(Paste the link to an example project or paste the entirety of the relevant
source code. When deemed appropriate, provide instructions to reproduce the
issue.)
I swear that I have completed these tasks before submitting:
Expo CLI 4.9.1 environment info:
System:
OS: macOS 11.4
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7486908
Xcode: 12.3/12C33 - /usr/bin/xcodebuild
npmPackages:
expo: ^42.0.0 => 42.0.3
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-navigation: ^4.0.6 => 4.4.4
npmGlobalPackages:
expo-cli: 4.9.1
Expo Workflow: managed
Unfortunately a simple reproduction did not yield the same error. Is there a way to investigate what value causes the NaN in the width calculation? Can it be caused by any parent element?
(Write your steps here:)
ExceptionsManager.js:179 Invariant Violation: [357,"RCTView",1,{"paddingTop":2,"paddingRight":2,"paddingBottom":2,"paddingLeft":2,"flex":1,"flexGrow":1,"flexShrink":0,"width":"<<NaN>>","marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"testID":"td"}] is not usable as a native method argument
This error is located at:
in RCTView (at View.js:34)
in View (created by TDefaultBlockRenderer)
in TDefaultBlockRenderer (created by TdRenderer)
in TdRenderer (created by TBlockRenderer)
in TBlockRenderer (created by MemoizedTNodeRenderer)
in MemoizedTNodeRenderer
in MemoizedTNodeRenderer (at TreeRenderer.tsx:21)
in RCTView (at View.js:34)
in View (at TreeRenderer.tsx:20)
in TreeRenderer (created by TreeRenderer)
in RCTView (at View.js:34)
in View (at TreeRenderer.tsx:42)
in TreeRenderer (created by TreeRenderer)
in RCTView (at View.js:34)
in View (at TreeRenderer.tsx:38)
in TreeRenderer (created by HTMLTable)
in RCTView (at View.js:34)
in View (created by Container)
in Container (at HTMLTable.tsx:55)
in RCTView (at View.js:34)
in View (created by TDefaultBlockRenderer)
in TDefaultBlockRenderer (at HTMLTable.tsx:46)
in HTMLTable (created by TableRenderer)
in TableRenderer (created by TBlockRenderer)
in TBlockRenderer (created by MemoizedTNodeRenderer)
in MemoizedTNodeRenderer
in MemoizedTNodeRenderer (created by TChildrenRenderer)
in TChildrenRenderer (created by TNodeWithChildrenRenderer)
in TNodeWithChildrenRenderer (created by TNodeChildrenRenderer)
in TNodeChildrenRenderer (at TBlockRenderer.tsx:20)
in RCTView (at View.js:34)
in View (created by TDefaultBlockRenderer)
in TDefaultBlockRenderer (created by TBlockRenderer)
in TBlockRenderer (created by MemoizedTNodeRenderer)
in MemoizedTNodeRenderer
in MemoizedTNodeRenderer (created by TChildrenRenderer)
in TChildrenRenderer (created by TNodeWithChildrenRenderer)
in TNodeWithChildrenRenderer (created by TNodeChildrenRenderer)
in TNodeChildrenRenderer (at TBlockRenderer.tsx:20)
in RCTView (at View.js:34)
in View (created by TDefaultBlockRenderer)
in TDefaultBlockRenderer (created by TBlockRenderer)
in TBlockRenderer (created by MemoizedTNodeRenderer)
in MemoizedTNodeRenderer
in MemoizedTNodeRenderer (at TDocumentRenderer.tsx:35)
in Unknown (at RenderTTree.tsx:11)
in RenderTTree (created by SourceLoaderInline)
in SourceLoaderInline (created by RawSourceLoader)
in RawSourceLoader (created by RenderHtmlSource)
in RenderHtmlSource
in RenderHtmlSource (created by RenderHTML)
in RenderersPropsProvider (at RenderHTMLConfigProvider.tsx:72)
in ListStyleSpecsProvider (at RenderHTMLConfigProvider.tsx:71)
in SharedPropsProvider (at RenderHTMLConfigProvider.tsx:70)
in RenderRegistryProvider (at RenderHTMLConfigProvider.tsx:67)
in RenderHTMLConfigProvider (at RenderHTML.tsx:34)
in TRenderEngineProvider (at RenderHTML.tsx:33)
in RenderHTMLDebug (at RenderHTML.tsx:32)
in RenderHTML (at Html.js:76)
in Html (created by Connect(Html))
in Connect(Html) (at OnboardingStart.js:37)
in RCTView (at View.js:34)
in View (at OnboardingStart.js:36)
in RCTView (at View.js:34)
in View (at OnboardingStart.js:34)
in RCTScrollContentView (at ScrollView.js:1124)
in RCTScrollView (at ScrollView.js:1260)
in ScrollView (at ScrollView.js:1286)
in ScrollView (at OnboardingStart.js:33)
in Welcome (created by Connect(Welcome))
in Connect(Welcome) (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:623)
in RNSScreen (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
in Screen (at Screens.tsx:74)
in MaybeScreen (at CardStack.tsx:616)
in RNSScreenContainer (at src/index.native.tsx:186)
in ScreenContainer (at Screens.tsx:50)
in MaybeScreenContainer (at CardStack.tsx:498)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at OnboardingNavigator.js:20)
...
I swear that I have completed these tasks before submitting:
2 Props for injecting styling for row and/or collum of the table. As tagsStyles: { tr: {}} has no effect on style.
2 new Props for TableRenderer, wich receive viewStyleProps for styling the TableFlexRowContainer/TableFlexCollumContainer respectively. This is especially usefull for styles like shadows that have to apply to the container.
styleTableFlexRowContainer = {{
marginBottom: 5,
elevation: 15,
shadowColor: "rgb(0,0,0)",
shadowOffset: { width: 0, height: 12 },
shadowOpacity: 0.12,
shadowRadius: 24,
}}
Hi, I faced a problem on Android only:
If my content has <table> tag, it will render the blank space after the webview and this blank section does not disappear.
As I debugged the render step:
/node_modules/react-native-render-html-table-bridge/lib/HTMLTable/index.js:88:/node_modules/react-native-render-html-table-bridge/lib/HTMLTable/script.jsDeeper dive into /node_modules/react-native-render-html-table-bridge/lib/HTMLTable/script.js:
On android: postSize(); was not work at the first time.
My temporary fix:
I need to retry it:
postSize();
// I added those 2 lines:
setTimeout(() => postSize(), 5000);
setTimeout(() => postSize(), 10000);It a hacky way, not a solution. I cannot figure out the root cause, can anyone fix it?
In Android, if Html in ScrollView and table's columns > 2, it's not easy to scroll table to the left to show other columns. iOS is OK.
<ScrollView>
<HTML
{...htmlConfig}
html={html}
/>
</ScorllView>
I swear that I have completed these tasks before submitting:
I have tried to get the iframe (youtube) to display within the iOS simulator, but it only renders html nodes, which are NOT the iframe.
"@native-html/iframe-plugin": "2.5.0",
"react-native-webview": "11.14.0",
"react-native-render-html": "6.1.0",
RN 0.64
I tried to get it to run with a functional component / class component, no difference
I get this warning:
The "iframe" tag is a valid HTML element but is not handled by this library. You must register a custom renderer or plugin and make sure its content model is not set to "none". If you don't want this tag to be rendered, add it to "ignoredTags" prop array.
This is the last class component i tried:
import React, {Component} from 'react';
import {
StyleSheet,
SafeAreaView,
} from 'react-native';
import IframeRenderer, {iframeModel} from '@native-html/iframe-plugin';
import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';
export default class Oefening extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const htmlContent = `
<h1>VR Lorem ipsum dolor sit amet, consectetur adipiscing elit. !</h1>
<p>iframe</p>
<iframe src="https://www.youtube.com/embed/fnCmUWqKo6g"></iframe>
<p>end iframe</p>
<p>Vivamus bibendum feugiat pretium. <a href="https://reactnativemaster.com/">Vestibulum ultricies rutrum ornare</a>. Donec eget suscipit tortor. Nullam pellentesque nibh sagittis, pharetra quam a, varius sapien. Pellentesque ut leo id mauris hendrerit ultrices et non mauris. Quisque gravida erat at felis tincidunt tincidunt. Etiam sit amet egestas leo. Cras mollis mi sed lorem finibus, interdum molestie magna mollis. Sed venenatis lorem nec magna convallis iaculis.</p>
`;
const renderers = {
iframe: IframeRenderer,
};
const customHTMLElementModels = {
iframe: iframeModel,
};
const source = {
html: htmlContent,
};
return (
<SafeAreaView style={{flex: 1}}>
<RenderHTML
renderers={renderers}
WebView={WebView}
source={{html: htmlContent}}
customHTMLElementModels={customHTMLElementModels}
defaultWebViewProps={
{
/* Any prop you want to pass to all WebViews */
}
}
renderersProps={{
iframe: {
scalesPageToFit: true,
webViewProps: {
/* Any prop you want to pass to iframe WebViews */
},
},
}}
/>
</SafeAreaView>
);
}
}
I swear that I have completed these tasks before submitting:
expo-env-info 1.0.5 environment info:
System:
OS: macOS 13.0.1
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.3 - /Volumes/Data/Datenprojekte/VVP/vvp_App/node_modules/.bin/npm
Watchman: 2022.11.28.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
npmPackages:
expo: ~47.0.8 => 47.0.8
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
npmGlobalPackages:
eas-cli: 2.9.0
expo-cli: 6.0.8
Expo Workflow: bare
Happens on multiple (>6) different Android Devices, so it's definitely an Android Issue.
I Am using Expo App & build App in Simulator
const renderers = {
iframe: IframeRenderer
};
const customHTMLElementModels = {
iframe: iframeModel
};
The Expo App crashes (without any warning or error messages)
What solved this for me was wrapping the Webview into a:
<View renderToHardwareTextureAndroid={true} >...</View>
This seems to be primarily a web view issue, however this fix could also be implemented in this plugin in the meantime.
in the right side and bottom side border is not showing here is the code.
<RenderHTML
contentWidth={width}
source={{
html: html,
}}
renderers={{ table: TableRenderer }}
WebView={WebView}
renderersProps={{
table: {
computeContainerHeight() {
return null;
},
webViewProps: {
style: {
backgroundColor: "transparent",
marginVertical: 10,
alignItems: "center",
borderWidth: 1,
borderColor: "lightgray",
},
nestedScrollEnabled: true,
scalesPageToFit: true,
bounces: false,
},
},
a: {
onPress(event, url, htmlAttribs, target) {
// Do stuff
if (url) {
openLink(url, colors.text, colors.background);
}
},
},
}}
customHTMLElementModels={{
table: tableModel
}}
systemFonts={[
Typography.MuseoSansRegularText,
Typography.MuseoSansBoldText,
]}
enableCSSInlineProcessing={enableCSSInlineProcessing}
baseStyle={contentHeight && { minHeight: contentHeight }}
tagsStyles={{
body: {
// width: "96%",
paddingHorizontal: 10,
fontWeight: "400",
fontFamily: Typography.MuseoSansRegularText,
lineHeight: 24,
alignSelf: "center",
fontSize: 16,
color: colors.text,
...bodyStyle,
},
p: {
fontWeight: "400",
fontFamily: Typography.MuseoSansRegularText,
lineHeight: 24,
fontSize: 16,
color: colors.text,
marginVertical: 0,
...paragraphStyle,
},
span: {
fontWeight: "400",
fontFamily: Typography.MuseoSansRegularText,
lineHeight: 24,
fontSize: 16,
color: colors.text,
},
div: {
fontWeight: "400",
fontFamily: Typography.MuseoSansRegularText,
lineHeight: 24,
fontSize: 16,
color: colors.text,
},
img: {
width: imgWidth || "100%",
resizeMode: "contain",
alignItems: "center",
},
table: commonStyles.table(colors),
tbody: commonStyles.tbody(colors),
td: commonStyles.td(colors),
tr: commonStyles.tr(colors),
th: commonStyles.th(colors),
thead: commonStyles.thead(colors),
tbody: commonStyles.tbody(colors),
}}
/>I swear that I have completed these tasks before submitting:
I'm facing the same problem of this closed issue. I tried your solution but I got the following error
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of HTMLIframe."
Expo CLI 3.20.3 environment info:
System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312
npmPackages:
expo: ~46.0.16 => 46.0.20
react: 18.0.0 => 18.0.0
react-dom: 18.0.0 => 18.0.0
react-native: 0.69.6 => 0.69.6
react-native-web: ~0.18.7 => 0.18.10
react-navigation: ^4.4.4 => 4.4.4
"@native-html/iframe-plugin": "^2.6.1",
"react-native-webview": "^11.26.1",
"react-native-render-html": "^6.3.4",
RN 0.69.6
I'm trying to display the following html inside a react-native-paper List element
<html>
<body>
<h1>The iframe element</h1>
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/M_xq5YB0z-A">
</iframe>
</body>
</html>
the h1 tag is displayed just fine but the iframe tag is not displayed.
So I searched for a solution and found the solution under issue #41 and I tried it. However, when I ran the application it crashed and I got the following error
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of HTMLIframe."
When I searched for the error on Google, it said that it is an import problem so I don't know what to do about it. So if you know what could be the problem or how to get the iframe to render, I would highly appreciate it.
import React, { useEffect, useState } from "react";
import {
View,
SafeAreaView,
ScrollView,
useWindowDimensions,
} from "react-native";
import {
List,
} from "react-native-paper";
import {
iframeModel,
HTMLIframe,
useHtmlIframeProps,
} from "@native-html/iframe-plugin";
import RenderHtml, {
HTMLContentModel,
defaultHTMLElementModels,
} from "react-native-render-html";
import { WebView } from "react-native-webview";
const IframeRenderer = function IframeRenderer(props) {
const iframeProps = useHtmlIframeProps(props);
const {width, height} = StyleSheet.flatten(iframeProps.style);
return (
<View style={{width, height}}>
<HTMLIframe {...iframeProps} />
</View>
);
};
const renderers = {
iframe: IframeRenderer,
};
const customHTMLElementModels = {
img: defaultHTMLElementModels.img.extend({
contentModel: HTMLContentModel.mixed,
}),
iframe: iframeModel,
};
const NotificationPage = (props) => {
const { width } = useWindowDimensions();
return (<SafeAreaView style={{ flex: 1 }}>
<ScrollView style={{ flex: 1 }}>
<List.Accordion
title="Content Body"
titleStyle={{
textAlign: "center",
}}
style={{ marginTop: "5%" }}
>
<RenderHtml
renderers={renderers}
contentWidth={width}
WebView={{ WebView }}
source={{
html: `<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/M_xq5YB0z-A">
</iframe>
</body>
</html>`,
}}
customHTMLElementModels={customHTMLElementModels}/>
</List.Accordion>
</ScrollView>
</SafeAreaView>
)
}
export default NotificationPage;I swear that I have completed these tasks before submitting:
Tables won't show even using the sample table render, tested this on iOS and Android latest versions
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0
"react-native-web": "^0.13.5",
"react-native-webview": "^11.6.4",
"@native-html/table-plugin": "^3.1.1",
"react-native-render-html": "^5.1.1",
I swear that I have completed these tasks before submitting:
As title says there is no options to change text alignment in table cell by default it uses 'center'.
Example on iOS
Hi there,
I noticed a bug which causes the onLinkPress method to not be fired.
If there is an anchor element inside a table which itself contains more markup (i.E. an img or an i-tag), the onLinkPress method does not fire.
"react-native-render-html": "4.1.2",
"react-native-render-html-table-bridge": "0.4.0-rc.1",
"react-native-webview": "5.12.1",
HTML to reproduce:
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;">Test <a href="http://text:189">[info]</a></td>
<td style="width: 50%;">Test <a href="http://text:189"><sup>[info]</sup></a></td>
</tr>
</tbody>
</table>
I have recently released new versions for [email protected] (foundry) release. If you're not on this pre-release yet, you should pay attention to the version of the plugins you're using. See the below table (available in the root project README):
| react-native-render-html | @native-html/table-plugin | @native-html/iframe-plugin |
|---|---|---|
| < 5.0.0 | 2.x (documentation) | No Plugin, iframes were rendered internally |
| ≥ 5.0.0 < 6.0.0 | 3.x (documentation) | 1.x (documentation) |
| ≥ 6.0.0 | 4.x (documentation) 5.x (documentation) |
2.x (documentation) |
To install a specific version, use the semver ranges. For example, if you need the table plugin version 3.x, do:
yarn add @native-html/table-plugin@^3.0.0
Different alphas brought breaking changes. Make sure you follow those rules:
Hi,
I used this library for displaying the table. its working fine in normal text. but its not supported <img> inside <table> . Could you please suggest how can use <img> inside <table>.
Thanks,
Shalini
I swear that I have completed these tasks before submitting:
Content doesn't scale to fit if the container has some padding
System:
OS: macOS 11.3
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 247.13 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 29, 30
Build Tools: 29.0.3, 30.0.2, 31.0.0
System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_242-release - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.14.0 => 16.14.0
react-native: 0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Render a component with some padding around the iframe
<View style={{ padding: 16 }}>
<HTML
renderers={{ iframe }}
WebView={WebView}
source={{
html: `<iframe src="https://getbootstrap.com/docs/5.0/examples/album/" />`,
}}
/>
</View>
Expected output: the iframe scales to fit its container
Observed output: the iframe overflows and some parts are not visible
snack: https://snack.expo.io/AfrVZoTgW (just check the code, iframes won't display on the website)
"react-native-render-html": "^4.2.1",
"react-native-render-html-table-bridge": "^0.6.1",
"react-native-webview": "10.3.2",
"react-native": "0.61.5",
07-13 11:44:27.642 10598 10598 F crashpad: dlopen: dlopen failed: library "libandroidicu.so" not found: needed by /system/lib/libharfbuzz_ng.so in namespace (default)
--------- beginning of crash
07-13 11:44:27.644 10373 10395 F libc : Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c in tid 10395 (RenderThread), pid 10373 (com.newmednav)
07-13 11:44:27.853 10601 10601 F DEBUG : *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
07-13 11:44:27.853 10601 10601 F DEBUG : Build fingerprint: 'google/sdk_gphone_x86_arm/generic_x86_arm:11/RPB2.200611.009/6625208:userdebug/dev-keys'
07-13 11:44:27.853 10601 10601 F DEBUG : Revision: '0'
07-13 11:44:27.853 10601 10601 F DEBUG : ABI: 'x86'
07-13 11:44:27.870 10601 10601 F DEBUG : Timestamp: 2020-07-13 11:44:27+0545
07-13 11:44:27.870 10601 10601 F DEBUG : pid: 10373, tid: 10395, name: RenderThread >>> com.newmednav <<<
07-13 11:44:27.870 10601 10601 F DEBUG : uid: 10153
07-13 11:44:27.871 10601 10601 F DEBUG : signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c
07-13 11:44:27.871 10601 10601 F DEBUG : Cause: null pointer dereference
07-13 11:44:27.871 10601 10601 F DEBUG : eax f04815f0 ebx ee0d269c ecx ee0c8a80 edx 00000000
07-13 11:44:27.871 10601 10601 F DEBUG : edi d1c261f0 esi 00000000
07-13 11:44:27.871 10601 10601 F DEBUG : ebp c116dac8 esp c116d8d0 eip eda0ec1c
07-13 11:44:28.006 10601 10601 F DEBUG : backtrace:
07-13 11:44:28.006 10601 10601 F DEBUG : #00 pc 00247c1c /system/lib/libhwui.so (android::uirenderer::skiapipeline::GLFunctorDrawable::onDraw(SkCanvas*)+1548) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #1 pc 00303a57 /system/lib/libhwui.so (SkDrawable::draw(SkCanvas*, SkMatrix const*)+87) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #2 pc 002f4606 /system/lib/libhwui.so (SkBaseDevice::drawDrawable(SkDrawable*, SkMatrix const*, SkCanvas*)+38) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #3 pc 00659291 /system/lib/libhwui.so (SkGpuDevice::drawDrawable(SkDrawable*, SkMatrix const*, SkCanvas*)+353) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #4 pc 002d9dc0 /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+48) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #5 pc 002d9d6b /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+379) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #6 pc 0021ff78 /system/lib/libhwui.so (android::uirenderer::$_37::__invoke(void const*, SkCanvas*, SkMatrix const&)+40) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-13 11:44:28.006 10601 10601 F DEBUG : #7 pc 001ff8cc /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+1436) (BuildId: 434a9b68672e1dd2b15599730362463d)
I swear that I have completed these tasks before submitting:
Need to install the following packages:
expo-env-info
Ok to proceed? (y) y
expo-env-info 1.0.5 environment info:
System:
OS: macOS 13.0
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 17.5.0 - ~/.nvm/versions/node/v17.5.0/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.4.1 - ~/.nvm/versions/node/v17.5.0/bin/npm
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
npmPackages:
expo: ~47.0.3 => 47.0.3
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
npmGlobalPackages:
expo-cli: 6.0.8
Expo Workflow: managed
https://github.com/janrop/react-native-table-renderer-android-crash-repro
(Write your steps here:)
Does it have to do with the amount of tables?
https://github.com/janrop/react-native-table-renderer-android-crash-repro
I'm able to add cellpadding using cellPaddingEm in tableview.
How can I add cellspacing in tableview?
Want tableview like this screen shot 👇🏻
I swear that I have completed these tasks before submitting:
When using the tableRenderers imported from heuristic-table-plugins the text inside the cels are not being displayed under Android and iOS
Android Expo Emulator
iOS Expo Emulator
Samsung Galaxy S10
Motorola MotoG 8
iPhone X
Tried all the props and styles/no styles, the problem persists.
Thanks for the lib!
Hi,
A mysterious black 'border' is showing at the bottom of my WebView on iOS: 
It looks like this is a known issue with react-native-webview - the fix is to specify a transparent background color for the WebView: https://stackoverflow.com/questions/41188362/react-native-webview-rendering-unexpected-border-at-bottom
My question is: is there any way to add styles to the WebView component using this module (I can obviously apply styles to the table, but can't figure out how to make changes to the WebView itself)?
Thanks!
First of all thanks for the library. I'm wondering does this supports PWA or just iOS and Web?
The same table renders correctly in the iOS device but getting error on Web (Chrome)
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Webshell`.
at http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:137220:950
at createFiberFromTypeAndProps (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:137220:1131)
at createFiberFromElement (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:137220:1466)
at reconcileSingleElement (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:135458:714)
at reconcileChildFibers (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:135471:147)
at reconcileChildren (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:135708:22)
at mountIndeterminateComponent (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:135858:132)
at beginWork$1 (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:136147:101)
at HTMLUnknownElement.callCallback (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:132842:102)
at Object.invokeGuardedCallbackDev (http://0.0.0.0:8080/vendors~main.646b02c2919a82ab84d1.js:132862:45)
The same code works correctly in iOS device, but breaking on Web.
I swear that I have completed these tasks before submitting:
The iframe plugin sets the source of the webview with either html or uri, but there is no way to set the headers attribute when using uri.
Setting the headers might be useful and, in my case, it is a must have to display some Youtube Videos (not every one requires it).
My case :
I have an html that includes one or more iframe tags with src to Youtube (sample : https://www.youtube.com/embed/o-Wr61tBX7c). Without the header set in the source property, the video isn't displayed, but if I set it, it does.
That's why I need a way to set it.
This would be useful in both version 5.x and 6.x
having difficulties on how to add additional condition to alterNode function without overriding it.
other than manually updating the package, is there any way to do it?
i wanted to add these to alterNode function
if (node.name === "img") {
node.attribs = {
...(node.attribs || {}),
style: height:"auto";
};
}
I swear that I have completed these tasks before submitting:
System:
OS: macOS 11.2.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 127.68 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
npmPackages:
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-render-html: 6.0.0-alpha.17
@native-html/iframe-plugin: ^2.1.0
react-native-webview: ^11.2.3
When render iframe The Vdo is auto play. How to disable autoplay video?
This is my code
const IframeRenderer = (props) => {
const iframeProps = useHtmlIframeProps(props);
// Do customize the props here; wrap with your own container...
return iframeProps ? <HTMLIframe {...iframeProps} /> : null;
};
IframeRenderer.model = iframeModel;
const renderers = {
iframe: IframeRenderer
}
const html = '<iframe width="420" height="315" src="https://storage.googleapis.com/demo-coj/exhibition/17bc59130550baf741080ddaf18e8154.mp4"></iframe>'
return <RenderHTML
renderers={renderers}
WebView={WebView}
renderersProps={{
iframe: {
scalesPageToFit: true,
autoplay: false,
webViewProps: {
autoplay: false,
mediaPlaybackRequiresUserAction: true
}
}
}}
source={{html: html}}
contentWidth={width}/>
The iframe is not zooming out when it exceeds the width of the view. You can see a screenshot of the iframe on ios and android emulators below:
These are the config obj and the returned component:
const htmlConfig = {
renderers: {
iframe,
},
WebView,
defaultWebViewProps: {
containerStyle: {
width: contentWidth - 40,
},
},
ignoredTags: IGNORED_TAGS,
renderersProps: {
iframe: {
scalesPageToFit: true,
},
},
tagsStyles: {
iframe: {
alignSelf: 'center',
},
},
};
return (
<ScrollView>
<HTML
source={{html: content}}
contentWidth={contentWidth}
{...htmlConfig}
/>
</ScrollView>
);
Hi,
It seems that I have this error only on a ios simulator. It works on real devices (both Android and ios). Tested with Expo version: "33.0.0" and WebView (react-native-webview) version > 5.0.0.
The only thing I've noticed is that the error message appears with a little delay after the building of the bundle is finished. It works fine when I import the WebView from react-native but crashes with the react-native-webview library. Do you have any ideas?
If you have a border attribute on the table, eg.
<table border="1">...</table> it is not taken into account when calculating height (using autoheight: true).
@jsamr How can i set the background color transparent and remove the border? Thanks!
I have to make it in this form
.
And now my design is:
I used this library as shown in the example and was able to render HTMLs with table tags as expected. However, if HTML is wrapped with Scrollview then there are 2 scrolls shown on the UI (one for parent Scrollview and the other for the Webview).
Is it possible to hide scroll of Webview and instead use Scroll of parent view i.e, ScrollView?
Hi,
May I ask how I can adjust the table to fit the container? I tried setting the fitContainer in cssRules to true but it seems to make no difference.
When I open first tab with table, it works great.
But when I open second tab with second table, which is higher then first table it creates white space. On iOS it works great, problem only appears on Android.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.