I see This Component in official site of React Native. But nothing Example get on the https://reactnative.dev/docs/image#loadingindicatorsource. I only get what is this
Can anyone tell me how I use this Component on react native ?
<Image {...props} loadingIndicatorSource={URI} />
What does statement above mean?
{...props} - is your custom props, like source or style, for example.
URI - is URI of image, which will be shown while image, specified in source props, is loading.`
Examples:
<Image source={{uri: URI}} loadingIndicatorSource={require('loadingIndicatorSource={require('#assets/images/loading.jpeg')}')}
<Image source={{uri: URI}}
loadingIndicatorSource={{uri:
'https://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png'}} />
You can use loadingindicator like as activityindicator
<Image
style={{
width: "100%",
height: "85%",
alignSelf: "center",
}}
resizeMode="contain"
loadingIndicatorSource={require("../assets/loader2.gif")}
source={{ uri: item.thumb_url }}
/>
One of the ways I found to use it is passing a component directly, like an ActivityIndicator
<Image loadingIndicatorSource={<YOUR LOADING COMPONENT/>} />
I am trying implement a video functionality on Expo using Expo-av. But I got stuck in controlling video speed like 1x, 2x like youtube. Can any one help me on that .
Thank you in advance.
You can control it with the rate parameter inbuilt in expo-av
<Video
source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
rate={1.0} //CHANGE ME
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
style={{ width: 300, height: 300 }}
/>
Here is my code:
<View style={{ height: this.state.height, ...props.style }}>
<WebView
ref="child"
{...this.props}
scalesPageToFit={false}
scrollEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={ this.handleMessage.bind(this) }
source={{ html }}
/>
</View>
This works fine on iOS build (Scrolls horizontally) but does not work on Android.
react native WebView has been deprecated you should now use
https://github.com/react-native-community/react-native-webview
First answer is right, you should use react-native-webview now.
And, your problem may be related with your View wrapper I think.
The platform is Android. I use to embed youtube video.
<View style={{ height: 240 }}>
<WebView
style={{ alignSelf: 'stretch' }}
scalesPageToFit={true}
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
/>
</View>
I can see the zoom in button but it can't be clicked.
I try to add scalesPageToFit={true} on is still not working.
Is it possible to zoom in when using with embed youtube url ?
Any help would be appreciated.
I have search and find the props allowsFullscreenVideo={true} set it true that enables fullscreen into the WebView.
Please check the final code.
<WebView
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
style={{ alignSelf: 'stretch' }}
allowsFullscreenVideo={true}
scalesPageToFit={true}
/>
You can use react-native-youtube.
You have to embed your video in an iFrame with property.
allowfullscreen="allowfullscreen"
Give iFrame the above mentioned property and for your information allowfullscreen="true" is a wrong input.
This is my code, I'm trying to load a stream from my IP camera.
<View style={{flex:1,marginTop:70, flexDirection:'column', justifyContent:'space-between'}}>
<Hue/>
<View style={{flex:1}}>
<WebView
source={{uri: 'http://192.168.2.6:81/videostream.cgi?user=admin&pwd=XXXXX'}}
style={{/*marginTop: 20, flex: 1, width:450, height:100*/}}
javaScriptEnabled={false}
domStorageEnabled={false}
startInLoadingState={false}
scalesPageToFit={false}
scrollEnabled={true}
/>
</View>
<Text>Just some text</Text>
</View>
<Hue/> is a component to check if the WebView is still loading (because in a normal case, it won't load if it's not the only component).
The width property have an ambiguous behavior: reducing it increase the height of the webview. Leaving an empty scrolling space.
Moreover, modifying the height of the webview component does nothing at all.
I tried to modify the parent view applying height and width with no luck.
Also, I did not find any props to modify the webview content itself.
Is there any way, or a react-native component that can help me to integrate my IP camera stream in my application ?
Any suggestion is very appreciated.
EDIT
Updated the code according to Ashwin's comment and I still get this :
EDIT 2
I updated my code according to sfratini answer but if I set the scroll enabled and then scroll, I'm able so see that there is always a part of the image not displayed. Seems that react does not understand to resize to 100%.. It's strange...
<WebView
source={{
uri: this.props.url
}}
style={{ height: height, width, resizeMode: 'cover', flex: 1 }}
injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=width, initial-scale=0.5, maximum-scale=0.5, user-scalable=2.0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={false}
onLoadEnd={this._onLoadEnd}
/>
Managed to get the same behavior for ios and Android. Thanks Gowtham Palanisamy.
<WebView
source={{ uri: url }}
style={{ flex: 1 }}
injectedJavaScript={`
const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (!iOS) {
const meta = document.createElement('meta');
let initialScale = 1;
if(screen.width <= 800) {
initialScale = ((screen.width / window.innerWidth) + 0.1).toFixed(2);
}
const content = 'width=device-width, initial-scale=' + initialScale ;
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
}
`}
scalesPageToFit={Platform.OS === 'ios'}
/>
just a note that webview has standard style and also containerStyle see documentation. standard style i believe has background: white, and containerStyle has flex: 1.
To make an image responsive, i made my code like this (iframeWidth is just window width dimension minus some padding):
if (node.name === 'img') {
const imgHeight = Number(node.attribs.height);
const imgAlt = node.attribs.alt;
const imgSource = node.attribs.src;
const imageHtml = `<img src="${imgSource}" height="${
imgHeight * 2.3
}" alt="${imgAlt}" />`;
return (
<WebView
key={index}
source={{ html: imageHtml }}
startInLoadingState
scalesPageToFit
allowsInlineMediaPlayback
domStorageEnabled
style={{ backgroundColor: 'transparent' }}
containerStyle={[{ flex: 0, width: iFrameWidth, height: imgHeight }]}
/>
);
}
Hope this helps to someone!
Using Gowtham Palanisamy's approach, set the source content as an html input and set its viewport to render content inside parent container.
<View>
<WebView
javaScriptEnabled={false}
domStorageEnabled={false}
startInLoadingState={false}
scalesPageToFit={false}
scrollEnabled={true}
source={{
html: `
<head>
<meta content="width=width, initial-scale=1, maximum-scale=1" name="viewport"></meta>
</head>
<body style="background-image: url('${this.props.source}'); background-size:cover;"></body>
`,
}}
/>
</View>
This is is more better and accurate
style={{ height: 350, width: '100%', resizeMode: 'cover', flex: 1 }}
injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={true}
I believe you want this:
<WebView
source={this.props.source}
style={{
width: '100%',
height: 300
}}
scrollEnabled={false}
/>;