Menu
When i use tintColor property it fills the whole image to the color i specified to the tintColor property. Is i am using it wrong or its job is the same what i get? Can anyone tell for what purpose this property is used for <Image/> component and what is the proper use of this property? A little example will be more appreciated. Thanks !!!
Reference link
210
tintColor Changes the color of all the non-transparent pixels to the tintColor.
The tintColor prop is used to override or change the colour of non transparent images like PNG images. So in this tutorial we would learn about Example of Image Tint Color in React Native.
To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want. to set the height of the Image to 300 and the width to null to fit the Image to make the width flexible and maintain aspect ratio.
To resize local image files, we created react-native-image-resizer. Give it the path of an image and new dimensions and it will generate a new image with these dimensions. You can use an image from the camera roll or a base64 encoded image.
Using tintColor in <Image> is not working.
Using it in the style of <Image> works.
Ref: https://github.com/facebook/react-native/issues/17124
102
<Image
tintColor='#2d3436'
style={{width: 20, height: 15,margin:10}}
source={{uri: 'backsignup'}}
/>
This works fine for android but not in ios
If you want it to work on ios as well go with this ie. passing tint color with style instead of passing it as a props
<Image
style={{ width: 20,height: 23,margin: 10,tintColor: "#2d3436"}}
source={{ uri: "pdficon" }}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With