How can I change the color of the component that I created after calling? - react-native

Question

For the below logout component I want to change its TintColor and text color , what should I code?
I tried adding style here but it doesn't work.
<MenuItems listingname="Logout"
onPress={() => {
this.RBSheet.close();
this.props.notifyCountrUpdtHndlr(0)
AuthHelpers.logout(this.props.navigation,true);
}}
imagesource ={IMAGE.LOGOUT_ICO}/>

Answer 1

you can go inside MenuItems component and change the style there
(click on MenuItems component name and press F12 key)
just find Image and Text Component and add your styles
(to find Image and Text component inside MenuItems search listingname and imagesource)
<Image style={yourNewStyle}/>
<Text style={yourNewStyle}> </Text>

Answer 2

The very basic method you can use Inline CSS
<div style={{ backgroundColor: 'red' }}>
This component has a red background
</div>
And Another Method is Using CSS class selector
.red-background {
background-color: red;
}
// component
<div className="red-background">
This component has a red background
</div>
Also you can change the color of the component dynamically like
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
backgroundColor: '#F5FCFF'
};
}
changeColor = () => {
this.setState({
backgroundColor: '#123456'
});
}
render() {
return (
<View style={{backgroundColor: this.state.backgroundColor, height:100, width: 100}}>
<Text onPress={this.changeColor}>Click Me!</Text>
</View>
);
}
}
export default MyComponent;