I'm having issues trying to set resizeMode: 'cover' in Image component
This image summarizes my issue :
I'm testing it on Android, RN 0.55.3 and this my sample code
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover' }}
/>
</View>
Also tried :
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1 }}
resizeMode='cover'
/>
</View>
But neither is working, so is there any way to get it work properly ?
I found that resizeMode doesn't work properly unless I set the width of the Image
I used width: 'auto' and everything worked well
the final code :
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover', width: 'auto' }}
/>
</View>
I define Image tag as below. resizeMode outside the style.
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1,width : 'auto'}}
resizeMode={'cover'}
/>
</View>
this works for me.
Related
I have image background with "3 level circle shape" (see image)
I would like to set text "hello" into center of circles. Looks like its almost imposible for all devices.
How can I do it?
Mu current code is:
return (
<ImageBackground source={background} resizeMode="cover" style={{ width: '100%', height: '100%' }}>
</ImageBackground>
I tried to use absolute position, but it is bronek on second device. Is there any trick?
Original image size (in asset folder) is 1080x2400
Thank you.
Why not create the circles manually? That way centering can be taken care of automatically. Example (you'll have to tweak values/add circles):
<View style={{ flex: 1, backgroundColor: '#F9F3EE' }}>
<View
style={{
backgroundColor: '#F6EFF2',
top: -100,
width: 700,
height: 700,
left: -(700 - Dimensions.get('window').width) / 2,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 350,
}}
>
<View
style={{
backgroundColor: '#ECE4DD',
width: 500,
height: 500,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 250,
}}
>
<View
style={{
backgroundColor: '#E2D7D0',
width: 300,
height: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 150,
}}
>
<Text>Hi</Text>
</View>
</View>
</View>
</View>
Just noticed a very weird behavior when using flexWrap on React-Native and wanted some help to understand if there's any explanation for that.
In summary:
I have a horizontal container that uses flexWrap, with two vertical child containers that will have two squares inside each. The squares have different heights. If I use space-between in the vertical child containers with flexWrap in the horizontal container, the children will overflow. If I remove flexWrap, things work correctly.
This problem doesn't happen on react-native-web, but happens on Android and iOS.
Expo with code: https://snack.expo.dev/fHKKvLlew
Without flexWrap (expected behavior, works correctly)
<View style={{ backgroundColor: 'purple', flexDirection: 'row' }}>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
With flexWrap (unexpected behavior)
<View style={{ backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
Anyone knows why the result is not the same when using flexWrap, given that there's still a lot of space available? And why children overflows?
Seems to be a bug (specially because it works fine on web). If so, any idea of a workaround that could result on similar results?
I test the code using codesandbox and I am not able to replicate the problem:
Perhaps there is sometime else causing the problem.
EDIT:
As mentioned, this behavior happens just for react native mobile, not for react native web, one way to get around this is by adding:
alignItems: 'flex-start'
As described in this this post:
Due to performance tweaks flexWrap: wrap no longer works together with alignItems: 'stretch' (the default). If you use flexWrap: wrap you probably will want to add the alignItems: 'flex-start' style as well.
So to replicate your configuration you may try:
<View style={{ alignItems: "flex-start", backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ alignSelf: "stretch", borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
I'm not able to find markerview in MapBox in this github library
https://github.com/react-native-mapbox-gl/maps, So can anyone help me please?
Or else I'm using PointAnnotation in it like this,
<MapboxGL.MapView style={{ flex: 1 }}>
<MapboxGL.Camera centerCoordinate={[22.470701, 70.057732]} zoomLevel={14} >
</MapboxGL.Camera>
<MapboxGL.PointAnnotation
id="foo1"
coordinate={[22.470701, 70.057732]}
title={'Hello'}>
<View style={{ flexWrap: 'wrap', backgroundColor: 'blue' }}>
<Image source={require('./chat.png')} style={styles.tinyLogo} />
<Text style={{ color: 'white', margin: 10 }}>$50.00</Text>
</View>
<MapboxGL.Callout style={{ borderRadius: 20, width: 150, height: 120 }}>
<View style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
<Text style={{ marginHorizontal: 10, marginTop: 10 }}>123, Main st,</Text>
<Text style={{ marginHorizontal: 10, marginBottom: 10 }}>Chicago, IL 6061</Text>
<TouchableOpacity style={{ backgroundColor: 'orange', margin: 10, alignItems: 'center' }}>
<Text style={{ margin: 10, color: 'white' }}>Select Shop</Text>
</TouchableOpacity>
</View>
</MapboxGL.Callout>
</MapboxGL.PointAnnotation>
</MapboxGL.MapView>
But that image is not showing, so can anyone help me with what should i do?
Thanks in advance.
An example of MarkerView usage is available here
The MarkerView documentation is available here
From this documentation
If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
So if you are in this case, it seems that you're doing good.
I have visited so many websites and read many articles but couldn't find any solution. I want a ui in which each row contains two images. I have done this by adding view tag in every new row but i want to do in in a single View tag. Kindly help
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
resizeMode="stretch"
source={require('../assets/images/Home/zinger_ratha.jpg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch', }} />
<Text style={{ fontSize: 18 }}>Zinger Ratha</Text>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
source={require('../assets/images/Home/arabian_delight.png')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch' }} />
<Text style={{ fontSize: 18 }}>Arabian Delight</Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
resizeMode="stretch"
source={require('../assets/images/Home/mingle_bucket.jpg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch', }} />
<Text style={{ fontSize: 18 }}>Mingle Bucket</Text>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
source={require('../assets/images/Home/xtreme_box.jpeg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch' }} />
<Text style={{ fontSize: 18 }}>Xtreme Box</Text>
</View>
</View>
</View>
I want like this but in single View tag
You can do the following:
import Dimensions from react-native,
The idea here is to give the View a width of whatever percentage of the phone screen size and then give the image a percentage of the View that would give you what you want.
For example, if I want to display three images in a row, I can give my View a width of 90% and flexWrap: wrap, and give each image inside it a width of 30% so it can only contain 3 images in a row.
You can do the following for your case.
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('screen');
// inside your render or return
<View style={{ width: width * 0.9, display: "flex", flexDirection: "row", flexWrap: "wrap", alignContent: "center", alignItems: "center", justifyContent: "center" }}>
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
</View>
or if you need to put it in a flatlist you can do something like this:
numColumns={2} // you need to specify the number of columns here
<FlatList
style={styles.dashboard}
data={this.categories}
renderItem={this.renderItem}
keyExtractor={item => item.id}
numColumns={2}
/>
when I use <Image /> tag it has resizeMode='contain' to resize image. However, <Animated.Image /> doesnt have. so I cant adjust my image size. How can i solve this ?
<View style={{ backgroundColor: 'black', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<StatusBar hidden />
<Animated.Image
source={require('../Image/img.png')}
style={{
height: 100, width: '80%', opacity: this.opacityValue,
transform: [{ scale: rotateX }],
}} >
</Animated.Image>
</View>
i did this however it isnt good solution. It can seem bad on other phones
this can help you scale the image and still retain resizeMode='contain'
<View style={{ backgroundColor: 'black', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<StatusBar hidden />
<Animated.View style={{ transform: [{ scale: rotateX }] }}>
<Image
source={require('../Image/img.png')}
resizeMode='contain'
style={{
height: 100, width: '80%', opacity: this.opacityValue,
}} >
</Image>
</Animated.View>
</View>