Skip to content

Commit f406258

Browse files
dohooodohooo
committed
fix: scrollTo is not running properly
fix #222
1 parent f3da1c6 commit f406258

File tree

3 files changed

+133
-38
lines changed

3 files changed

+133
-38
lines changed

‎exampleExpo/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
"expo-blur": "~11.2.0",
2929
"expo-constants": "~13.2.3",
3030
"expo-status-bar": "~1.4.0",
31-
"expo-updates": "~0.14.3",
31+
"expo-updates": "~0.14.4",
3232
"metro-config": "^0.71.1",
3333
"react": "18.0.0",
3434
"react-dom": "18.0.0",
35-
"react-native": "0.69.3",
35+
"react-native": "0.69.4",
3636
"react-native-gesture-handler": "~2.5.0",
3737
"react-native-reanimated": "~2.9.1",
3838
"react-native-safe-area-context": "4.3.1",

‎exampleExpo/yarn.lock‎

Lines changed: 103 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1252,6 +1252,27 @@
12521252
xcode "^3.0.1"
12531253
xml2js "0.4.23"
12541254

1255+
"@expo/config-plugins@~5.0.1":
1256+
version "5.0.1"
1257+
resolved "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-5.0.1.tgz#66bc8d15785bdcd3598e466344f8c0518390179d"
1258+
integrity sha512-1OfnsOrfeSkB0VZfT01UjQ5Uq6p+yYbq8yNkj0e99K/6NLHpyvIxj+5tZIV0nQXgkOcqBIABL2uA7lwB8CkaBQ==
1259+
dependencies:
1260+
"@expo/config-types" "^46.0.0"
1261+
"@expo/json-file" "8.2.36"
1262+
"@expo/plist" "0.0.18"
1263+
"@expo/sdk-runtime-versions" "^1.0.0"
1264+
"@react-native/normalize-color" "^2.0.0"
1265+
chalk "^4.1.2"
1266+
debug "^4.3.1"
1267+
find-up "~5.0.0"
1268+
getenv "^1.0.0"
1269+
glob "7.1.6"
1270+
resolve-from "^5.0.0"
1271+
semver "^7.3.5"
1272+
slash "^3.0.0"
1273+
xcode "^3.0.1"
1274+
xml2js "0.4.23"
1275+
12551276
"@expo/config-types@^42.0.0":
12561277
version "42.0.0"
12571278
resolved "https://registry.npmjs.org/@expo/config-types/-/config-types-42.0.0.tgz#3e3e125ec092c0c34dbfaf19be5480402de3d677"
@@ -1267,6 +1288,11 @@
12671288
resolved "https://registry.npmjs.org/@expo/config-types/-/config-types-46.0.1.tgz#ba5d6197222039de13aefdf0171d24b027781cd0"
12681289
integrity sha512-LQWGDagQ0YXGSJyLomNDZrYXj/cUP+wczs9y2M8MB9UDoSU6dbLRMiSX0FMhhKKdxBK0p92VQxZyqOzGpIYfSw==
12691290

1291+
"@expo/config-types@^46.0.1":
1292+
version "46.0.2"
1293+
resolved "https://registry.npmjs.org/@expo/config-types/-/config-types-46.0.2.tgz#191f225ebfcbe624868ddc40efae79593f948dd8"
1294+
integrity sha512-PXkmOgNwRyBfgVT1HmFZhfh3Qm7WKKyV6mk3/5HJ/LzPh1t+Zs2JrWX8U2YncTLV1QzV7nV8tnkyvszzqnZEzQ==
1295+
12701296
"@expo/[email protected]":
12711297
version "5.0.9"
12721298
resolved "https://registry.npmjs.org/@expo/config/-/config-5.0.9.tgz#5221af5394599d861515ef8513731f21fbb322db"
@@ -1318,6 +1344,23 @@
13181344
slugify "^1.3.4"
13191345
sucrase "^3.20.0"
13201346

1347+
"@expo/[email protected]", "@expo/config@~7.0.1":
1348+
version "7.0.1"
1349+
resolved "https://registry.npmjs.org/@expo/config/-/config-7.0.1.tgz#d8e2e5410bb0b8e305690bbc76e6bb76f6a6de31"
1350+
integrity sha512-4lu0wr45XXJ2MXiLAm2+fmOyy/jjqF3NuDm92fO6nuulRzEEvTP4w3vsibJ690rT81ohtvhpruKhkRs0wSjKWA==
1351+
dependencies:
1352+
"@babel/code-frame" "~7.10.4"
1353+
"@expo/config-plugins" "~5.0.1"
1354+
"@expo/config-types" "^46.0.1"
1355+
"@expo/json-file" "8.2.36"
1356+
getenv "^1.0.0"
1357+
glob "7.1.6"
1358+
require-from-string "^2.0.2"
1359+
resolve-from "^5.0.0"
1360+
semver "7.3.2"
1361+
slugify "^1.3.4"
1362+
sucrase "^3.20.0"
1363+
13211364
"@expo/[email protected]":
13221365
version "0.1.115"
13231366
resolved "https://registry.npmjs.org/@expo/dev-server/-/dev-server-0.1.115.tgz#d64a3caee6ee8023976233767272cfb4f81e39c3"
@@ -1482,6 +1525,20 @@
14821525
getenv "^1.0.0"
14831526
metro-react-native-babel-transformer "^0.59.0"
14841527

1528+
"@expo/metro-config@~0.3.19":
1529+
version "0.3.22"
1530+
resolved "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.3.22.tgz#fa4a0729ec8ecbc9c9fb79c63ecc66a299505c82"
1531+
integrity sha512-R81sLbaeUBjN8IXcxiVx7GcpSj8z7szILl1b5yJDb38WdIFwxhrseA5wXaTT1yMhI+59w6n99T2qtFV2yD5qYA==
1532+
dependencies:
1533+
"@expo/config" "7.0.1"
1534+
"@expo/json-file" "8.2.36"
1535+
chalk "^4.1.0"
1536+
debug "^4.3.2"
1537+
find-yarn-workspace-root "~2.0.0"
1538+
getenv "^1.0.0"
1539+
resolve-from "^5.0.0"
1540+
sucrase "^3.20.0"
1541+
14851542
"@expo/[email protected]", "@expo/osascript@^2.0.31":
14861543
version "2.0.33"
14871544
resolved "https://registry.npmjs.org/@expo/osascript/-/osascript-2.0.33.tgz#e9dcc8da54466c11939074aa71a006024ea884b1"
@@ -1794,10 +1851,10 @@
17941851
execa "^1.0.0"
17951852
prompts "^2.4.0"
17961853

1797-
"@react-native-community/cli-config@^8.0.4":
1798-
version "8.0.4"
1799-
resolved "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-8.0.4.tgz#40e9e4e12ba70a6e12d1e777373af6fa1ac2e4e6"
1800-
integrity sha512-0vcrIETka1Tr0blr0AjVkoP/1yynvarJQXi8Yry/XB3BLenrkUFxolqqA3Ff55KFQ7t1IzAuFtfuVZs25LvyDQ==
1854+
"@react-native-community/cli-config@^8.0.6":
1855+
version "8.0.6"
1856+
resolved "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-8.0.6.tgz#041eee7dd8fdef595bf7a3f24228c173bf294a44"
1857+
integrity sha512-mjVpVvdh8AviiO8xtqeX+BkjqE//NMDnISwsLWSJUfNCwTAPmdR8PGbhgP5O4hWHyJ3WkepTopl0ya7Tfi3ifw==
18011858
dependencies:
18021859
"@react-native-community/cli-tools" "^8.0.4"
18031860
cosmiconfig "^5.1.0"
@@ -1812,13 +1869,13 @@
18121869
dependencies:
18131870
serve-static "^1.13.1"
18141871

1815-
"@react-native-community/cli-doctor@^8.0.4":
1816-
version "8.0.4"
1817-
resolved "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-8.0.4.tgz#9216867f0d8590868dc5b8035f62bbcac68b3254"
1818-
integrity sha512-Blw/66qwoEoKrtwn3O9iTtXbt4YWlwqNse5BJeRDzlSdutWTX4PgJu/34gyvOHGysNlrf+GYkeyqqxI/y0s07A==
1872+
"@react-native-community/cli-doctor@^8.0.6":
1873+
version "8.0.6"
1874+
resolved "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-8.0.6.tgz#954250155ab2f3a66a54821e071bc4a631d2dfff"
1875+
integrity sha512-ZQqyT9mJMVeFEVIwj8rbDYGCA2xXjJfsQjWk2iTRZ1CFHfhPSUuUiG8r6mJmTinAP9t+wYcbbIYzNgdSUKnDMw==
18191876
dependencies:
1820-
"@react-native-community/cli-config" "^8.0.4"
1821-
"@react-native-community/cli-platform-ios" "^8.0.4"
1877+
"@react-native-community/cli-config" "^8.0.6"
1878+
"@react-native-community/cli-platform-ios" "^8.0.6"
18221879
"@react-native-community/cli-tools" "^8.0.4"
18231880
chalk "^4.1.2"
18241881
command-exists "^1.2.8"
@@ -1845,7 +1902,7 @@
18451902
hermes-profile-transformer "^0.0.6"
18461903
ip "^1.1.5"
18471904

1848-
"@react-native-community/cli-platform-android@^8.0.2", "@react-native-community/cli-platform-android@^8.0.5":
1905+
"@react-native-community/cli-platform-android@^8.0.4", "@react-native-community/cli-platform-android@^8.0.5":
18491906
version "8.0.5"
18501907
resolved "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-8.0.5.tgz#da11d2678adeca98e83494d68de80e50571b4af4"
18511908
integrity sha512-z1YNE4T1lG5o9acoQR1GBvf7mq6Tzayqo/za5sHVSOJAC9SZOuVN/gg/nkBa9a8n5U7qOMFXfwhTMNqA474gXA==
@@ -1860,7 +1917,7 @@
18601917
logkitty "^0.7.1"
18611918
slash "^3.0.0"
18621919

1863-
"@react-native-community/cli-platform-ios@^8.0.2", "@react-native-community/cli-platform-ios@^8.0.4":
1920+
"@react-native-community/cli-platform-ios@^8.0.4":
18641921
version "8.0.4"
18651922
resolved "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-8.0.4.tgz#15225c09a1218a046f11165a54bf14b59dad7020"
18661923
integrity sha512-7Jdptedfg/J0Xo2rQbJ4jmo+PMYOiIiRcNDCSI5dBcNkQfSq4MMYUnKQx5DdZHgrfxE0O1vE4iNmJdd4wePz8w==
@@ -1874,6 +1931,20 @@
18741931
ora "^5.4.1"
18751932
plist "^3.0.2"
18761933

1934+
"@react-native-community/cli-platform-ios@^8.0.6":
1935+
version "8.0.6"
1936+
resolved "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-8.0.6.tgz#ab80cd4eb3014b8fcfc9bd1b53ec0a9f8e5d1430"
1937+
integrity sha512-CMR6mu/LVx6JVfQRDL9uULsMirJT633bODn+IrYmrwSz250pnhON16We8eLPzxOZHyDjm7JPuSgHG3a/BPiRuQ==
1938+
dependencies:
1939+
"@react-native-community/cli-tools" "^8.0.4"
1940+
chalk "^4.1.2"
1941+
execa "^1.0.0"
1942+
glob "^7.1.3"
1943+
js-yaml "^3.13.1"
1944+
lodash "^4.17.15"
1945+
ora "^5.4.1"
1946+
plist "^3.0.2"
1947+
18771948
"@react-native-community/cli-plugin-metro@^8.0.4":
18781949
version "8.0.4"
18791950
resolved "https://registry.npmjs.org/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-8.0.4.tgz#a364a50a2e05fc5d0b548759e499e5b681b6e4cc"
@@ -1928,15 +1999,15 @@
19281999
dependencies:
19292000
joi "^17.2.1"
19302001

1931-
"@react-native-community/cli@^8.0.3":
1932-
version "8.0.5"
1933-
resolved "https://registry.npmjs.org/@react-native-community/cli/-/cli-8.0.5.tgz#902a13b5336508f7989fddf39e6bf85b63a66de9"
1934-
integrity sha512-X0AMNK+sKDJQX8eQRkqgddJsZPWlHgLryX7O9usj78UFEK8VqVYtpv08piWecfAhC2mZU4/Lww4bKu9uJ1rdyQ==
2002+
"@react-native-community/cli@^8.0.4":
2003+
version "8.0.6"
2004+
resolved "https://registry.npmjs.org/@react-native-community/cli/-/cli-8.0.6.tgz#7aae37843ab8e44b75c477c1de69f4c902e599ef"
2005+
integrity sha512-E36hU/if3quQCfJHGWVkpsCnwtByRCwORuAX0r6yr1ebKktpKeEO49zY9PAu/Z1gfyxCtgluXY0HfRxjKRFXTg==
19352006
dependencies:
19362007
"@react-native-community/cli-clean" "^8.0.4"
1937-
"@react-native-community/cli-config" "^8.0.4"
2008+
"@react-native-community/cli-config" "^8.0.6"
19382009
"@react-native-community/cli-debugger-ui" "^8.0.0"
1939-
"@react-native-community/cli-doctor" "^8.0.4"
2010+
"@react-native-community/cli-doctor" "^8.0.6"
19402011
"@react-native-community/cli-hermes" "^8.0.5"
19412012
"@react-native-community/cli-plugin-metro" "^8.0.4"
19422013
"@react-native-community/cli-server-api" "^8.0.4"
@@ -5147,15 +5218,15 @@ expo-updates@^0.4.1:
51475218
fbemitter "^2.1.1"
51485219
uuid "^3.4.0"
51495220

5150-
expo-updates@~0.14.3:
5151-
version "0.14.3"
5152-
resolved "https://registry.npmjs.org/expo-updates/-/expo-updates-0.14.3.tgz#c0e5afe824e8f4a14aefddac97afe152cfa00358"
5153-
integrity sha512-WmtwHv3xiqlHDVseTANjj0L0PbMd5v+rcud0I5E5Vd1ou14ADgfCrr9c3qheDyj3TKqpA/9+JY9Ls3iq8G1SjQ==
5221+
expo-updates@~0.14.4:
5222+
version "0.14.4"
5223+
resolved "https://registry.npmjs.org/expo-updates/-/expo-updates-0.14.4.tgz#5fd6708c8438dabc50c1a68329b3caebc9ec9a65"
5224+
integrity sha512-+TbhUmsbjkOMHR/fhZEtcIf7xa8d/UbcvicIAr6jD9FfluBoRatB2sXiswBEohQeQov4P4XlfBKyNE5QTpu0Xw==
51545225
dependencies:
51555226
"@expo/code-signing-certificates" "0.0.2"
5156-
"@expo/config" "~7.0.0"
5157-
"@expo/config-plugins" "~5.0.0"
5158-
"@expo/metro-config" "~0.3.18"
5227+
"@expo/config" "~7.0.1"
5228+
"@expo/config-plugins" "~5.0.1"
5229+
"@expo/metro-config" "~0.3.19"
51595230
arg "4.1.0"
51605231
expo-eas-client "~0.3.0"
51615232
expo-manifests "~0.3.0"
@@ -10016,15 +10087,15 @@ react-native-web@~0.18.7:
1001610087
postcss-value-parser "^4.2.0"
1001710088
styleq "^0.1.2"
1001810089

10019-
[email protected].3:
10020-
version "0.69.3"
10021-
resolved "https://registry.npmjs.org/react-native/-/react-native-0.69.3.tgz#8fc7afe0a302294262a6b49ba2089483db734c05"
10022-
integrity sha512-SyGkcoEUa/BkO+wKVnv4OsnLSNfUM5zLNXS3iT/3eXjKX91/FKBH/nfR9BE1c60X5LQe/P5QYqr6WPX3TRSQkA==
10090+
[email protected].4:
10091+
version "0.69.4"
10092+
resolved "https://registry.npmjs.org/react-native/-/react-native-0.69.4.tgz#d66f2a117442a9398b065876afdc568b209dc4da"
10093+
integrity sha512-rqNMialM/T4pHRKWqTIpOxA65B/9kUjtnepxwJqvsdCeMP9Q2YdSx4VASFR9RoEFYcPRU41yGf6EKrChNfns3g==
1002310094
dependencies:
1002410095
"@jest/create-cache-key-function" "^27.0.1"
10025-
"@react-native-community/cli" "^8.0.3"
10026-
"@react-native-community/cli-platform-android" "^8.0.2"
10027-
"@react-native-community/cli-platform-ios" "^8.0.2"
10096+
"@react-native-community/cli" "^8.0.4"
10097+
"@react-native-community/cli-platform-android" "^8.0.4"
10098+
"@react-native-community/cli-platform-ios" "^8.0.4"
1002810099
"@react-native/assets" "1.0.0"
1002910100
"@react-native/normalize-color" "2.0.0"
1003010101
"@react-native/polyfills" "2.0.0"

‎src/hooks/useCarouselController.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -230,14 +230,37 @@ export function useCarouselController(options: IOpts): ICarouselController {
230230
if (!canSliding()) return;
231231

232232
onScrollBegin?.();
233+
// direction -> 1 | -1
234+
const direction =
235+
handlerOffsetX.value / Math.abs(handlerOffsetX.value);
236+
// target offset
237+
const offset = i * size * direction;
238+
// page width size * page count
239+
const totalSize = dataInfo.length * size;
240+
241+
let isCloseToNextLoop = false;
242+
243+
if (loop) {
244+
isCloseToNextLoop =
245+
Math.abs(handlerOffsetX.value % totalSize) / totalSize >=
246+
0.5;
247+
}
233248

234-
const offset = handlerOffsetX.value + (index.value - i) * size;
249+
const finalOffset =
250+
(Math.floor(Math.abs(handlerOffsetX.value / totalSize)) +
251+
(isCloseToNextLoop ? 1 : 0)) *
252+
totalSize *
253+
direction +
254+
offset;
235255

236256
if (animated) {
237257
index.value = i;
238-
handlerOffsetX.value = scrollWithTiming(offset, onFinished);
258+
handlerOffsetX.value = scrollWithTiming(
259+
finalOffset,
260+
onFinished
261+
);
239262
} else {
240-
handlerOffsetX.value = offset;
263+
handlerOffsetX.value = finalOffset;
241264
index.value = i;
242265
onFinished?.();
243266
}
@@ -248,14 +271,15 @@ export function useCarouselController(options: IOpts): ICarouselController {
248271
onScrollBegin,
249272
handlerOffsetX,
250273
size,
274+
dataInfo.length,
275+
loop,
251276
scrollWithTiming,
252277
]
253278
);
254279

255280
const scrollTo = React.useCallback(
256281
(opts: TCarouselActionOptions = {}) => {
257282
const { index: i, count, animated = false, onFinished } = opts;
258-
259283
if (typeof i === 'number' && i > -1) {
260284
to({ i, animated, onFinished });
261285
return;

0 commit comments

Comments
 (0)