Hello friends, In today’s tutorial we would learn about Image component prop 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.
Icon Images used in current tutorial :-
Question :- Now the next question comes in our mind why we use tintColor in react native ?
Answer : For example just think out of the box, Like we have a non transparent black & white image like a ICON. Now using the tintColor we can change the Icon color to any color as per our requirement. Its like repainting the wall to our choice color.
Contents in this project Example of Image Tint Color in React Native :-
1. Open your project’s main App.js file and import Text, View, StyleSheet, Image and Platform component.
|
1 2 3 |
import React from 'react'; import { Text, View, StyleSheet, Image, Platform } from 'react-native'; |
2. Creating our main export default App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating a Root View component, Now we would create 3 Image component with ICONS and overlap their black and white color using tintColor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<View style={{ flexDirection: 'row', justifyContent: 'center' }}> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/11/bookmark-icon.png' }} style={{ height: 50, width: 50, resizeMode: 'cover', marginTop: 20, tintColor: '#00C853' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/11/edit-icon.png' }} style={{ height: 50, width: 50, resizeMode: 'cover', marginTop: 20, tintColor: '#00B8D4' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/11/remove-icon.png' }} style={{ height: 50, width: 50, resizeMode: 'cover', marginTop: 20, tintColor: 'crimson' }} /> </View> |
4. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, text: { fontSize: 24, textAlign: 'center' } }); |
5. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import React from 'react'; import { Text, View, StyleSheet, Image, Platform } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Example of Image Tint Color in React Native </Text> <View style={{ flexDirection: 'row', justifyContent: 'center' }}> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/11/bookmark-icon.png' }} style={{ height: 50, width: 50, resizeMode: 'cover', marginTop: 20, tintColor: '#00C853' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/11/edit-icon.png' }} style={{ height: 50, width: 50, resizeMode: 'cover', marginTop: 20, tintColor: '#00B8D4' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/11/remove-icon.png' }} style={{ height: 50, width: 50, resizeMode: 'cover', marginTop: 20, tintColor: 'crimson' }} /> </View> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, text: { fontSize: 24, textAlign: 'center' } }); |
Screenshot :-
