I am trying to have a screen with a background image, but if the image dimensions dont work to have it fullscreen i want the image to be pinned to the top. RN docs appear to say that resizeMode="contain" should do the trick but for some reason it still centers the image just like resizeMode="center" does. Is there a way to do this? The following code does not work.
<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="contain">
</ImageBackground>
If you want to fill the image with the size of your cell phone, you can use 'stretch'.
stretch: Scale width and height independently, This may change the
aspect ratio
of the src.
<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="stretch">
</ImageBackground>
You can use position props if you want to maintain the image ratio and hold the image at the top.
<ImageBackground
style={{ flex:1,position:'absolute',width:"100%",height:"100%",bottom:150,justifyContent:"flex-end",alignItems:"center"}}
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
resizeMode = "contain"
>
<Text style={{fontSize:30,fontWeight:"bold"}}> ImageBackground</Text>
</ImageBackground>
Related
My goal is to get a newsflash component with animations.
I'm implementing a View that contains moving text.
The ScrollView does perform well the animation, however, the inner text doesn't displayed from the start:
<Animated.View style={flex: 4}>
<ScrollView
style={{flex: 1 }}
horizontal={true}
scrollEnabled={false}
contentContainerStyle={{ flex: 1, flexGrow: 1 }}>
<Animated.View style={{ flex: 1, marginLeft }}>
<Text numberOfLines={1}>{this.props.subtitle}</Text>
</Animated.View>
</ScrollView>
</Animated.View>
I tried almost every variation of flex and flexGrow and more but nothing doesn't work well.
If I'm removing the ScrollView it shows well the text, but the effect looks bad.
In the picture, you can see the bottom text cropped (fami)
I have managed to figure it out with removing the flex: 1 from the views and adding:
onContentSizeChange={this.scrollListToStart}
that will run only once at the start using a state variable.
Here in my application I have added 2 images side by side in a scrollView but they are joined each other I want them to be saperated by spaces.
here is the image of how it looks
Here is the code:
<View style={{ height: 230, marginTop: 20, justifyContent:'space-around' }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} >
<Image source={require('../assets/images/restaurant.jpg')} />
<Image source={require('../assets/images/experiences.jpg')} />
</ScrollView>
</View>
Add margin to each image and resize the images accordingly. If you dont want extra margin around every side of the images provide the first image marginRight and the second image marginLeft.
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 image in my component and I am trying to place an image on top of that. But only the first image shows, the one I am trying to place on top of it doesn't.
React Native supports zIndex. You can give your second image a style like this { zIndex: 1, position: 'absolute', ... // other position style } to put it on top of other view.
See https://facebook.github.io/react-native/docs/layout-props.html#zindex for reference.
Put the second Image inside the first one:
<View style={Styles.container}>
<View style={Styles.viewStyle}>
<Image
style={Styles.imageStyle}
source={require('./Bakgrundsbild.png')} >
<View style={Styles.logoViewStyle}>
<Image
style={Styles.logoStyle}
source={require('./Logo.png')}
/>
</View>
</Image>
</View>
</View>
You need to give ImageBackground & then give Image
<ImageBackground>
<Image></Image>
</ImageBackground>
like this
I have a ScrollView that I want to grow as needed up to a certain amount, but it seems to always be the size of maxHeight:
<ScrollView style={{flex: 1, maxHeight: "50%"}}><Text>Top</Text></ScrollView>
<View style={{flex: 1}}><Text>Bottom</Text></View>
What I wanted was for the Top view to be pretty small. And if the text there was longer, it would get taller as needed, but never taller than 50% of the screen. Is that possible?
I have had to do something similar and found the solution to be:
<View style={{maxHeight:"50%"}}>
<ScrollView style={{flexGrow:0}}>
<Text>Top</Text>
</ScrollView>
</View>
<View style={{flex: 1}}><Text>Bottom</Text></View>