I put a map in a webview using react-native-webview this way :
<WebView
geolocationEnabled={true}
source={{
uri:
"https://www.blablabla",
}}
originWhitelist={[
"https://www.blavla.org",
"https://www.blabla.com",
]}
style={{ marginHorizontal: 0, backgroundColor: "transparent" }}
/>
Giving me this :
But as you see, it's not really clear, I'd like to zoom to have a better reading of the map (it's too small this way we can't read anything). How can I do that please ?
Thanks for any help !!! :)
Your site has page width set in meta already
So you will need to override that with injectedJavaScript
injectedJavaScript={`const meta = document.createElement('meta');
meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-
scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport');
document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={false}
Related
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 using react-native-svg with react-native-svg-transformer for rendering SVGs in our app. All SVGs are rendering correctly except this one SVG which just cuts off at its right side. This is the rendered SVG (The right side of the svg is cutoff):
and this is the original svg which I want to render as it is:
I don't know what I am doing wrong, but I also tried using the viewBox prop, still no effect. How can I rectify this?
Code:
import YourEldercarePartner from '../../Assets/Images/WelcomeScreenSVGImages/Your-Eldercare-Partner.svg';
const data = [
...
{
heading: "Welcome to Emoha!",
svg: {
image: YourEldercarePartner,
width: hp(40),
height: hp(40)
},
message: "India’s largest virtual community of Elders. This app is your one-stop solution for everything Elders need to live a healthy and energized life in the comfort of home."
},
...
];
return (
<Swiper
ref={swiper}
loop={false}
onIndexChanged={index => setIndex(index)}
showsButtons={false}
showsPagination={true}
renderPagination={handlePagination}
>
{
data.map((datum, idx) => <Screen datum={datum} key={idx}/> )
}
</Swiper>
)
const Screen = ({ datum }) => (
<View style={styles.container}>
<View style={styles.main}>
<Text style={styles.heading}>
{datum.heading}
</Text>
<View style={{ marginTop: 10, flex: 10, justifyContent: 'flex-start' }}>
<datum.svg.image
width={datum.svg.width}
height={datum.svg.height}
/>
</View>
<Text style={styles.message}>
{datum.message}
</Text>
</View>
</View>
)
Kind of late, but had similar problem and it was because svg width was actually smaller than mask width inside svg.
For example:
<svg width="261" height="251" viewBox="0 0 261 251" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask1_11005_24077" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="251" height="251">
Here mask width was accidentally 251 and after changing to 261 it was fixed and image not cut anymore. Don't see your svg anymore so I don't know if this was case for you, but was for me with multiple images.
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}
/>;
Anyone here can help me make resizeMode work with <ImageBackground>?
It gives an error that resizeMode is applied to View, which apparently doesn't support it.
But i need to find a workaround, as i find pretty complicated to use <Image /> as a background for a block with info.
Thanks in advance!
<ImageBackground
style={[styles.image]}
source={{ uri: url }}
imageStyle={{resizeMode: 'contain'}}
>
// other components here
</ImageBackground>
Hope it helps!
NOTE: At the time I wrote this, <ImageBackground /> was an undocumented feature not yet released. But it does exist now.
There is no <ImageBackground /> that I'm aware of, but you can create one.
If you're trying to set an image as the background to some text, then <Image /> is the best way. Where do you feel it's overly complicated? Something like this should work...
class BackgroundImage extends Component {
render() {
return (
<Image
source={this.props.src}
style={styles.backgroundImage}>
{this.props.children}
</Image>
)
}
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover'
}
});
Then you'd use it like this...
<BackgroundImage
src={require('./background.jpg')}>
<Text>Your Content Goes Here!</Text>
</BackgroundImage>