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 ? 
    }
}

DevGuy · Accepted Answer · 2020-06-25T13:45:15.600

2

You can try to do :

ratingSize: { width: 20, }

Then styles.ratzingSize.width

You just need the value for it anyway.

edited Jun 25 '20 at 13:45

answered Jun 25 '20 at 13:35

DevGuy

123
1
3
10

What should path contain ? – Amine Jun 25 '20 at 13:38
Path to your style that you want to use. – DevGuy Jun 25 '20 at 13:39
But in style there is defined propterties like width, height, color, etc , The prop is called `size` – Amine Jun 25 '20 at 13:39
style.path.size? – DevGuy Jun 25 '20 at 13:40
I guess there is a missunderstanding here, I will edit my question with my style file so you get an idea – Amine Jun 25 '20 at 13:42

How to style component in React Native dynamically?

1 Answers1