how can i change the color of text and tint color of image of a components using props in react native? - react-native

Question

I have made a custom button and below is the code.
export class MenuItems extends Component {
constructor(props) {
super(props);
this.state = {
loading: true
};
}
render() {
let { navigation, listingname, imagesource,} = this.props;
return (
<View >
<TouchableOpacity
onPress={this.props.onPress}
style={[styles.menuStyle]}>
<View style={{ flexDirection: 'row', }}>
<Image source={imagesource} style={[styles.menuItemIcon,{tintColor:'black'}]} />
<Text style={[styles.menuTextstyle]}>{listingname} </Text>
</View>
</TouchableOpacity>
</View>
);
}
}
export default MenuItems;
Now I have reused it with different value and images . I want to change the tint color and text color of the custom button to blue . Below is the code.
\<MenuItems listingname="Logout"
onPress={() => {
this.RBSheet.close();
// this.props.navigation.replace('HomeApp', { screen: 'Home' })
// navigation.dispatch(StackActions.popToTop());
// reset Notification counter
this.props.notifyCountrUpdtHndlr(0)
AuthHelpers.logout(this.props.navigation, true);
}}
imagesource ={IMAGE.LOGOUT_ICO}/>
</View>
I want the image color in blue using tint color and text color of the component in blue. kindly provide the solution and correct the code.

Answer 1

Use style
const StyledImage = ({style}) =>
<Image
style={{width: 20, height: 20, ...style}}
...
/>
<StyledImage style={{tintColor: 'blue'}} />
or custom prop
const TintedImage = ({tintColor}) =>
<Image
style={{width: 20, height: 20, tintColor: tintColor}}
...
/>
<TintedImage tintColor='red' />