diff --git a/README.md b/README.md
index a05d64c..97ea48b 100644
--- a/README.md
+++ b/README.md
@@ -100,7 +100,57 @@ export default GeneralStarExample
-### Custom Star Case
+### Custom Star Case 1
+The following example could change star button background color by your select.
+
+
+
+
+```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 (
+ 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.
diff --git a/StarRating.js b/StarRating.js
index 7aecc95..aa30d0b 100644
--- a/StarRating.js
+++ b/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 = (
=0.10.0"
- }
- },
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -4274,7 +4251,8 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
"integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"loose-envify": {
"version": "1.4.0",
@@ -4496,16 +4474,6 @@
"integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
"dev": true
},
- "node-fetch": {
- "version": "1.7.3",
- "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
- "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
- "dev": true,
- "requires": {
- "encoding": "^0.1.11",
- "is-stream": "^1.0.1"
- }
- },
"node-int64": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -4953,15 +4921,6 @@
"integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
"dev": true
},
- "promise": {
- "version": "7.3.1",
- "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
- "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
- "dev": true,
- "requires": {
- "asap": "~2.0.3"
- }
- },
"prompts": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.14.tgz",
@@ -5047,25 +5006,14 @@
},
"react-native-vector-icons": {
"version": "4.6.0",
- "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.6.0.tgz",
- "integrity": "sha512-rpfhfPiXCK2PX1nrNhdxSMrEGB/Gw/SvKoPM0G2wAkSoqynnes19K0VYI+Up7DqR1rFIpE4hP2erpT1tNx2tfg==",
+ "resolved": "https://registry.npm.taobao.org/react-native-vector-icons/download/react-native-vector-icons-4.6.0.tgz",
+ "integrity": "sha1-5AFDEf+m3jl9kU/8MbcJeodMyNU=",
"requires": {
"lodash": "^4.0.0",
"prop-types": "^15.5.10",
"yargs": "^8.0.2"
}
},
- "react-test-renderer": {
- "version": "16.2.0",
- "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.2.0.tgz",
- "integrity": "sha512-Kd4gJFtpNziR9ElOE/C23LeflKLZPRpNQYWP3nQBY43SJ5a+xyEGSeMrm2zxNKXcnCbBS/q1UpD9gqd5Dv+rew==",
- "dev": true,
- "requires": {
- "fbjs": "^0.8.16",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.0"
- }
- },
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -5706,12 +5654,6 @@
}
}
},
- "setimmediate": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
- "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
- "dev": true
- },
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -6341,12 +6283,6 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
- "ua-parser-js": {
- "version": "0.7.18",
- "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
- "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==",
- "dev": true
- },
"uglify-js": {
"version": "2.8.29",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -6604,12 +6540,6 @@
}
}
},
- "whatwg-fetch": {
- "version": "2.0.4",
- "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
- "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==",
- "dev": true
- },
"whatwg-mimetype": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz",
@@ -6727,7 +6657,7 @@
},
"yargs": {
"version": "8.0.2",
- "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
+ "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-8.0.2.tgz",
"integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
"requires": {
"camelcase": "^4.1.0",
@@ -6747,7 +6677,7 @@
},
"yargs-parser": {
"version": "7.0.0",
- "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-7.0.0.tgz",
+ "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-7.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-7.0.0.tgz",
"integrity": "sha1-jQrELxbqVd69MyyvTEA4s+P139k=",
"requires": {
"camelcase": "^4.1.0"
diff --git a/package.json b/package.json
index 7429060..3f368da 100644
--- a/package.json
+++ b/package.json
@@ -36,10 +36,11 @@
]
},
"dependencies": {
- "prop-types": "^15.5.10",
- "react-native-animatable": "^1.2.4",
- "react-native-button": "^2.3.0",
- "react-native-vector-icons": "^4.5.0"
+ "6.6.0": "^1.0.1",
+ "prop-types": "^15.7.2",
+ "react-native-animatable": "^1.3.2",
+ "react-native-button": "^2.4.0",
+ "react-native-vector-icons": "^6.6.0"
},
"repository": {
"type": "git",