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>
Related
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.
Hi everyone I want to design UI like this image.but I don't know to design list like that to get value in seekbar(Slider) all item?Please help me thank a lot !!
You can check this official react native package rn-slider Good documentations. you will get the slider there. and for images, you just put them in flexDirection:'row' along with the slider component.
hope it helps. feel free for doubts
I couldn't understand what exactly you need but if you need to access value on slidebar, you can define a state like SliderValue and pass it to value and onValueChanged props in Slider :
render() {
return (
<View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >
{/*Text to show slider value*/}
<Text style={styles.headerText}>Value of slider is : {this.state.sliderValue}</Text>
{/*Slider with max, min, step and initial value*/}
<Slider
maximumValue={100}
minimumValue={0}
minimumTrackTintColor="#307ecc"
maximumTrackTintColor="#000000"
step={1}
value={this.state.sliderValue}
onValueChange={(sliderValue) => this.setState({ sliderValue })}
style={{ width: 300, height: 40 }}
/>
</View>
);
}
I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
I have a problem with onLayout in Image:
I have a function to display the dimension.
measureView(event) {
console.log(event.nativeEvent.layout.width);
console.log(event.nativeEvent.layout.height);
}
This Works and shows me the dimension of the TouchableWithoutFeedback
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onLayout={(event) => this.measureView(event)}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}/>
</TouchableWithoutFeedback>
But With the onLayout in the Image, i got nothing, just undefined.
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}
onLayout={(event) => this.measureView(event)}/>
</TouchableWithoutFeedback>
Do you have an Idea why?
Thanks!
I had this problem recently as well. It looks like the <Image /> component mounts before the actual image gets loaded into the container. You probably want to instead use the onLoad property of <Image />. Once you do that you can pretty much proceed as normal...
<Image
onLoad={event => { console.log(event.nativeEvent.source); }}
source={require("./../assets/images/photo_1.jpg")}
style={styles.image}
/>
// Would log { height: 123, url: 'somestring', width: 123 }
Keep in mind that may or may not only work for static resources. I'm not 100% that network images provide a size through that function.
Good luck! :)
I have a local image that I am using as a background image. It loads around a second after the rest of the content.
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
imageContainer: {
flex: 1,
width: null,
height: null,
}
Is there a way to load the content after the image is loaded? I tried using the onLoad and onLoadEnd props, but they were fired prior to the image loading.
Yes there is.. it's not that simple actually, you will need to use Image prefetch.. check this link : React Image prefetch
Or actually you can try this:
<Image
onLoadEnd={()=>this.setState({loadEnd:true})}
source={require('./assets/climbing_mountain.jpeg')}
style={styles.imageContainer}>
and in the render method you can do something like which I don't really recommend:
render(){
if(!this.state.loadEnd) {
return(
<Image
key='image_key'
onLoadEnd={()=>this.setState({loadEnd:true})}
source={require('./assets/climbing_mountain.jpeg')}
style={styles.imageContainer}>
)
}else {
return (
<View>
....
<Image
key='image_key'
onLoadEnd={()=>this.setState({loadEnd:true})}
source={require('./assets/climbing_mountain.jpeg')}
style={styles.imageContainer}>
</view>
....
)
}
}