Skip to content

Commit 8a8aa95

Browse files
dohooodohooo
authored
Merge pull request #442 from dohooo/develop
fix: fixed ref unsable issue
2 parents 5c88819 + 870b130 commit 8a8aa95

File tree

11 files changed

+134
-112
lines changed

11 files changed

+134
-112
lines changed

‎.changeset/popular-tomatoes-jam.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'react-native-reanimated-carousel': patch
3+
---
4+
5+
Fixed ref unsable issue.

‎exampleExpo/src/components/SButton.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
import type { PropsWithChildren } from "react";
12
import React from "react";
23
import { View, Text } from "react-native";
3-
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
4+
import { TouchableOpacity } from "react-native-gesture-handler";
45
export interface ISButtonProps {
56
visible?: boolean
67
onPress?: () => void
78
}
89

9-
const SButton: React.FC<ISButtonProps> = (props) => {
10+
const SButton: React.FC<PropsWithChildren<ISButtonProps>> = (props) => {
1011
const { children, visible = true, onPress } = props;
1112

1213
if (!visible)
@@ -20,7 +21,7 @@ const SButton: React.FC<ISButtonProps> = (props) => {
2021
justifyContent: "center",
2122
}}
2223
>
23-
<TouchableWithoutFeedback onPress={onPress}>
24+
<TouchableOpacity onPress={onPress}>
2425
<View
2526
style={{
2627
marginTop: 20,
@@ -32,7 +33,7 @@ const SButton: React.FC<ISButtonProps> = (props) => {
3233
>
3334
<Text style={{ color: "white" }}>{children}</Text>
3435
</View>
35-
</TouchableWithoutFeedback>
36+
</TouchableOpacity>
3637
</View>
3738
);
3839
};

‎exampleExpo/src/pages/normal/index.tsx‎

Lines changed: 75 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from "react";
2-
import { View } from "react-native";
2+
import { ScrollView } from "react-native-gesture-handler";
33
import type { ICarouselInstance } from "react-native-reanimated-carousel";
44
import Carousel from "react-native-reanimated-carousel";
5+
import { SafeAreaView } from "react-native-safe-area-context";
56

67
import { SBItem } from "../../components/SBItem";
78
import SButton from "../../components/SButton";
@@ -30,7 +31,7 @@ function Index() {
3031
} as const);
3132

3233
return (
33-
<View style={{ flex: 1 }}>
34+
<SafeAreaView edges={["bottom"]} style={{ flex: 1 }}>
3435
<Carousel
3536
{...baseOptions}
3637
loop
@@ -44,81 +45,83 @@ function Index() {
4445
onSnapToItem={index => console.log("current index:", index)}
4546
renderItem={({ index }) => <SBItem key={index} index={index} />}
4647
/>
47-
<SButton
48-
onPress={() => {
49-
setData([...new Array(5).keys()]);
50-
}}
51-
>
52-
{"Change the data length to 5"}
53-
</SButton>
54-
<SButton
55-
onPress={() => {
56-
setData([...new Array(3).keys()]);
57-
}}
58-
>
59-
{"Change the data length to 3"}
60-
</SButton>
61-
<SButton
62-
onPress={() => {
63-
setIsVertical(!isVertical);
64-
}}
65-
>
66-
{isVertical ? "Set horizontal" : "Set Vertical"}
67-
</SButton>
68-
<SButton
69-
onPress={() => {
70-
setIsFast(!isFast);
71-
}}
72-
>
73-
{isFast ? "NORMAL" : "FAST"}
74-
</SButton>
75-
<SButton
76-
onPress={() => {
77-
setIsPagingEnabled(!isPagingEnabled);
78-
}}
79-
>
48+
<ScrollView style={{ flex: 1 }}>
49+
<SButton
50+
onPress={() => {
51+
setData([...new Array(5).keys()]);
52+
}}
53+
>
54+
{"Change the data length to 5"}
55+
</SButton>
56+
<SButton
57+
onPress={() => {
58+
setData([...new Array(3).keys()]);
59+
}}
60+
>
61+
{"Change the data length to 3"}
62+
</SButton>
63+
<SButton
64+
onPress={() => {
65+
setIsVertical(!isVertical);
66+
}}
67+
>
68+
{isVertical ? "Set horizontal" : "Set Vertical"}
69+
</SButton>
70+
<SButton
71+
onPress={() => {
72+
setIsFast(!isFast);
73+
}}
74+
>
75+
{isFast ? "NORMAL" : "FAST"}
76+
</SButton>
77+
<SButton
78+
onPress={() => {
79+
setIsPagingEnabled(!isPagingEnabled);
80+
}}
81+
>
8082
PagingEnabled:{isPagingEnabled.toString()}
81-
</SButton>
82-
<SButton
83-
onPress={() => {
84-
setIsAutoPlay(!isAutoPlay);
85-
}}
86-
>
87-
{ElementsText.AUTOPLAY}:{`${isAutoPlay}`}
88-
</SButton>
89-
<SButton
90-
onPress={() => {
91-
console.log(ref.current?.getCurrentIndex());
92-
}}
93-
>
83+
</SButton>
84+
<SButton
85+
onPress={() => {
86+
setIsAutoPlay(!isAutoPlay);
87+
}}
88+
>
89+
{ElementsText.AUTOPLAY}:{`${isAutoPlay}`}
90+
</SButton>
91+
<SButton
92+
onPress={() => {
93+
console.log(ref.current?.getCurrentIndex());
94+
}}
95+
>
9496
Log current index
95-
</SButton>
96-
<SButton
97-
onPress={() => {
98-
setData(
99-
data.length === 6
100-
? [...new Array(8).keys()]
101-
: [...new Array(6).keys()],
102-
);
103-
}}
104-
>
97+
</SButton>
98+
<SButton
99+
onPress={() => {
100+
setData(
101+
data.length === 6
102+
? [...new Array(8).keys()]
103+
: [...new Array(6).keys()],
104+
);
105+
}}
106+
>
105107
Change data length to:{data.length === 6 ? 8 : 6}
106-
</SButton>
107-
<SButton
108-
onPress={() => {
109-
ref.current?.scrollTo({ count: -1, animated: true });
110-
}}
111-
>
108+
</SButton>
109+
<SButton
110+
onPress={() => {
111+
ref.current?.scrollTo({ count: -1, animated: true });
112+
}}
113+
>
112114
prev
113-
</SButton>
114-
<SButton
115-
onPress={() => {
116-
ref.current?.scrollTo({ count: 1, animated: true });
117-
}}
118-
>
115+
</SButton>
116+
<SButton
117+
onPress={() => {
118+
ref.current?.scrollTo({ count: 1, animated: true });
119+
}}
120+
>
119121
next
120-
</SButton>
121-
</View>
122+
</SButton>
123+
</ScrollView>
124+
</SafeAreaView>
122125
);
123126
}
124127

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"@react-native-community/eslint-config": "^2.0.0",
5858
"@release-it/conventional-changelog": "^2.0.0",
5959
"@types/jest": "^29.2.5",
60+
"@types/react": "^18.2.15",
6061
"@types/react-native": "^0.66.16",
6162
"@types/react-native-snap-carousel": "^3.8.5",
6263
"babel-plugin-inline-dotenv": "^1.6.0",

‎src/Carousel.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable @typescript-eslint/no-use-before-define */
22
import React from "react";
33
import { StyleSheet } from "react-native";
4-
import { gestureHandlerRootHOC } from "react-native-gesture-handler";
4+
import { GestureHandlerRootView } from "react-native-gesture-handler";
55
import { runOnJS, useDerivedValue } from "react-native-reanimated";
66

77
import { useAutoPlay } from "./hooks/useAutoPlay";
@@ -202,36 +202,38 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
202202
);
203203

204204
return (
205-
<CTX.Provider value={{ props, common: commonVariables }}>
206-
<ScrollViewGesture
207-
key={mode}
208-
size={size}
209-
translation={handlerOffset}
210-
style={[
211-
styles.container,
212-
{
213-
width: width || "100%",
214-
height: height || "100%",
215-
},
216-
style,
217-
vertical
218-
? styles.itemsVertical
219-
: styles.itemsHorizontal,
220-
]}
221-
testID={testID}
222-
onScrollBegin={scrollViewGestureOnScrollBegin}
223-
onScrollEnd={scrollViewGestureOnScrollEnd}
224-
onTouchBegin={scrollViewGestureOnTouchBegin}
225-
onTouchEnd={scrollViewGestureOnTouchEnd}
226-
>
227-
{data.map(renderLayout)}
228-
</ScrollViewGesture>
229-
</CTX.Provider>
205+
<GestureHandlerRootView>
206+
<CTX.Provider value={{ props, common: commonVariables }}>
207+
<ScrollViewGesture
208+
key={mode}
209+
size={size}
210+
translation={handlerOffset}
211+
style={[
212+
styles.container,
213+
{
214+
width: width || "100%",
215+
height: height || "100%",
216+
},
217+
style,
218+
vertical
219+
? styles.itemsVertical
220+
: styles.itemsHorizontal,
221+
]}
222+
testID={testID}
223+
onScrollBegin={scrollViewGestureOnScrollBegin}
224+
onScrollEnd={scrollViewGestureOnScrollEnd}
225+
onTouchBegin={scrollViewGestureOnTouchBegin}
226+
onTouchEnd={scrollViewGestureOnTouchEnd}
227+
>
228+
{data.map(renderLayout)}
229+
</ScrollViewGesture>
230+
</CTX.Provider>
231+
</GestureHandlerRootView>
230232
);
231233
},
232234
);
233235

234-
export default gestureHandlerRootHOC(Carousel as any) as any as <T extends any>(
236+
export default Carousel as <T extends any>(
235237
props: React.PropsWithChildren<TCarouselProps<T>>
236238
) => React.ReactElement;
237239

‎src/LazyView.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import type { PropsWithChildren } from "react";
12
import React from "react";
23

34
interface Props {
45
shouldUpdate: boolean
56
}
67

7-
export const LazyView: React.FC<Props> = (props) => {
8+
export const LazyView: React.FC<PropsWithChildren<Props>> = (props) => {
89
const { shouldUpdate, children } = props;
910

1011
if (!shouldUpdate)

‎src/ScrollViewGesture.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { PropsWithChildren } from "react";
12
import React from "react";
23
import type { StyleProp, ViewStyle } from "react-native";
34
import type { PanGestureHandlerGestureEvent } from "react-native-gesture-handler";
@@ -37,7 +38,7 @@ interface Props {
3738
translation: Animated.SharedValue<number>
3839
}
3940

40-
const IScrollViewGesture: React.FC<Props> = (props) => {
41+
const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
4142
const {
4243
props: {
4344
vertical,

‎src/hooks/useAutoPlay.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function useAutoPlay(opts: {
1616
} = opts;
1717

1818
const { prev, next } = carouselController;
19-
const timer = React.useRef<number>();
19+
const timer = React.useRef<ReturnType<typeof setTimeout>>();
2020
const stopped = React.useRef<boolean>(!autoPlay);
2121

2222
const play = React.useCallback(() => {

‎src/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ export type {
33
TCarouselProps,
44
ICarouselInstance,
55
IComputedDirectionTypes,
6-
CarouselRenderItem
6+
CarouselRenderItem,
77
} from "./types";
8-
export {ILayoutConfig} from './layouts/stack'
8+
export { ILayoutConfig } from "./layouts/stack";
99

1010
export default Carousel;

‎src/layouts/ParallaxLayout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { PropsWithChildren } from "react";
12
import React from "react";
23
import Animated, {
34
Extrapolate,
@@ -14,17 +15,15 @@ import type { IVisibleRanges } from "../hooks/useVisibleRanges";
1415
import { LazyView } from "../LazyView";
1516
import type { IComputedDirectionTypes } from "../types";
1617

17-
export const ParallaxLayout: React.FC<
18-
IComputedDirectionTypes<
18+
export const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<
1919
{
2020
loop?: boolean
2121
handlerOffset: Animated.SharedValue<number>
2222
index: number
2323
dataLength: number
2424
visibleRanges: IVisibleRanges
2525
} & ILayoutConfig
26-
>
27-
> = (props) => {
26+
>>> = (props) => {
2827
const {
2928
handlerOffset,
3029
parallaxScrollingOffset = 100,

0 commit comments

Comments
 (0)