override react native style

Question

I want to override some sub-component of style in react native.like - I have created an style CircleShapeView

 const styles = StyleSheet.create({
      CircleShapeView: {
        width: 50,
        height: 50,
        borderRadius: 50/2,
        backgroundColor: '#000'
    },
    });

I want change backgroundColor ,when i am usins this style. some thing like this.

<Image
style={backgroundColor: "#fff", styles.CircleShapeView}                   
...
/>  

What is right way to do it?

Answer 1

To override the backgroundColor, you could just do this:

<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}                   
...
/> 

A more flexible way of overriding style would be to pass an additional style prop to your subcomponent.

You would call your subcomponent like that:

<Subcomponent passedStyle={{ backgroundColor: '#fff' }} /> 

Apply passed style to your image:

<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}                   
...
/> 

Answer 2

To add to the other answers here, make sure that you are specifying the inherited props style AFTER the style on the component you are trying to override.

Example: Do this:

<Image
   style={[ styles.CircleShapeView, this.props.passedStyle ]}                   
   ...
/> 

Not this:

<Image
   style={[ this.props.passedStyle, styles.CircleShapeView ]}                   
   ...
/> 

The second example will NOT override the style on the component.