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>
Related
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>
enter image description here][2][![I am facing problem here inside the Card, able to see description part i am trying to implement its coming below the image actually it suppose to come beside the image
`
<ListItem>
<Card
style={{
marginTop: 0,
marginBottom: 0,
marginRight: 0,
marginLeft: 0,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
flexDirection: 'row',
}}>
<View style={{flex: 1}}>
<CardItem>
<Thumbnail
source={require('../../assets/images/restaurant_128.png')}
/>
</CardItem>
</View>
<View style={{flex: 3, flexDirection: 'column'}}>
<CardItem>
<Body>
<Text>{item.Title}</Text>
<Text style={{backgroundColor: 'green'}}>
{item.Description}
</Text>
</Body>
</CardItem>
</View
</Card>
</ListItem>
`
try this:-
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: "#B8B2B2",
width: "100%",
height: 100
}}>
<View style={{
width: "30%",
backgroundColor: "red",
height: 100
}}>
<Text>left image here</Text>
</View>
<View style={{
width: "70%",
backgroundColor: "#B8B2B2",
height: 100
}}>
<View style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#fff",
height: 50
}}>
<View style={{
width: "30%",
backgroundColor: "teal",
height: 50
}}>
<Text>lamb samosa</Text>
</View>
<View style={{
width: "30%",
backgroundColor: "teal",
height: 50
}}>
<Text>$4.5</Text>
</View>
</View>
<View style={{
width: "100%",
backgroundColor: "#B8B2B2",
height: 50
}}>
<Text>Lorem Ipsum</Text>
</View>
</View>
</View>
The component that was left alone should be on the left. I tried to use align-items: 'flex-start', but it didn't work.
I'm trying to make a responsive layout where it fits several components in line, depending on the dimensions of the user's device.
<View style={{flex: 1}}>
<ScrollView showsHorizontalScrollIndicator={false}>
<View
style={{
justifyContent: 'space-evenly',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}>
<View
style={{
backgroundColor: 'red',
width: width / 2.5,
height: 200,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={{
width: 100,
height: 100,
}}
source={{
uri:
'https://images-na.ssl-images-amazon.com/images/I/51JZpJPClEL._AC_SL1000_.jpg',
}}
/>
<Text>Xiaomi Redmi note 8</Text>
</View>
</View>
</ScrollView>
</View>
Hello :) I would suggest doing the following:
calculate the left/right margin according to the container's & item's width
const marginHorizontal = (width / 2.5) / 6; // where 6 is 2 blocks in a row multiplying 3 spaces (left-right-center)
use the space-between & marginHorizontal applied to the container:
<View style={{flex: 1}}>
<ScrollView showsHorizontalScrollIndicator={false}>
<View
style={{
justifyContent: 'space-between',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
marginHorizontal,
}}>
<View
style={{
backgroundColor: 'red',
width: width / 2.5,
height: 200,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={{
width: 100,
height: 100,
}}
source={{
uri:
'https://images-na.ssl-images-amazon.com/images/I/51JZpJPClEL._AC_SL1000_.jpg',
}}
/>
<Text>Xiaomi Redmi note 8</Text>
</View>
</View>
</ScrollView>
</View>
let me know if it helped or not ;)
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}
/>
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.