Default Source image is distorted on android release app.
Actual placeholder image size is 100x100 that is below.
<Image
style={{ height: 50, width: 50, borderWidth: 2, borderColor: '#fc6060' }}
source={ { uri: "https://host/static/08_l.jpg" }}
defaultSource={require('./../../assets/image/default_avtar_placeholder.png')}
resizeMode={"contain"} />
Why image is Distorted?
How to resolve this issue?
i know its very late .
Recently i also get stuck in this issue , what would i do just wrap Image Component into a View with some style like height and width and defaultSource is working fine according my requirements.
I had the same problem and by deleting the border styles I got it solved.
Related
I have a logo I want to put in the middle of the screen but after defining the dimensions of the logo, it seems doing resizeMode='contains' doesn't behave like it should.
If I use resizeMode='contain', my screen appears with the image overextending the page. I could just use resizeMode='center' to make it appear in the center like this but I'd like to know why contain doesn't seem to work. I've tried adjusting the width and height of the logo dimensions but I keep getting the same result.
I'm using Expo Go on Android to display the screen, and React Native v0.68.2.
my code:
import {View, Text, Image, StyleSheet, useWindowDimensions} from 'react-native';
import Logo from '../../../assets/images/logo.png';
import CustomInput from "../../components/CustomInput";
const SignInScreen = () => {
const {height} = useWindowDimensions();
return (
<View style={styles.root}>
<Image
source={Logo}
styles={[styles.logo, {height: height * 0.3}]}
resizeMode='center'
/>
<CustomInput/>
</View>
);
};
const styles = StyleSheet.create({
root: {
alignItems: 'center',
padding: 20,
},
logo: {
width: '70%',
maxWidth: 300,
maxHeight: 100,
},
});
export default SignInScreen;
edit 1: I managed to get the logo to not cover the whole screen. But when I try adjusting the proportion the logo takes of total screen height like user DhavalR suggested or passing resizeMode in style suggested by user Bhavya Koshiya, it doesn't affect the size of the image and just stays constantly like this.
what I changed the code to:
<Image
source={Logo}
style={[styles.logo, {width: height * 0.4, height: height * 0.4, resizeMode: "contain"}]}
// resizeMode="contain"
/>
the only thing now that works to adjust the size of the logo on my screen is if I used this:
<Image
source={Logo}
style={[styles.logo, {width: 150, height: 200}]}
resizeMode="contain"
/>
But only changing the number for width makes the logo bigger/smaller, and height doesn't seem to do anything. I'm still unsure why height: height * 0.3 doesn't work.
Resize mode contain
Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
You can read more about that here resizeMode
In Your case you give height * 0.3 it take total screen heigth of 30%.
considering your image does not have padding around, I think this should make it look like your expected result
pass resizeMode in style instead as a prop
<Image
source={Logo}
styles={{ width: width * 0.6, height: width * 0.6, resizeMode: 'contain' }}
/>
const styles = StyleSheet.create({
root: {
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
});
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
All of my gifs are on non-solid backgrounds. The only way to get GIFs to respect borderRadius right now is to use a hack called overlayColor per:
Rounded corner issue with GIF image in react native android
https://github.com/facebook/react-native/issues/11363
Does anyone have any other solution? overlayColor is not a solution for my use.
The solution for me was to wrap the Image in a View and have both the Image and the View with the same borderRadius.
EDIT: originally I said the image needed to have an overlayColor but it looks like it has no effect (which makes sense). Added code example that I'm using:
<View style={{ width: 80, height: 80, borderRadius: 40, overflow: 'hidden' }}>
<Image
source={image}
resizeMode='cover'
style={{
borderRadius: 40,
alignSelf: 'center',
width: 80,
height: 80
}} />
</View>
I'm trying to display a ToolbarAndroid with a hamburger icon. I'musing the code:
_buildToolbar (msg) {
const navIcon = require("../../icons/menu.png");
return (
<ToolbarAndroid
title={msg}
style={{
height: 56,
alignSelf: "stretch",
}}
onIconClicked={this.props.openDrawer}
navIcon={navIcon}
/>);
}
The toolbar displays, but the nav icon doesn't. I get the warning Failed prop type: Invalid prop navIcon supplied to ToolbarAndroid. The file does exist, and looking under a debugger navIcon is defined. Looking for any help here. Using an Icon based toolbar is probably not a workable solution, as due to some of our customization features getting the right font would become difficult.
Edit:
Changing to:
<ToolbarAndroid
title={msg}
style={{
height: 56,
alignSelf: "stretch",
}}
onIconClicked={this.props.openDrawer}
navIcon={
{ uri: navIcon }}
/>);
Got rid of the warning but did not fix the display issue.
Edit2:
It looks like something with our build system here (which uses the same stack as our web build system, not the normal RN tools) is loading the files as a different data type- its loading them as data uris. I'm not sure what they normally are. But when the ToolbarAndroid is passed a uri, it assumes it will be a file, an http/https url, or a name of a drawable in our drawable folder. So it looks like we're going to need to debug our build system, or hard code this image (which being a hamburger icon isn't the end of the world).
The navIcon format seems to be specific:
Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished action bar icon dimensions, corresponding to a given generalized screen density, are shown in the table below.
18 x 18 px
24 x 24 px
36 x 36 px
48 x 48 px
https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar
Also you can use Icon.ToolbarAndroid from react-native-vector-icons :
https://github.com/oblador/react-native-vector-icons
This (ES6) code works on my app:
import navIcon from '../Images/navIcon.png'
...
<ToolbarAndroid
title={'test'}
style={{
height: 56,
alignSelf: 'stretch',
}}
onIconClicked={this.props.openDrawer}
navIcon={navIcon}
/>
The navIcon file:
I am simply trying to take a square image and contain it within a circle in my react-native app on Android. A circle image basically.
<View style={mainStyle.profileImageContainer}>
<Image
style={mainStyle.profileImage}
source={{uri: CONFIG.media_url+this.props.image}}
resizeMode="cover"
/>
</View>
and styles:
profileImageContainer: {
translateY: -43,
alignSelf: 'center',
},
profileImage: {
resizeMode: 'cover',
height: 86,
width: 86,
borderWidth: 2,
borderRadius: 75,
overlayColor: CREAM,
},
But the only way to get it remotely circular on Android is to add the "overlayColor", but I need this to be transparent so the design behind is visible. The property transparent does not work.
Does anyone have any ideas how to achieve this? Am I missing some sort of simple property?
EDIT: Thanks to Dhruv Parmar's answer, I realised the issue is because I was using a GIF image. The method you would expect seems to work fine with jpgs and pngs, but not GIFS!
You don't need to have a wrapping view to achieve this, simply using borderRadius set to half of image size should do the trick. Any other styles you want can be applied directly to Image view
You can see an example here https://snack.expo.io/rJI4DzoDW
Use this style;
image: {
width: 150,
height: 150,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 3,
borderColor: "red"
}