Support change the background by select

README.md

@@ -100,7 +100,57 @@ export default GeneralStarExample
   <img src="https://github.com/djchie/react-native-star-rating/blob/master/assets/general-star-demo.gif" alt="General Star Example" width="336" height="600"/>
 </p>
 
-### Custom Star Case
+### Custom Star Case 1
+The following example could change star button background color by your select.
+<p align="center">
+  <img width="409" alt="image" src="https://user-images.githubusercontent.com/6138872/60478520-87a10080-9cb5-11e9-8989-8871862761dc.png">
+</p>
+
+```js
+import StarRating from 'react-native-star-rating';
+
+class CustomStarExample extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      starCount: 3
+    };
+  }
+
+  onStarRatingPress(rating) {
+    this.setState({
+      starCount: rating
+    });
+  }
+
+  render() {
+    return (
+        <StarRating
+		activeOpacity={0.6}
+          	disabled={false}
+          	maxStars={5}
+          	rating={this.state.starCount}
+		selectedStar={(rating) => this.onStarRatingPress(rating)}
+		buttonStyle={styles.ratingButton}
+		fullStarColor={'white'}
+		emptyStarColor={'white'}
+		emptyStar={'meh-o'}
+		fullStar={'meh-o'}
+		starSize = {20}
+		fullStarBackgroundColor={'#FFC64B'}
+		emptyStarBackgroundColor={'#EBEBEB'}
+        />
+    );
+  }
+}
+
+export default CustomStarExample
+```
+
+
+
+### Custom Star Case 2
 
 The following example will render 2.5 stars out of 7 stars using the `ios-star-outline` for the empty star icon, `ios-star-half` for the half star icon, and `ios-star` for the full star icon from the `Ionicons` icon set in red color.
 

StarRating.js

@@ -64,8 +64,10 @@ const defaultProps = {
   disabled: false,
   emptyStar: 'star-o',
   emptyStarColor: 'gray',
+  emptyStarBackgroundColor:'#00000000',
   fullStar: 'star',
   fullStarColor: 'black',
+  fullStarBackgroundColor:'#00000000',
   halfStar: 'star-half-o',
   halfStarColor: undefined,
   halfStarEnabled: false,
@@ -102,8 +104,10 @@ class StarRating extends Component {
       disabled,
       emptyStar,
       emptyStarColor,
+      emptyStarBackgroundColor,
       fullStar,
       fullStarColor,
+      fullStarBackgroundColor,
       halfStar,
       halfStarColor,
       halfStarEnabled,
@@ -129,18 +133,25 @@ class StarRating extends Component {
     for (let i = 0; i < maxStars; i++) {
       let starIconName = emptyStar;
       let finalStarColor = emptyStarColor;
+      let finalBackgroundColor = '#00000000'
 
       if (starsLeft >= 1) {
         starIconName = fullStar;
         finalStarColor = fullStarColor;
+        finalBackgroundColor = fullStarBackgroundColor
       } else if (starsLeft === 0.5) {
         starIconName = halfStar;
         if (halfStarColor) {
           finalStarColor = halfStarColor;
+          finalBackgroundColor = emptyStarBackgroundColor;
         } else {
           finalStarColor = fullStarColor;
+          finalBackgroundColor = emptyStarBackgroundColor;
         }
       }
+      else {
+        finalBackgroundColor = emptyStarBackgroundColor;
+      }
 
       const starButtonElement = (
         <AnimatableView
@@ -149,7 +160,7 @@ class StarRating extends Component {
         >
           <StarButton
             activeOpacity={activeOpacity}
-            buttonStyle={buttonStyle}
+            buttonStyle={[buttonStyle, {backgroundColor:finalBackgroundColor}]}
             disabled={disabled}
             halfStarEnabled={halfStarEnabled}
             icoMoonJson={icoMoonJson}