How to give space between two stars in react-native-ratings

[nihp]

How to give space between two stars in react-native-ratings.

I have give padding, marginLeft and marginRight. But there is no way to give space between two elements.

[arifo]

Same issue, need some padding between starts

[Monte9]

I don't think there is a way to do that right now, but should be easy enough with a containerProp. I can add that in the next release.. maybe this weekend?

[arifo]

just for the info: I have also noticed that in line 154 at rating.js styles.starContainer has not been defined https://github.com/Monte9/react-native-ratings/blob/93327ad36c2ac488a4431bb2fdbd90d56379ed0c/src/rating.js#L154

[Monte9]

Ah good catch. @arifo if you know what you need to do, can you submit a PR?

[a-eid]

any updates on this?

[chai86]

@Monte9 I really need to be able to add some padding between a custom .png i'm using (just like you'd do with stars). I've modified my .png file to create space to the left and right of my icon, but in the <Rating> component, they're still squished together. Please update in a new release!

[MannySauce]

@Monte9 I see you m8, try: containerStyle={{width:140}} maybe wrap it into a view if you need to move it a bit more (the component as a whole)

just found this out 2 mins ago so im not too sure how viable or flexable this is.

[MannySauce]

@Monte9 && @chai86 I see you m8, try: containerStyle={{width:140}} maybe wrap it into a view if you need to move it a bit more (the component as a whole)

just found this out 2 mins ago so im not too sure how viable or flexable this is.

[chai86]

@Monte9 && @chai86 I see you m8, try: containerStyle={{width:140}} maybe wrap it into a view if you need to move it a bit more (the component as a whole) just found this out 2 mins ago so im not too sure how viable or flexable this is.

Nope, any other ideas?

[chai86]

A part solution: The .png has to be a square. For example 256 x256 pixels, and some filler colour can be added to the sides of the image. However to add additional padding in the react-native-ratings module....remains to be resolved.

[anilkumartudu]

If you can sacrifice the pan gesture and will be okay with tap gesture then use AirbnbRating. Then in "node_modules/react-native-ratings/src/components/Star.js" add desired margin in styles variable defined at last.

const styles = StyleSheet.create( { starStyle: { margin: 3 } } );

3 is the default value but you can change it with your desired value.

[mrinal-roy]

@anilkumartudu We should not modify it in node_modules

[anilkumartudu]

@mrinal-roy-au2 Sorry my bad i totally understand you should not modify node-modules. So let me rephrase it a bit you can clone this repository, apply your changes and add your git URL as a dependency in package.json.

[mrinal-roy]

@anilkumartudu Thanks. I forked and applied my changes and committed & pushed to my git repo. Now how will npm recognise my forked and committed repo through the package.json file dependency if it is not approved by npm? Will I have to first raise a PR and get PR approved by merging changes in the original npm repo? @Monte9 could you please reply to above question? (Whoever can at the earliest please). I have to deliver a build which can be done with my forked and changed files; but my colleagues cannot have it in their machines if it is not through npm library; so need this clarification how to go about it...

[anilkumartudu]

@mrinal-roy-au2 Okay, so after applying changes and committing it to your repo just follow up this process. Hope this help you.

[mrinal-roy]

Thank you @anilkumartudu very useful feature you shared and I am through with our application implementation !

[anilkumartudu]

@mrinal-roy-au2 Glad to know that i was able to help you.

[TrushalRank]

@nihp , Have you tried with starStyle attribute for giving particular star style?

[bravemaster619]

@TrushalRank Rating component does not have starStyle props. It's for AirbnbRating component only.

[jingyazh]

I have fixed the space issue between stars. Set width in starContainerStyle with whatever you want. And justifyContent: 'space-between'. Looks great!

[hapSa000]

I have a solution for this issue just provide a width to starContainerStyle according to you and add justifyContent: 'space-between' in starContainerStyle it will perfect for Eg => starContainerStyle={{ marginTop: hp('2%'), justifyContent: 'space-between', width: '80%', }}

[Dasu-Uthpala]

I have fixed the space issue between stars. Set width in starContainerStyle with whatever you want. And justifyContent: 'space-between'. Looks great!

give the width to it like
width: 400, justifyContent: "space-evenly",

[iyadztabika]

@jingyazh @hapSa000 @Dasu-Uthpala i've tried the solution but i ended up getting like this, any idea to fix this anyone ? https://ibb.co/kQth1mN

[pierregambaud]

@iyadztabika starStyle did the trick for me.

This prop is not mentioned in the doc but was added in 2021 (see https://github.com/Monte9/react-native-ratings/issues/53).

https://github.com/Monte9/react-native-ratings/blob/854099c8b4a9b3215d51f8d60dff793e5775f96a/src/components/Star.tsx#L21

<AirbnbRating
  showRating={ false }
  defaultRating={ rating }
  starImage={ STAR_IMAGE }
  selectedColor={ selectedIconColor }
  size={ iconSize }
  starStyle={{ margin: X }} 👈 
  isDisabled
/>

[MahmudHasanMenon]

just do it. It will work for you starContainerStyle={{ width: 300, justifyContent: 'space-between' }}

[AbdullahTechxpert]

starContainerStyle={{ width: '100%', justifyContent: 'space-between', }}

[ramirezStefano]

Just saying AbdullahTechxpert if you were to just copy-paste and change the CSS width format to "100%" from MahmudHasanMenon might as well have at least have had the common courtesy of adding the code styling to the response, sloppy way to plagiarise... and personally this solution didn't work for me :/ 🤔