Merge pull request #666 from dohooo/dev

Dev

.changeset/clever-pants-approve.md

@@ -0,0 +1,5 @@
+---
+"react-native-reanimated-carousel": patch
+---
+
+fix: typescript error where MeasuredDimension can be null

.changeset/lazy-tips-wave.md

@@ -0,0 +1,5 @@
+---
+"react-native-reanimated-carousel": patch
+---
+
+Add <Pagination.Custom/> dot animation.

.changeset/many-ads-fry.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+fix: make gesture onStart/onUpdate/onEnd (et al) callbacks run as worklets again

.changeset/nine-moose-whisper.md

@@ -0,0 +1,5 @@
+---
+"react-native-reanimated-carousel": patch
+---
+
+fix app crash when using "onProgressChange" prop as function

.changeset/pre.json

@@ -1,8 +1,8 @@
 {
   "mode": "pre",
-  "tag": "alpha",
+  "tag": "canary",
   "initialVersions": {
-    "react-native-reanimated-carousel": "3.5.1"
+    "react-native-reanimated-carousel": "4.0.0-alpha.12"
   },
   "changesets": [
     "bright-socks-change",

.changeset/spotty-melons-return.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+fix: rework code to avoid possible flicker when starting pan (panOffset race condition)

.eslintrc.js

@@ -2,9 +2,11 @@ module.exports = {
   extends: "@dohooo",
   rules: {
     "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/member-delimiter-style": "off",
     "quotes": "off",
     "@typescript-eslint/quotes": "error",
     "operator-linebreak": "off",
+    "@typescript-eslint/indent": "off",
   },
-  plugins: ["jest"],
+  plugins: ["jest", "prettier"],
 };

CONTRIBUTING.md

@@ -12,7 +12,7 @@ yarn
 
 > While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development.
 
-While developing, you can run the [example app](/exampleExpo/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.
+While developing, you can run the [example app](/example/expo/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.
 
 To start build:
 
@@ -23,19 +23,19 @@ yarn dev
 To run the example app on Android:
 
 ```sh
-yarn android
+cd example/expo && yarn && yarn android
 ```
 
 To run the example app on iOS:
 
 ```sh
-yarn ios
+cd example/expo && yarn && yarn ios
 ```
 
 To run the example app on Web:
 
 ```sh
-yarn web
+cd example/expo && yarn && yarn web
 ```
 
 Make sure your code passes TypeScript and ESLint. Run the following to verify:

example/app/src/pages/parallax/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
+import { useSharedValue, interpolate, Extrapolation } from "react-native-reanimated";
 import Carousel, {
   ICarouselInstance,
   Pagination,
@@ -156,6 +156,7 @@ function Index() {
         activeDotStyle={{
           borderRadius: 100,
           overflow: "hidden",
+          backgroundColor: "rgba(0,0,0,0.2)",
         }}
         containerStyle={[
           isVertical
@@ -166,6 +167,10 @@ function Index() {
                 top: 40,
               }
             : undefined,
+          {
+            gap: 5,
+            marginBottom: 10,
+          },
         ]}
         horizontal={!isVertical}
         renderItem={(item) => (
@@ -179,6 +184,118 @@ function Index() {
         onPress={onPressPagination}
       />
 
+      <Pagination.Custom<{ color: string }>
+        progress={progress}
+        data={colors.map((color) => ({ color }))}
+        size={20}
+        dotStyle={{
+          borderRadius: 16,
+          backgroundColor: "rgba(0,0,0,0.2)",
+        }}
+        activeDotStyle={{
+          borderRadius: 8,
+          width: 40,
+          height: 30,
+          overflow: "hidden",
+          backgroundColor: 'black',
+        }}
+        containerStyle={[
+          isVertical
+            ? {
+                position: "absolute",
+                width: 20,
+                right: 5,
+                top: 40,
+              }
+            : undefined,
+            {
+              gap: 5,
+              marginBottom: 10,
+              alignItems: "center",
+            },
+        ]}
+        horizontal={!isVertical}
+        onPress={onPressPagination}
+        customReanimatedStyle={(progress, index, length) => {
+          let val = Math.abs(progress - index);
+          if (index === 0 && progress > length - 1) {
+            val = Math.abs(progress - length);
+          }
+
+          return {
+            transform: [
+              {
+                translateY: interpolate(
+                  val,
+                  [0, 1],
+                  [10, 0],
+                  Extrapolation.CLAMP,
+                ),
+              }
+            ]
+          }
+        }}
+      />
+
+      <Pagination.Custom<{ color: string }>
+        progress={progress}
+        data={colors.map((color) => ({ color }))}
+        size={20}
+        dotStyle={{
+          borderRadius: 16,
+          backgroundColor: "rgba(0,0,0,0.2)",
+        }}
+        activeDotStyle={{
+          borderRadius: 8,
+          width: 40,
+          height: 30,
+          overflow: "hidden",
+        }}
+        containerStyle={[
+          isVertical
+            ? {
+                position: "absolute",
+                width: 20,
+                right: 5,
+                top: 40,
+              }
+            : undefined,
+            {
+              gap: 5,
+              alignItems: "center",
+            },
+        ]}
+        horizontal={!isVertical}
+        onPress={onPressPagination}
+        customReanimatedStyle={(progress, index, length) => {
+          let val = Math.abs(progress - index);
+          if (index === 0 && progress > length - 1) {
+            val = Math.abs(progress - length);
+          }
+
+          return {
+            transform: [
+              {
+                translateY: interpolate(
+                  val,
+                  [0, 1],
+                  [10, 0],
+                  Extrapolation.CLAMP,
+                ),
+              }
+            ]
+          }
+        }}
+        renderItem={(item) => (
+          <View
+            style={{
+              backgroundColor: item.color,
+              flex: 1,
+            }}
+          />
+        )}
+      />
+
       <SButton
         onPress={() => setAutoPlay(!autoPlay)}
       >{`${ElementsText.AUTOPLAY}:${autoPlay}`}</SButton>

example/app/src/utils/log.ts

@@ -1,6 +1,6 @@
 /**
  * In worklet
- * e.g. runOnJS(lop)(...);
+ * e.g. runOnJS(log)(...);
  */
 export function log(...msg: any) {
   console.log(...msg);

example/expo/app.config.js

@@ -19,6 +19,7 @@ export default () => {
     ],
     ios: {
       supportsTablet: true,
+      bundleIdentifier: "com.rnrc.exampleExpo",
     },
     android: {
       adaptiveIcon: {

example/expo/package.json

@@ -56,7 +56,7 @@
     "gh-pages": "^3.2.3",
     "react-error-overlay": "6.0.9",
     "react-native-web": "~0.19.6",
-    "typescript": "^5.1.3"
+    "typescript": "^5.5.4"
   },
   "resolutions": {
     "@babel/core": "^7.18.0",

example/expo/yarn.lock

@@ -11681,7 +11681,7 @@ __metadata:
     react-native-safe-area-context: 4.6.3
     react-native-screens: ~3.22.0
     react-native-web: ~0.19.6
-    typescript: ^5.1.3
+    typescript: ^5.5.4
   languageName: unknown
   linkType: soft
 
@@ -13512,23 +13512,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.1.3":
-  version: 5.1.6
-  resolution: "typescript@npm:5.1.6"
+"typescript@npm:^5.5.4":
+  version: 5.5.4
+  resolution: "typescript@npm:5.5.4"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: b2f2c35096035fe1f5facd1e38922ccb8558996331405eb00a5111cc948b2e733163cc22fab5db46992aba7dd520fff637f2c1df4996ff0e134e77d3249a7350
+  checksum: b309040f3a1cd91c68a5a58af6b9fdd4e849b8c42d837b2c2e73f9a4f96a98c4f1ed398a9aab576ee0a4748f5690cf594e6b99dbe61de7839da748c41e6d6ca8
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^5.1.3#~builtin<compat/typescript>":
-  version: 5.1.6
-  resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin<compat/typescript>::version=5.1.6&hash=5da071"
+"typescript@patch:typescript@^5.5.4#~builtin<compat/typescript>":
+  version: 5.5.4
+  resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin<compat/typescript>::version=5.5.4&hash=14eedb"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: f53bfe97f7c8b2b6d23cf572750d4e7d1e0c5fff1c36d859d0ec84556a827b8785077bc27676bf7e71fae538e517c3ecc0f37e7f593be913d884805d931bc8be
+  checksum: fc52962f31a5bcb716d4213bef516885e4f01f30cea797a831205fc9ef12b405a40561c40eae3127ab85ba1548e7df49df2bcdee6b84a94bfbe3a0d7eff16b14
   languageName: node
   linkType: hard
 

example/website/package.json

@@ -2,21 +2,21 @@
   "name": "nextra-docs-template",
   "version": "0.0.1",
   "description": "Nextra docs template",
-  "scripts": {
-    "dev": "next dev",
-    "build": "node scripts/gen-pages.mjs && next build",
-    "start": "next start"
-  },
+  "author": "Shu Ding <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/shuding/nextra-docs-template#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuding/nextra-docs-template.git"
   },
-  "author": "Shu Ding <[email protected]>",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/shuding/nextra-docs-template/issues"
   },
-  "homepage": "https://github.com/shuding/nextra-docs-template#readme",
+  "scripts": {
+    "dev": "next dev",
+    "build": "node scripts/gen-pages.mjs && next build",
+    "start": "next start"
+  },
   "dependencies": {
     "@vercel/analytics": "^1.1.1",
     "next": "^13.0.6",
@@ -32,6 +32,6 @@
     "postcss": "^8.4.32",
     "react-native-web": "~0.19.6",
     "tailwindcss": "^3.3.6",
-    "typescript": "^4.9.3"
+    "typescript": "^5.5.4"
   }
 }

example/website/pages/custom-animations.mdx

@@ -31,7 +31,7 @@ After some effort, we finally implemented custom animation in v2, now we just ne
 ### Prepare
 
 ```
-type TAnimationStyle = (value: number) => Animated.AnimatedStyleProp<ViewStyle>;
+type TAnimationStyle = (value: number) => ViewStyle;
 ```
 
 This function will be called in each item and accepts a parameter `value` indicating the position of the current item relative to `window`. The following picture shows the relationship between `value` and position