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 General Star Example

-### Custom Star Case +### Custom Star Case 1 +The following example could change star button background color by your select. +

+ image +

+ +```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",