feat: expose scrollViewProps

r0b0t3d · May 5, 2021 · c264a28 · c264a28
1 parent 8afff0c
commit c264a28
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -28,7 +28,7 @@ type CarouselData = {
   id: string;
   source: ImageProps['source'];
   url: string;
-}
+};
 
 const data: CarouselData[] = [
   {
@@ -113,6 +113,9 @@ export default function App() {
         spaceHeadTail={20}
         animatedPage={currentPage}
         additionalPagesPerSide={3}
+        scrollViewProps={{
+          scrollEnabled: true,
+        }}
         renderItem={({ item }) => {
           return (
             <Image

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -14,7 +14,6 @@ import Animated, {
   useSharedValue,
   useAnimatedScrollHandler,
   runOnJS,
-  useAnimatedProps,
 } from 'react-native-reanimated';
 import type { CarouselProps, CarouselHandles } from '../types';
 import PageItem from './PageItem';
@@ -42,6 +41,7 @@ function Carousel<TData>(
     renderItem,
     onPageChange,
     animatedPage = useSharedValue(0),
+    scrollViewProps = {},
     keyExtractor,
   }: CarouselProps<TData>,
   ref: Ref<CarouselHandles>
@@ -257,12 +257,6 @@ function Carousel<TData>(
     [beginDrag, endDrag, refreshPage]
   );
 
-  const scrollViewProps = useAnimatedProps(() => {
-    return {
-      scrollEnabled: !freeze.value,
-    };
-  }, []);
-
   function renderPage(item: TData, i: number) {
     const containerStyle = useMemo(() => {
       if (firstItemAlignment === 'start') {
@@ -299,10 +293,11 @@ function Carousel<TData>(
     <View style={[style]}>
       <Animated.ScrollView
         ref={scrollViewRef}
+        {...scrollViewProps}
         style={styles.container}
         horizontal
         disableScrollViewPanResponder
-        disableIntervalMomentum={false}
+        disableIntervalMomentum
         showsHorizontalScrollIndicator={false}
         snapToOffsets={offsets}
         snapToStart
@@ -314,7 +309,6 @@ function Carousel<TData>(
         contentContainerStyle={{
           paddingHorizontal: horizontalPadding,
         }}
-        {...{ scrollViewProps }}
       >
         {pageItems.map(renderPage)}
       </Animated.ScrollView>

diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 export type CarouselProps<T = any> = {
@@ -18,6 +18,7 @@ export type CarouselProps<T = any> = {
   spaceBetween?: number;
   spaceHeadTail?: number;
   animatedPage?: Animated.SharedValue<number>;
+  scrollViewProps?: ScrollViewProps;
   renderItem: (
     data: { item: T; index?: number },
     animatedData?: {