How to style component in React Native dynamically?

Question

I'm using the AirbnbRating component from this package.

The problem is with styling it dynamically as I'm using a global style file and defining all my styles there.

I need to change the size prop of AirbnbRating from that styles.js file.

Here is my code

<AirbnbRating
    onFinishRating={this.ratingCompleted}
    showRating={false}
    size={20}
    selectedColor="#0022FF"
    starContainerStyle={{
       alignSelf: "flex-start",
       backgroundColor: 'transparent',
       marginLeft: -3,
    }}
 />

In this line size={20} I need to do something like this

size={styles.ratingSize}

Is there a way to do it ?

EDIT:

My styles file is like this

export default {
    contain: {
         flex: 1,
    },
    ratingSize: {
         //what should this be ? 
    }
}

Answer 1

You can try to do :

ratingSize: { width: 20, }

Then styles.ratzingSize.width

You just need the value for it anyway.