bviebahn · bviebahn · Sep 7, 2024 · Sep 7, 2024 · Sep 7, 2024
diff --git a/README.md b/README.md
@@ -42,32 +42,34 @@ const Example = () => {
 };
 ```
 
+See [example/src](example/src) for more examples.
+
 ## Props
 ### `StarRating` Props
-| Name              | Type                                    | Default          | Description                                           |
-| ----------------- | --------------------------------------- | ---------------- | ----------------------------------------------------- |
-| rating            | number                                  | **REQUIRED**     | Rating Value. Should be between 0 and `maxStars`      |
-| onChange          | (number) => void                        | **REQUIRED**     | called when rating changes                            |
-| maxStars          | number                                  | 5                | number of stars                                       |
-| starSize          | number                                  | 32               | star size                                             |
-| color             | string                                  | "#fdd835"        | star color                                            |
-| emptyColor        | string                                  | same as `color`  | empty star color                                      |
-| style             | object                                  | undefined        | optional style                                        |
-| starStyle         | object                                  | undefined        | optional star style                                   |
-| enableHalfStar    | boolean                                 | true             | enable or disable display of half stars               |
-| enableSwiping     | boolean                                 | true             | enable or disable swiping                             |
-| onRatingStart     | () => void                              | undefined        | called when user starts interaction                   |
-| onRatingEnd       | () => void                              | undefined        | called when user ends interaction                     |
+| Name              | Type                     | Default          | Description                                           |
+| ----------------- | -----------------------  | ---------------- | ----------------------------------------------------- |
+| rating            | number                   | **REQUIRED**     | Rating Value. Should be between 0 and `maxStars`      |
+| onChange          | (rating: number) => void | **REQUIRED**     | called when rating changes                            |
+| maxStars          | number                   | 5                | number of stars                                       |
+| starSize          | number                   | 32               | star size                                             |
+| color             | string                   | "#fdd835"        | star color                                            |
+| emptyColor        | string                   | same as `color`  | empty star color                                      |
+| style             | object                   | undefined        | optional style                                        |
+| starStyle         | object                   | undefined        | optional star style                                   |
+| enableHalfStar    | boolean                  | true             | enable or disable display of half stars               |
+| enableSwiping     | boolean                  | true             | enable or disable swiping                             |
+| onRatingStart     | (rating: number) => void | undefined        | called when the interaction starts, before `onChange` |
+| onRatingEnd       | (rating: number) => void | undefined        | called when the interaction starts, after `onChange`  |
 | animationConfig   | see [AnimationConfig](#animationConfig) | see [AnimationConfig](#animationConfig) | animation configuration object |
-| StarIconComponent | (props: { index: number; size: number; color: string; type: "full" \| "half" \| "empty"; }) => JSX.Element | [StarIcon](https://github.com/bviebahn/react-native-star-rating-widget/blob/master/src/StarIcon.tsx)                    | Icon component                                        |
-| accessibilityLabel | string  | star rating. %value% stars. use custom actions to set rating.  | The label used on the star component. |
-| accessabilityIncrementLabel | string | increment | The label for the increment action. |
-| accessabilityDecrementLabel | string  | decrement | The label for the decrement action. |
-| accessabilityActivateLabel | string | activate (default)  | The label for the activate action. |
-| accessibilityAdjustmentLabel | string  | %value% stars | The label that is announced after adjustment action |
+| StarIconComponent | (props: { index: number; size: number; color: string; type: "full" \| "half" \| "empty"; }) => JSX.Element | [StarIcon](https://github.com/bviebahn/react-native-star-rating-widget/blob/master/src/StarIcon.tsx) | Icon component                                            |
+| accessibilityLabel | string                  | star rating. %value% stars. use custom actions to set rating. | The label used on the star component |
+| accessabilityIncrementLabel | string         | increment        | The label for the increment action                    |
+| accessabilityDecrementLabel | string         | decrement        | The label for the decrement action.                   |
+| accessabilityActivateLabel  | string         | activate (default) | The label for the activate action.                  |
+| accessibilityAdjustmentLabel | string        | %value% stars    | The label that is announced after adjustment action   |
 
 ### `StarRatingDisplay` Props
-The `StarRatingDisplay` component accepts the same props as `StarRating` except `onChange`, `enableSwiping`, `onRatingStart`, `onRatingEnd` and `animationConfig`.
+The `StarRatingDisplay` component accepts mostly the same props as `StarRating` except those that are interaction related props such as `onChange`, `enableSwiping`, `onRatingStart` etc.
 
 ### AnimationConfig
 | Name     | Type               | Default           | Description                                |

diff --git a/example/package.json b/example/package.json
@@ -13,7 +13,7 @@
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "react-native": "0.70.5",
+    "react-native": "0.70.8",
     "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.7"
   },

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,13 +4,15 @@ import { ScrollView, StyleSheet } from 'react-native';
 import BasicExample from './BasicExample';
 import CustomIconExample from './CustomIconExample';
 import StarRatingDisplayExample from './StarRatingDisplayExample';
+import ClearOnCurrentRatingTapExample from './ClearOnCurrentRatingTapExample';
 
 export default function App() {
   return (
     <ScrollView style={styles.container} contentContainerStyle={styles.content}>
       <BasicExample />
       <CustomIconExample />
       <StarRatingDisplayExample />
+      <ClearOnCurrentRatingTapExample />
     </ScrollView>
   );
 }
@@ -21,6 +23,7 @@ const styles = StyleSheet.create({
   },
   content: {
     padding: 32,
+    paddingTop: 64,
     alignItems: 'center',
   },
 });
diff --git a/example/src/ClearOnCurrentRatingTapExample.tsx b/example/src/ClearOnCurrentRatingTapExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import StarRating from 'react-native-star-rating-widget';
+import ExampleContainer from './ExampleContainer';
+
+export default function ClearOnCurrentRatingTapExample() {
+  const [rating, setRating] = React.useState(3);
+
+  const beforeStartRating = React.useRef(rating);
+  const preventClear = React.useRef(false);
+
+  const handleChange = (newRating: number) => {
+    setRating(newRating);
+
+    // You likely only want to clear the rating if the user taps on the current rating,
+    // and prevent clearing the rating when the user swipes to the current rating.
+    // If onChange is called it means the user did not tap on the current rating,
+    // so we don't want to clear it when the interaction ends.
+    preventClear.current = true;
+  };
+
+  const handleRatingStart = () => {
+    beforeStartRating.current = rating;
+    preventClear.current = false;
+  };
+
+  const handleRatingEnd = (endRating: number) => {
+    if (!preventClear.current && endRating === beforeStartRating.current) {
+      setRating(0);
+    }
+  };
+
+  return (
+    <ExampleContainer title="Clear rating when tapping on current rating Example">
+      <StarRating
+        rating={rating}
+        onChange={handleChange}
+        onRatingStart={handleRatingStart}
+        onRatingEnd={handleRatingEnd}
+      />
+    </ExampleContainer>
+  );
+}
diff --git a/example/src/ExampleContainer.tsx b/example/src/ExampleContainer.tsx
@@ -34,5 +34,5 @@ const styles = StyleSheet.create({
 
     elevation: 3,
   },
-  title: { fontSize: 18, marginBottom: 8, color: '#222' },
+  title: { fontSize: 18, marginBottom: 8, color: '#222', textAlign: 'center' },
 });
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1670,19 +1670,12 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@jest/create-cache-key-function@^29.0.3":
-  version "29.3.1"
-  resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-29.3.1.tgz#3a0970ea595ab3d9507244edbcef14d6b016cdc9"
-  integrity sha512-4i+E+E40gK13K78ffD/8cy4lSSqeWwyXeTZoq16tndiCP12hC8uQsPJdIu5C6Kf22fD8UbBk71so7s/6VwpUOQ==
-  dependencies:
-    "@jest/types" "^29.3.1"
-
-"@jest/schemas@^29.0.0":
-  version "29.0.0"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.0.0.tgz#5f47f5994dd4ef067fb7b4188ceac45f77fe952a"
-  integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==
+"@jest/create-cache-key-function@^27.0.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz#7448fae15602ea95c828f5eceed35c202a820b31"
+  integrity sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==
   dependencies:
-    "@sinclair/typebox" "^0.24.1"
+    "@jest/types" "^27.5.1"
 
 "@jest/types@^26.6.2":
   version "26.6.2"
@@ -1706,18 +1699,6 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@jest/types@^29.3.1":
-  version "29.3.1"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.3.1.tgz#7c5a80777cb13e703aeec6788d044150341147e3"
-  integrity sha512-d0S0jmmTpjnhCmNpApgX3jrUZgZ22ivKJRvL2lli5hpCRoNnp1f85r2/wpKfXuYu8E7Jjh1hGfhPyup1NM5AmA==
-  dependencies:
-    "@jest/schemas" "^29.0.0"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^17.0.8"
-    chalk "^4.0.0"
-
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -1876,7 +1857,7 @@
   dependencies:
     serve-static "^1.13.1"
 
-"@react-native-community/cli-doctor@^9.2.1":
+"@react-native-community/cli-doctor@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-9.3.0.tgz#8817a3fd564453467def5b5bc8aecdc4205eff50"
   integrity sha512-/fiuG2eDGC2/OrXMOWI5ifq4X1gdYTQhvW2m0TT5Lk1LuFiZsbTCp1lR+XILKekuTvmYNjEGdVpeDpdIWlXdEA==
@@ -1898,31 +1879,18 @@
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
 
-"@react-native-community/cli-hermes@^9.2.1":
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-9.3.1.tgz#569d27c1effd684ba451ad4614e29a99228cec49"
-  integrity sha512-Mq4PK8m5YqIdaVq5IdRfp4qK09aVO+aiCtd6vjzjNUgk1+1X5cgUqV6L65h4N+TFJYJHcp2AnB+ik1FAYXvYPQ==
+"@react-native-community/cli-hermes@^9.3.1":
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-9.3.4.tgz#47851847c4990272687883bd8bf53733d5f3c341"
+  integrity sha512-VqTPA7kknCXgtYlRf+sDWW4yxZ6Gtg1Ga+Rdrn1qSKuo09iJ8YKPoQYOu5nqbIYJQAEhorWQyo1VvNgd0wd49w==
   dependencies:
-    "@react-native-community/cli-platform-android" "^9.3.1"
+    "@react-native-community/cli-platform-android" "^9.3.4"
     "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     hermes-profile-transformer "^0.0.6"
     ip "^1.1.5"
 
-"@react-native-community/cli-platform-android@9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.2.1.tgz#cd73cb6bbaeb478cafbed10bd12dfc01b484d488"
-  integrity sha512-VamCZ8nido3Q3Orhj6pBIx48itORNPLJ7iTfy3nucD1qISEDih3DOzCaQCtmqdEBgUkNkNl0O+cKgq5A3th3Zg==
-  dependencies:
-    "@react-native-community/cli-tools" "^9.2.1"
-    chalk "^4.1.2"
-    execa "^1.0.0"
-    fs-extra "^8.1.0"
-    glob "^7.1.3"
-    logkitty "^0.7.1"
-    slash "^3.0.0"
-
-"@react-native-community/cli-platform-android@^9.3.1":
+"@react-native-community/cli-platform-android@9.3.1":
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.1.tgz#378cd72249653cc74672094400657139f21bafb8"
   integrity sha512-m0bQ6Twewl7OEZoVf79I2GZmsDqh+Gh0bxfxWgwxobsKDxLx8/RNItAo1lVtTCgzuCR75cX4EEO8idIF9jYhew==
@@ -1935,18 +1903,20 @@
     logkitty "^0.7.1"
     slash "^3.0.0"
 
-"@react-native-community/cli-platform-ios@9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.2.1.tgz#d90740472216ffae5527dfc5f49063ede18a621f"
-  integrity sha512-dEgvkI6CFgPk3vs8IOR0toKVUjIFwe4AsXFvWWJL5qhrIzW9E5Owi0zPkSvzXsMlfYMbVX0COfVIK539ZxguSg==
+"@react-native-community/cli-platform-android@^9.3.4":
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.4.tgz#42f22943b6ee15713add6af8608c1d0ebf79d774"
+  integrity sha512-BTKmTMYFuWtMqimFQJfhRyhIWw1m+5N5svR1S5+DqPcyFuSXrpNYDWNSFR8E105xUbFANmsCZZQh6n1WlwMpOA==
   dependencies:
     "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     execa "^1.0.0"
+    fs-extra "^8.1.0"
     glob "^7.1.3"
-    ora "^5.4.1"
+    logkitty "^0.7.1"
+    slash "^3.0.0"
 
-"@react-native-community/cli-platform-ios@^9.3.0":
+"@react-native-community/cli-platform-ios@9.3.0", "@react-native-community/cli-platform-ios@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz#45abde2a395fddd7cf71e8b746c1dc1ee2260f9a"
   integrity sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw==
@@ -2010,16 +1980,16 @@
   dependencies:
     joi "^17.2.1"
 
-"@react-native-community/cli@9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-9.2.1.tgz#15cc32531fc323d4232d57b1f2d7c571816305ac"
-  integrity sha512-feMYS5WXXKF4TSWnCXozHxtWq36smyhGaENXlkiRESfYZ1mnCUlPfOanNCAvNvBqdyh9d4o0HxhYKX1g9l6DCQ==
+"@react-native-community/cli@9.3.2":
+  version "9.3.2"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-9.3.2.tgz#81761880af00c1894d85380d8c9a358659865204"
+  integrity sha512-IAW4X0vmX/xozNpp/JVZaX7MrC85KV0OP2DF4o7lNGOfpUhzJAEWqTfkxFYS+VsRjZHDve4wSTiGIuXwE7FG1w==
   dependencies:
     "@react-native-community/cli-clean" "^9.2.1"
     "@react-native-community/cli-config" "^9.2.1"
     "@react-native-community/cli-debugger-ui" "^9.0.0"
-    "@react-native-community/cli-doctor" "^9.2.1"
-    "@react-native-community/cli-hermes" "^9.2.1"
+    "@react-native-community/cli-doctor" "^9.3.0"
+    "@react-native-community/cli-hermes" "^9.3.1"
     "@react-native-community/cli-plugin-metro" "^9.2.1"
     "@react-native-community/cli-server-api" "^9.2.1"
     "@react-native-community/cli-tools" "^9.2.1"
@@ -2078,11 +2048,6 @@
   resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
-"@sinclair/typebox@^0.24.1":
-  version "0.24.51"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
-  integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
-
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -2264,13 +2229,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@types/yargs@^17.0.8":
-  version "17.0.17"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.17.tgz#5672e5621f8e0fca13f433a8017aae4b7a2a03e7"
-  integrity sha512-72bWxFKTK6uwWJAVT+3rF6Jo6RTojiJ27FQo8Rf60AL+VZbzoVPnMFhKsUnbjR8A3BTCYQ7Mv3hnl8T0A+CX9g==
-  dependencies:
-    "@types/yargs-parser" "*"
-
 "@urql/core@2.3.6":
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"
@@ -7248,7 +7206,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-promise@^8.0.3:
+promise@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
   integrity sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==
@@ -7410,15 +7368,15 @@ react-native-web@~0.18.7:
     postcss-value-parser "^4.2.0"
     styleq "^0.1.2"
 
-react-native@0.70.5:
-  version "0.70.5"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.5.tgz#f60540b21d338891086e0a834e331c124dd1f55c"
-  integrity sha512-5NZM80LC3L+TIgQX/09yiyy48S73wMgpIgN5cCv3XTMR394+KpDI3rBZGH4aIgWWuwijz31YYVF5504+9n2Zfw==
+react-native@0.70.8:
+  version "0.70.8"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.8.tgz#aa9aae8e6291589908db74fe69e0ec1d9a9c5490"
+  integrity sha512-O3ONJed9W/VEEVWsbZcwyMDhnEvw7v9l9enqWqgbSGLzHfh6HeIGMCNmjz+kRsHnC7AiF47fupWfgYX7hNnhoQ==
   dependencies:
-    "@jest/create-cache-key-function" "^29.0.3"
-    "@react-native-community/cli" "9.2.1"
-    "@react-native-community/cli-platform-android" "9.2.1"
-    "@react-native-community/cli-platform-ios" "9.2.1"
+    "@jest/create-cache-key-function" "^27.0.1"
+    "@react-native-community/cli" "9.3.2"
+    "@react-native-community/cli-platform-android" "9.3.1"
+    "@react-native-community/cli-platform-ios" "9.3.0"
     "@react-native/assets" "1.0.0"
     "@react-native/normalize-color" "2.0.0"
     "@react-native/polyfills" "2.0.0"
@@ -7435,7 +7393,7 @@ react-native@0.70.5:
     mkdirp "^0.5.1"
     nullthrows "^1.1.1"
     pretty-format "^26.5.2"
-    promise "^8.0.3"
+    promise "^8.3.0"
     react-devtools-core "4.24.0"
     react-native-codegen "^0.70.6"
     react-native-gradle-plugin "^0.70.3"

diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "react-native-builder-bob": "^0.20.0",
     "react-native-svg": "^13.6.0",
     "release-it": "^15.0.0",
-    "typescript": "^4.5.2"
+    "typescript": "^5.5.4"
   },
   "resolutions": {
     "@types/react": "17.0.21"