I want to show video in HTML component, but when I pass a string
let body = '<video src="https://www.youtube.com/watch?v=vJJpnplTBeM" poster="https://img.youtube.com/vi/vJJpnplTBeM/maxresdefault.jpg"></video>';
to the component
return (<ScrollView>
<Html body={body} style={{}}/>
</ScrollView>);
it show an error No suitable image URL loader found for (null).
How to correctly pass video into Shoutem HTML Component?
Shoutem's video component does what you're trying to do, you could simply use it instead.
<Video
source={{ uri: 'https://www.youtube.com/watch?v=myvideo' }}
poster={'https://mypic.png'}
height={200}
width={300}
/>
Related
I am using react-native-video component to play a video.
Problem:
I would like to know the dimensions of the video so I can adapt some other items.
When I store the ref with
<Video
ref={ref => setVideoRef(ref)}
resizeMode={'contain'}
/>
I can access videoRef.props.scaleX and videoRef.props.scaleY, but they are always undefined, even if the video is fully loaded. How can I access the video shape/ dimensions?
You can pass a callback to the onLoad prop, which will receive the naturalSize of the video. Example:
<Video
onLoad={({ naturalSize }) => {
console.log(naturalSize.width, naturalSize.height);
})}
...
The callback has a lot more info if you need it - see more in the docs.
I am using react-native-video
And it have a props called poster which is working fine. But my requirement is to get that thumbnail from video (first frame of video). If I don't use poster (which accept an url) then it is showing blank screen.
Any idea how to use first frame of video as thumbnail?
Thank You!!!
You can use the onLoad function callback to achieve it,
const player = useRef(null);
<Video
source={{uri: uri}}
ref={player}
paused={true}
style={styles.backgroundVideo}
onLoad={() => {
player.current.seek(0); // this will set first frame of video as thumbnail
}}
/>
For more details on onLoad prop: here
I'm using fetch to call API for video URL. I have trouble with react-native-video.the video is not showing.
<Video
repeat
resizeMode='cover'
source={{uri:`${this.state.base_url}${item.video}`}}
style = {styles.backgroundVideo}
/>
I'm getting a blank screen. In documentation, they mention like below code.
source={require('../assets/video/turntable.mp4')}
How can I render dynamic URL like mentioned above?
Thanks
I am using this compoenet and it's working properly, fetching from API.
<Video
source={{
uri: this.state.waitingVideoURL,
}}
resizeMode="cover"
style={styles.backgroundVideo}
repeat
onLoad={this.stopLoading}
/>
In your code, why you having two variables in the source; What's item.video ?
source={{uri:`${this.state.base_url}${item.video}`}}
I want to get title of url from webView in react-native.
For example: I can get title of url from webView in iOS
- (void)webViewDidFinishLoad:(UIWebView *)webView{
titleLabel.text = [webView stringByEvaluatingJavaScriptFromString:#"document.title"];
｝
I did not find any solutions so far, so Is there anyone have some ideas?
I'm not sure whether this is the cleanest solution but you can inject some JavaScript into WebView to get some data, and then pass it back.
handleMessage(message) {
console.log(message.nativeEvent.data);
}
render() {
return (
<WebView
source={{ uri: "https://wonderloveapp.com" }}
injectedJavaScript="window.postMessage(document.title)"
onMessage={this.handleMessage}
/>
)
}
References:
https://facebook.github.io/react-native/docs/webview.html#injectedjavascript
https://facebook.github.io/react-native/docs/webview.html#onmessage
You can use injectJavaScript or injectedJavaScript props to inject Javasctipt code to the URLs that you load and get title of the page. Take a look at this answer to learn how to get tile with javascript.
Then when you acquire title you can use onMessage prop to pass to react-native side.
There is a NativeEvent that contains a title property.
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onloadstart
<WebView
source={{
uri: route.params.url,
}}
onLoadStart={(event) => {
navigation.setOptions({
headerTitle: event.nativeEvent.title, // get webpage title
});
}}
></WebView>
In my React Native app, I am pulling in JSON data that has raw HTML elements like this: <p>This is some text. Let’s figure out...</p>
I've added the data to a view in my app like this:
<Text>{this.props.content}</Text>
The problem is that the HTML comes out raw, it does not render like it would in a browser. Is there a way to get my JSON data to look like it would in a browser, inside my app view?
Edit Jan 2021: The React Native docs currently recommend React Native WebView:
<WebView
originWhitelist={['*']}
source={{ html: '<p>Here I am</p>' }}
/>
https://github.com/react-native-webview/react-native-webview
If you don't want to embed a WebView, there are also third party libraries to render HTML into native views:
react-native-render-html
react-native-htmlview
Edit March 2017: the html prop has been deprecated. Use source instead:
<WebView source={{html: '<p>Here I am</p>'}} />
https://facebook.github.io/react-native/docs/webview.html#html
Thanks to Justin for pointing this out.
Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:
<WebView html={'<p>Here I am</p>'} />
Original Answer:
I don't think this is currently possible. The behavior you're seeing is expected, since the Text component only outputs... well, text. You need another component that outputs HTML - and that's the WebView.
Unfortunately right now there's no way of just directly setting the HTML on this component:
https://github.com/facebook/react-native/issues/506
However I've just created this PR which implements a basic version of this feature so hopefully it'll land in some form soonish.
I found this component. https://github.com/jsdf/react-native-htmlview
This component takes HTML content and renders it as native views, with customisable style and handling of links, etc.
A pure JavaScript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it.
react-native-render-html
Using this component will improve your application memory footprint and performance when compared to embedded WebViews.
Install
npm install react-native-render-html --save or yarn add react-native-render-html
Basic usage
import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";
const html = `
<h1>This HTML snippet is now rendered with native components !</h1>
<h2>Enjoy a webview-free and blazing fast application</h2>
<img src="https://i.imgur.com/dHLmxfO.jpg?2" />
<em style="textAlign: center;">Look at how happy this native cat is</em>
`;
export default function App() {
// Allow images to scale to available width
// with contentWidth prop.
const { width } = useWindowDimensions();
return (
<ScrollView style={{ flex: 1 }}>
<RenderHTML contentWidth={width} source={{ html }} />
</ScrollView>
);
}
RenderHTML Props reference
You may customize the style of elements via class names, tags, and you can even register custom renders for tags. More info on the official website.
i uses Js function replace simply.
<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
React Native has updated the WebView component to allow for direct html rendering. Here's an example that works for me
var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";
<WebView
ref={'webview'}
automaticallyAdjustContentInsets={false}
style={styles.webView}
html={htmlCode} />
<WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />
This worked for me :) I have html text aboutus file.
import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";
<HTML source={{html: htmlCode}}/>
The WebView component was not rendering for me HTML snippets, like
<b>hello</b>, world!
But if I would enclose the HTML snippet in a document, like the example below, then it did actually render the document:
<View style={styles.accContent}>
<WebView source={{html: `<!DOCTYPE html><html><body style="font-size: 3rem">${data.content}</body></html>`}} />
</View>