I'm using an S3 bucket as origin for my app's images. Storage.get seems to be working fine, as when I copy and paste the link on the browser, it loads the image correctly. However, the Image tag seems not to be working...
It seems to load the image correctly, as it shows its space in the app, but it doesn't show the actual image.
Here is the code:
render() {
return(
<View style={Styles.vContainerF}>
{ this.state.gmpLogoURL ?
<Image style={{flex:1}}
resizeMode='contain'
source={{uri: this.state.gmpLogoURL }}
/>
: null }
This is the view style config:
vContainerF: {
flex: 1,
padding: 10,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
Any hints on what could be the issue?
Thanks in advance folks!
As described in react-native image doc :
Note that for network and data images, you will need to manually specify the dimensions of your image!
So add height and width to your image style :
<Image
style={{ flex: 1, height: 100, width: 100 }}
resizeMode='contain'
source={{ uri: this.state.gmpLogoURL }}
/>
Related
My Data Look Like This
["https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg"]
Now I want To Show These 4 images in row
I am Mapping Like this
{Data.CompanyImages.map((item) => {
<View style={{flexDirection: 'row'}}>
<Image
style={{
height: 80,
width: 80,
marginTop: 1.5,
borderRadius: 7,
}}
source={{uri: item}}
/>
</View>;
})}
but its not showing anything please help
Open any image of your list in the browser, you can see that there is an error returned, please make sure you set the images to public access in your S3 or adjust your code to pass some params to indicate that the access to those images is valid and the S3 return the content
Check Your image link
<Error>
<Code>PermanentRedirect</Code>
<Message>The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.</Message>
<Endpoint>s3.amazonaws.com</Endpoint>
<Bucket>files-bucket</Bucket>
<RequestId>Z72TT83DFD04M8EJ</RequestId>
<HostId>AMuc/KSYXayYgzkigho3CTqNluTLEDAI/EYUug3U4NKsJB8xbnJSDsFn8VlaNZ50N73EAWhi2p0=</HostId>
</Error>
Considering your Data is valid and Data.CompanyImages is the array you have shown in your question, then I see two problems in your code.
You have to return the JSX from your map function.
Wrap the map function with a View with flexDirection = row
Change your map to,
<View style={{flexDirection: 'row'}}> // wrap list with flexDirection row
{Data.CompanyImages.map((item) => ( //returning JSX with ()
<Image
style={{
height: 80,
width: 80,
marginTop: 1.5,
borderRadius: 7,
}}
source={{uri: item}}
/>
))}
</View>
I'm creating this Instagram Clone, I have the image local url and I want to show it to the user before he posts it.
I tried to crate a state var, tried to require but nothing works
<Image source={this.state.img_url} />
This is what I need, thanks for helping me!
Here is the solution I found
render(){
//Getting image from Camera Screen
var imgSource = this.state.img_url;
return(
<View>
<Image
source={{ uri: imgSource }}
style={{width: 400, height: 400}}
/>
</View>
);
}
For showing image in react-native, you need to provide an object which contains uri property.
Below code will set a responsive image
<View>
<Image source={{ uri: 'image-path' }} style={{ height: 300, flex: 1, width: null }}>
</View>
I am completing a tutorial on react native. For a certain screen, the instructor recommends the following code:
<Image source={bgImage} style={styles.backgroundContainer}>
<View style={styles.container}>
<Quote quoteText={this.props.text} quoteSource={this.props.source}/>
</View>
</Image>
But when I use this, I get the above error.
I've tried alternatives to this, but when I do, the background image doesn't even load.
EDIT: As requested below, here's my styling code. What I'm going for is using a background gradient image stored locally to the app code with text overlayed over that background. What I currently get by using the suggestion below is just the text at the very top of the screen and no background image.
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1,
resizeMode: 'cover',
width: undefined,
height: undefined,
backgroundColor: '#889DAD',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
},
});
Since react-native 0.50 you can't nest components inside <Image> tag, rather you have to use <ImageBackground> for background images. Release Notes for v0.50.0
You are not allowed to put other components inside an image component. You need to wrap a View around your Image and positioned it as absolute.
<View style={{ flex: 1}}>
<Image source={bgImage} style={styles.backgroundContainer} />
<View style={styles.container}>
<Quote quoteText={this.props.text} quoteSource={this.props.source}/>
</View>
</View>
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center',
},
EDIT:
Since react-native version 50.0, you can simply use ImageBackground
Use
<ImageBackground
source={image}
style={styles.contentContainer} >
// Your view content goes here
</ImageBackground>
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
},
});
Works like a charm
I recently updated React-native and it introduced a warning, with the following code:
<Image
source={require('../../assets/icons/heart.png')}
style={{
resizeMode: 'contain',
height: 25,
width: 25
}}
>
<Text>foobar</Text>
</Image>
And the warning:
index.ios.bundle:50435 Using <Image> with children is deprecated and
will be an error in the near future. Please reconsider the layout or
use <ImageBackground> instead.
Trouble is when I use ImageBackground component instead it gives me a warning that you can't use ResizeMode style with it.
<ImageBackground
source={require('../../assets/icons/heart.png')}
style={{
resizeMode: 'contain',
height: 25,
width: 25
}}
>
<Text>foobar</Text>
</ImageBackground>
And the warning:
Warning: Failed prop type: Invalid props.style key 'resizeMode'
supplied to 'View'. Bad object: { ResizeMode: 'contain, height: 25,
width: 25}
How are you supposed to use ImageBackgrounds? There doens't seem to be any documentation about it online.
ImageBackground accepts two style props – style and imageStyle – which are (obviously) applied to the internal View and Image respectively. It's also worth noting that height and width values from the container style are applied to the image style automatically.
For details visit this.
Move the resizeMode: 'contain' outside the inline style.
example:
<ImageBackground
source={require('../../assets/icons/heart.png')}
resizeMode= 'contain'
style={{
height: 25,
width: 25
}}
>
<Text>foobar</Text>
</ImageBackground>
I had exactly this issue; I ended up giving up on <ImageBackground> and went back to using <Image> but removed the elements inside it. I then wrapped the whole thing in a new <View> tag and positioned the <Image> absolutely in the styles. Here's where my code ended up if it's of use:
JSX
render() {
return (
<View style={{ alignItems: 'center' }}>
<Image
source={require('../images/pages/myImage.jpg')}
style={styles.backgroundImage}
/>
Style
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
position: 'absolute',
resizeMode: 'cover',
width: viewportWidth,
height: viewportHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center'
},
I'm trying to fit images in their containing views so that I can have a seamless grid of images. The problem is that resizeMode='contain' seems to fit to the width of the screen or at least some higher level container, I need the images to fit to the size of each list item.
Here's a very ugly example of the styles and resulting grid:
The styles:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
item: {
flex: 1,
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10
},
image: {
flex: 1
}
})
The layout:
<TouchableOpacity
activeOpacity={ 0.75 }
style={ styles.item }
>
<Image
style={ styles.image }
resizeMode='contain'
source={ temp }
/>
</TouchableOpacity>
The result (with resizeMode='contain'):
The result (with resizeMode='cover'):
As you can see, the covered images are very big and are as wide as the whole screen and don't fit the immediately containing view.
Update 1:
I was able to achieve a result close to what I'm looking for by applying a scale transform to the image and shrinking it from the center:
The transform:
transform: [{ scale: 0.55 }]
The resulting layout (without margins or paddings):
If you know the aspect ratio for example, if your image is square you can set either the height or the width to fill the container and get the other to be set by the aspectRatio property
Here is the style if you want the height be set automatically:
{
width: '100%',
height: undefined,
aspectRatio: 1,
}
Note: height must be undefined
Edit (Based on #rob-art's comment):
If your image is a different aspect ratio than the one you want to set in the style you can use resizeMode to control how the image should be displayed. Use resizeMode:'contain' to ensure your image is not cropped.
See documentation for more details
Set the dimensions to the View and make sure your Image is styled with height and width set to 'undefined' like the example below :
<View style={{width: 10, height:10 }} >
<Image style= {{flex:1 , width: undefined, height: undefined}}
source={require('../yourfolder/yourimage')}
/>
</View>
This will make sure your image scales and fits perfectly into your view.
Anyone over here who wants his image to fit in full screen without any crop (in both portrait and landscape mode), use this:
image: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'contain',
},
I could not get the example working using the resizeMode properties of Image, but because the images will all be square there is a way to do it using the Dimensions of the window along with flexbox.
Set flexDirection: 'row', and flexWrap: 'wrap', then they will all line up as long as they are all the same dimensions.
I set it up here
https://snack.expo.io/HkbZNqjeZ
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
ScrollView
} = React;
var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
render: function() {
var images = [];
for (var i = 0; i < 10; i++) {
images.push(
<TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}>
<Image style={styles.image} source={{ uri: temp }} />
</TouchableOpacity>
);
}
return (
<ScrollView style={{ flex: 1 }}>
<View style={styles.container}>
{images}
</View>
</ScrollView>
);
}
});
Simply You need to pass resizeMode like this to fit in your image in containing view
<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>
const style = StyleSheet.create({
imageStyle: {
alignSelf: 'center',
height:'100%',
width:'100%'
},]
})
I think it's because you didn't specify the width and height for the item.
If you only want to have 2 images in a row, you can try something like this instead of using flex:
item: {
width: '50%',
height: '100%',
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10,
},
This works for me, hope it helps.
This is working for me,
<Image style={styles.imageStyle} resizeMode="cover" source={imageSource} />
const styles = StyleSheet.create({
imageStyle: {
width: undefined,
height: '100%',
aspectRatio: 1,
alignSelf: 'center',
},
});
You can use the "Resize Matters" library which always fix the image scaling.
import { scale, verticalScale } from 'react-native-size-matters';
export const Component = props =>
<Image style={{
width: scale(30),
height: verticalScale(50)
}}/>;
Here you will be happy: https://github.com/nirsky/react-native-size-matters
the image has a property named Style ( like most of the react-native Compponents)
and for Image's Styles, there is a property named resizeMode that takes values like:
contain,cover,stretch,center,repeat
most of the time if you use center it will work for you