Images are rendered in different aspects in ios and android using image component from react-native. I’m trying to display image with 45 degree angle cutoff every corner.
I have tried to use cover, contain and center of the resizeMode prop cover fills the image inside the view giving the 45 degree cut but crops either width or height.
Center does not crop the image but if the image isn’t similar ratio as the view the 45 degree angles aren’t cut of the image, Android does this well though.
<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>
<View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />
<View style={styles.imageWrapView}>
<Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />
</View>
<View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />
</View>
Want to get uncropped images on ios that have corners cut of by 45 degrees. Same as is in the android images. Here are images from android device that are rendered correctly.
Here are the images rendered on ios using center and cover
This is rendered using contain on ios
How can I get the images rendered with 45 degree cutoff on ios device as it is on an android device?
if you set overflow to hidden the border radius will start working again
borderRadiusFix:{
borderRadius: 5,
overflow: 'hidden',
}
same problem are occure with me. In my case borderRadius are working for android but not working for ios so i followed the folloowing code....
This is my styling item for Touchable button you can use Image in place...
<View style = {styles.button}>
<TouchableOpacity >
<Text style={{textAlign:'center',color:'#ffff'}}>
Login
</Text>
</TouchableOpacity>
</View>
and my styling....
button: {
borderRadius:20,
marginTop:20,
alignSelf:'center',
textAlign:'center',
width:'70%',
height:'7%',
fontWeight:"bold",
color:'#ffff',
paddingTop:10,
backgroundColor: '#00AABF'
}
Try this
<View
style={{
width: 250,
height: 150,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
overflow: 'hidden'
}}
>
<Image
source={{ uri: imageUri }}
style={{
width: 250,
height: 150
}}
/>
</View>
You can use following props for 45-degree angle cutoff every corner.
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
Related
I have a modal that a link is passed to for image pinch zoom and it works perfectly on iOS, but apparently android has a limitation with the fresco plugin. I get an error Pool hard cap violation? Hard cap = 201326592 Used size = 191114208 Free size = 0 Request size = 10933048 error. This results in nothing showing.
How does one handle images inside a modal that a user can zoom/pan with? It works perfectly on iOS - It's just android that's having this issue. I don't want to really resize it because the user should be able to zoom, so we want it to be larger than the view. Documentation doesn't cover this at all.
Code (for illustration purposes):
<Modal ref={modalRef} supportedOrientations={['landscape', 'portrait']} animationType='fade' visible={!!modalImage} style={{...StyleSheet.absoluteFillObject}}>
<StatusBar backgroundColor={"#000"} />
<View style={{flex: 1, backgroundColor: '#FFF', position: 'relative'}}>
<TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 20, right: 20}} style={{position: 'absolute', top: '5%', right: '5%', width: 20, height: 20, zIndex: 999}} onPress={() => setModalImage(null)}>
<Image style={{width: '100%', height: '100%'}} source={require('../assets/icons/Miscellaneous/Close/close-dark-mode.png')} />
</TouchableOpacity>
<ReactNativeZoomableView
ref={zoomableRef}
style={{width: '100%', height: '100%', backgroundColor: '#000'}}
maxZoom={3}
minZoom={1}
zoomStep={3}
onShiftingBefore={_onShiftBefore}
onShiftingAfter={_onShiftAfter}
>
<Image onError={(e) => console.log('error', e.nativeEvent.error)} style={{width: '100%', height: '100%'}} resizeMode='contain' resizeMethod='resize' source={{ uri: `https://website.com${HtmlTextParser(modalImage ?? '')}` }} />
</ReactNativeZoomableView>
</View>
</Modal>
I'm using a zoomable view inside a modal in the same manner that you explained but never ran into this issue, the difference I found between our implementations is that I have those props specified in zoomable view and not inside the image style.
contentWidth={}
contentHeight={}
I'm not sure if you're using the deprecated one, if so I'd suggest that you try this instead
https://github.com/openspacelabs/react-native-zoomable-view
let me know if those suggestions helped.
I have an image viewer box in my app box has the size 300px x 300px when I set the image in it and the image has the width and height 100% of this box now I set it resizeMode: 'contain' every image shows in the center of this box, but I need it to show the image in the corner of the box
<View style={{
width: 300,
height: 300
}}>
<Image
source={item.img_url}
style={{
width: '100%',
height: '100%',
resizeMode: 'contain'
}}
/>
</View>
Check this attachment the logos of companies have the same height but the width is different and the image is always in the corner I need something like this in my scenario.
I have one big problem on Android in React Native.
The React version is 0.39
The render function is as follows:
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<View style={{ height: y_vis, width: x_vis}} onStartShouldSetResponder={this.onBullsEyeMove.bind(this)} onMoveShouldSetResponder={this.onBullsEyeMove.bind(this)} onResponderMove={this.onBullsEyeMove.bind(this)} onResponderRelease={this.onBullsEyeSet.bind(this)}>
<Image style={{position: 'absolute', top: top * -1, left: left * -1, width: p_width, height: p_height}} source={this.state.item.image} resizeMode="contain"></Image>
</View>
</View>
</View>
)
On iOS it works fine, like is should, but on android a have a strange problem.
Only first time it renders the photo, second time it renders white screen, without photo.
Is it an react native bug as mentioned here or is it something else? Does anybody have an idea?
I have the following Image component paired with two Text elements in a React Native flexbox:
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
<Image
style={{
width: 100,
height: undefined,
margin: 4,
// borderWidth: 1,
// borderColor: '#777',
}}
source={{uri: image.url}}
resizeMode='center'
/>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
<Text style={styles.title}>{article.promotionContent.title.value}</Text>
<Text style={styles.description}>{article.promotionContent.description.value}</Text>
</View>
</View>
It porduces this output when implemented as above:
However I suspect that it doesn't adjust view bounds since I get white space above the image (it's supposed to align to the top) and if I add borders to the View, i.e. uncommenting the two lines, I get this weird artifact:
Have anyone else experienced this?
If you want to test my project, check out commit 3a3f705c271a0b523a1769536d16984c5dd47233 in this repo
My question is somewhat laden with assumptions. My end goal is to rescale height after having set a constant width, add border and top align.
React-Naive suggests developers to state image dimension before runtime. I know this is a good practice. My question is... How about if I want to resize an <Image> to the same width as its contained <View> with unknown width?
For example, I have an <Image> in a <View> with rowDirection: 'row', flex: 0.8. In different device I have different screen width. How do I know the actual width of 80% of the device?
P.S. I have tried all resizeMode but no luck.
Can anyone help me thanks!
UPDATE 1
I have tried this snippet
<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
<Image
source={require('../resources/images/side-menu-header.png')}
style={{ width: null, height: null, flex: 0.8 }} />
<View style={{ flex: 0.2 }} />
</View>
Result image of above code
However, yes, this image is now set to 0.8 in width, but some its area has been cropped. This is not what I want to get. Therefore, I set its resizeMode to contain as below snippet
<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
<Image
resizeMode='contain'
source={require('../resources/images/side-menu-header.png')}
style={{ width: null, height: null, flex: 0.8 }} />
<View style={{ flex: 0.2 }} />
</View>
Result image of above code
This is not what I expected too! As you see, the image is now become 0.8 in width and the whole image is shown, but the top and bottom space is occupied by its original dimension. (The Original image dimension is large)
I think I can simplify this question in few words: How do I show a full width image in my app? I cannot set its width to 1080 since not all device has a width of 1080 pixel.
Use Dimensions API for making image size dynamic.
Sample code:
const { width, height } = Dimensions.get('window');
<Image
source={{uri: `${url}`}}
style={{ width: width * 0.8, height: height * 0.8 }}
/>
The width * 0.8 and height * 0.8 is the 80 percentage for your screen size width and height respectively.
As far as i'm concerned, what you need is a api to get the size of device.
Try Dimensions, use like this:
let {height, width} = Dimensions.get('window');
Pass a width and height of null to the style prop, like so:
<Image resizeMode='cover' source={{ uri: 'image.png' }} style={{ width: null, height: null, flex: 0.8 }} />