ratingBackgroundColor appears to the right of the star component

[yangfreezy]

See screenshot below. I think there may be an issue where the width of whatever view ratingBackgroundColor is inside does not entirely align with the view that contains the tintColor, resulting in a slight sliver of the ratingBackgroundColor div appearing to the right of the star component. <Rating type="custom" ratingColor={colors.orange} ratingBackgroundColor={colors.progressBarBackground} ratingCount={5} tintColor={backgroundColor || 'white'} imageSize={20} startingValue={rating || 0} readonly fractions={1} onFinishRating={onPress} />

[ui-ninja]

@yangfreezy This package is good, I use it in multiple project. But two small problems in this package irritates me:

1. line in background
2. In Android, when this is used inside <TouchableOpacity />, over tapping for couple of ms, it shows grey background behind star images.

I was facing the exact problem in this package. So i just created small package(readonly ratings) https://github.com/ui-ninja/react-native-rating-element. (Uses Ionicons for stars)

[yangfreezy]

Here's a similar issue in android, except this time the rating color leaks, instead of the background color.

[ui-ninja]

Strange.. Can you provide code snippet for this issue? This will help in reproducing it at my end using react-native-rating-element

[yangfreezy]

@ui-ninja sorry - i think there was a miscommunication. the screenshot and issue above is with the react-native-rating package. I just switched over to your package, react-native-rating-element and it works perfectly! thanks so much for actively promoting your package and commenting on it :D

[ui-ninja]

Glad it could help 👍

[anshulasethi]

@ui-ninja Your package worked like a charm .. Thanks for posting it!

[anastely]

I got same issue :) Not fixed yet?

[mit4dev]

Having the same issue on android

[micnguyen]

I am also experiencing this on Android API 28 with the following code:

<Rating
          type='star'
          ratingColor={Colors.starAmber}
          imageSize={20}
          startingValue={2})}
          readonly
        />

[dejolt]

I managed to get around this bug by doing the following:

1. Modify SwipeRating.js in the node packages folder

2. Adding left:1 to the starsWrapper style

Seems to work fine on both android and iOS.