I just want to render a simple FlatList with images from JSON online data.
Here is my code.
Images are one Json Object
I get the images data
data.append("images", listing.images);
Then when I try to render them in the FlatList I only get this empty squares with the correct number of pictures for the current listing. What I"m doing wrong here?
<View style={{ height: 120 }}>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={listing.images}
renderItem={({ item, index }) => (
<Image
uri={item.images}
preview={{ uri: item.images }}
tint="dark"
style={{ width: 90, height: 110, borderWidth: 1 }}
/>
)}
/>
</View>
For the Image is use:
import { Image } from "react-native-expo-image-cache";
Basically title, i'm trying to change the resolution of the videos because they are too heavy, i'm using react-native-video to display the videos and i saw that it has a selectedVideoTrack which can be used to change it but it is not working for me. could i be using it wrong?
<Video
selectedVideoTrack={{
type: "resolution",
value: 240
}}
resizeMode = "stretch"
source={{ uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4' }}
style={{ width: 300, height: 300 }}
controls={true}
ref={(ref) => {
this.player = ref
}} />
My local images have suddenly stopped displaying in my app.
I tried the solution proposed here: https://stackoverflow.com/questions/35354998/react-native-ios-app-not-showing-static-assets-images-after-deploying
but it didn't work.
I'm importing my image as follows:
import image from '../../assets/images/home-1.jpg';
...
return (
<SafeAreaView style={[styles.container, {margin: 0}]}>
<Image source={image} style={styles.image} />
...
</SafeAreaView>
);
...
const styles = StyleSheet.create({
image: {
backgroundColor: 'red',
width: 300,
height: 300,
},
...
But my image looks like this:
What can be wrong?
I think your used is wrong.
You can try:
<Image source={require('./my-icon.png')} />
More in docs of React-native. Please follow it.
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}
/>;
is it possible to use mix-blend-mode in RN?
style={{
mixBlendMode: 'overlay'
}}
Got invalid props.style key
If you need to blend images you can try my react-native-image-filter-kit this way:
import { Image } from 'react-native'
import { OverlayBlend } from 'react-native-image-filter-kit'
const imageStyle = { width: 320, height: 320 }
const tahoe = (
<Image
style={imageStyle}
source={{ uri: 'https://una.im/CSSgram/img/tahoe.jpg' }}
resizeMode={'contain'}
/>
)
const cacti = (
<Image
style={imageStyle}
source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
resizeMode={'contain'}
/>
)
const blended = (
<OverlayBlend
dstImage={tahoe}
srcImage={cacti}
/>
)
Unfortunately not.
Closest you could get would be https://github.com/ProjectSeptemberInc/gl-react-native with https://github.com/CAPSLOCKUSER/gl-react-color-blending