@r0b0t3d/react-native-carousel 3.4.6 → 3.4.8

package/src/components/CarouselContainer.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
 } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
-import type { CarouselHandles } from 'src/types';
+import type { CarouselHandles } from '../types';
 import { CarouselContext } from './useCarouselContext';
 import { InternalCarouselContext } from './useInternalCarouselContext';
 
@@ -15,11 +15,11 @@ type Props = {
 };
 
 function CarouselContainer({ children }: Props) {
-  const carouselHandlers = useRef<CarouselHandles>();
+  const carouselHandlers = useRef<CarouselHandles>(null);
   const currentPage = useSharedValue(0);
   const totalPage = useSharedValue(0);
 
-  const setCarouselHandlers = useCallback((handlers) => {
+  const setCarouselHandlers = useCallback((handlers: CarouselHandles) => {
     carouselHandlers.current = handlers;
   }, []);
 
@@ -50,7 +50,7 @@ function CarouselContainer({ children }: Props) {
   );
 }
 
-export default function withCarouselContext<T>(Component: FC<T>) {
+export default function withCarouselContext<T extends Record<string, unknown>>(Component: FC<T>) {
   return (props: T) => {
     return (
       <CarouselContainer>

package/src/components/PageItem.tsx

@@ -1,14 +1,14 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useMemo } from 'react';
 import {
   Image,
+  Pressable,
   StyleProp,
   StyleSheet,
-  TouchableOpacity,
   ViewStyle,
 } from 'react-native';
 import Animated, {
   interpolate,
+  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
@@ -19,16 +19,50 @@ type Props<TData> = {
   index: number;
   offset: number;
   renderItem: CarouselProps['renderItem'];
-  animatedValue: Animated.SharedValue<number>;
+  animatedValue: SharedValue<number>;
   animation?: 'parallax';
-  freeze: Animated.SharedValue<boolean>;
+  freeze: SharedValue<boolean>;
   itemWidth: number;
   inactiveOpacity: number;
   inactiveScale: number;
   containerStyle: StyleProp<ViewStyle>;
-  onPress: () => void;
+  onPress?: () => void;
 };
 
+// Pull the inline renderContent() into a named component so React
+// preserves its identity across renders and doesn't remount internal
+// state (images, nested components, etc.).
+function PageContent<TData>({
+  renderItem,
+  item,
+  index,
+  animatedValue,
+  offset,
+}: {
+  renderItem: CarouselProps['renderItem'];
+  item: TData;
+  index: number;
+  animatedValue: SharedValue<number>;
+  offset: number;
+}) {
+  if (renderItem) {
+    return renderItem(
+      { item, index },
+      { scrollPosition: animatedValue, offset }
+    );
+  }
+  if (typeof item === 'object' && (item as any).source) {
+    return (
+      <Image
+        source={(item as any).source}
+        style={[STYLES.image, StyleSheet.absoluteFill]}
+        resizeMode="cover"
+      />
+    );
+  }
+  return null;
+}
+
 export default function PageItem<TData = any>({
   item,
   index,
@@ -67,7 +101,7 @@ export default function PageItem<TData = any>({
   }, []);
   // @ts-ignore
   const animatedStyle = useAnimatedStyle(() => {
-    const transform: ViewStyle['transform'] = [
+    const transform: any = [
       {
         scale: scale.value,
       },
@@ -83,26 +117,6 @@ export default function PageItem<TData = any>({
     };
   }, []);
 
-  function renderContent() {
-    if (renderItem) {
-      return renderItem(
-        { item, index },
-        { scrollPosition: animatedValue, offset }
-      );
-    }
-    if (typeof item === 'object' && (item as any).source) {
-      return (
-        <Image
-          source={(item as any).source}
-          style={[styles.image, StyleSheet.absoluteFill]}
-          resizeMode="cover"
-        />
-      );
-    }
-    console.error('You need implement renderItem');
-    return null;
-  }
-
   const mContainerStyle: StyleProp<ViewStyle> = useMemo(() => {
     return [
       {
@@ -114,19 +128,27 @@ export default function PageItem<TData = any>({
   }, [itemWidth, containerStyle]);
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.9}
-      style={mContainerStyle}
+    <Pressable
+      style={({ pressed }) => [
+        mContainerStyle,
+        pressed && { opacity: 0.9 },
+      ]}
       onPress={onPress}
     >
-      <Animated.View style={[styles.container, animatedStyle]}>
-        {renderContent()}
+      <Animated.View style={[STYLES.container, animatedStyle]}>
+        <PageContent
+          renderItem={renderItem}
+          item={item}
+          index={index}
+          animatedValue={animatedValue}
+          offset={offset}
+        />
       </Animated.View>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
 
-const styles = StyleSheet.create({
+const STYLES = StyleSheet.create({
   container: {
     flex: 1,
   },

package/src/components/PaginationIndicator.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   withSpring,
+  type SharedValue,
 } from 'react-native-reanimated';
 import type { IndicatorConfigs, PaginationProps } from '../types';
 import { useCarouselContext } from './useCarouselContext';
@@ -114,7 +114,7 @@ function IndicatorItem({
   activeIndicatorStyle,
   indicatorStyle,
 }: {
-  currentPage: Animated.SharedValue<number>;
+  currentPage: SharedValue<number>;
   pageNumber: number;
   configs: IndicatorConfigs;
   activeIndicatorStyle?: StyleProp<ViewStyle>;

package/src/components/useCarouselContext.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createContext, useContext } from 'react';
 import type { CarouselContextType } from '../types';
 

package/src/components/useInternalCarouselContext.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createContext, useContext } from 'react';
 import type { CarouselContextInternalType } from '../types';
 

package/src/types.ts

@@ -1,5 +1,5 @@
 import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export type CarouselProps<T = any> = {
   style?: StyleProp<ViewStyle>;
@@ -17,18 +17,20 @@ export type CarouselProps<T = any> = {
   inactiveScale?: number;
   spaceBetween?: number;
   spaceHeadTail?: number;
-  animatedPage?: Animated.SharedValue<number>;
+  animatedPage?: SharedValue<number>;
   scrollViewProps?: ScrollViewProps;
   renderItem: (
     data: { item: T; index?: number },
     animatedData?: {
-      scrollPosition?: Animated.SharedValue<number>;
+      scrollPosition?: SharedValue<number>;
       offset?: number;
     }
   ) => React.ReactNode;
   onPageChange?: (index: number) => void;
   keyExtractor?: (item: T, index?: number) => string;
   onItemPress?: (item: T, index?: number) => void;
+  disableItemPress?: boolean;
+  scrollViewRef?: any;
 };
 
 export type CarouselHandles = {
@@ -41,8 +43,8 @@ export type CarouselContextType = {
   goNext(): void;
   goPrev(): void;
   snapToItem(index: number, animated?: boolean): void;
-  currentPage: Animated.SharedValue<number>;
-  totalPage: Animated.SharedValue<number>;
+  currentPage: SharedValue<number>;
+  totalPage: SharedValue<number>;
 };
 
 export type CarouselContextInternalType = {
@@ -50,9 +52,9 @@ export type CarouselContextInternalType = {
 }
 
 export type AnimatorProps = {
-  animatedValue: Animated.SharedValue<number>;
+  animatedValue: SharedValue<number>;
   offset: number;
-  freeze: Animated.SharedValue<boolean>;
+  freeze: SharedValue<boolean>;
   itemWidth: number;
 };
 

package/src/utils.ts

@@ -23,26 +23,46 @@ export const generateOffsets = ({
   return result;
 };
 
-export const findNearestPage = (
-  offset: number,
-  offsets: number[],
-  delta: number
-) => {
+export const findNearestPage = (offset: number, offsets: number[]): number => {
   'worklet';
-  let mid;
   let lo = 0;
   let hi = offsets.length - 1;
   while (hi - lo > 1) {
-    mid = Math.floor((lo + hi) / 2);
+    const mid = Math.floor((lo + hi) / 2);
     if (offsets[mid] < offset) {
       lo = mid;
     } else {
       hi = mid;
     }
   }
-  const nearestPage = offset - offsets[lo] <= offsets[hi] - offset ? lo : hi;
-  if (Math.abs(offsets[nearestPage] - offset) < delta) {
-    return nearestPage;
+  return offset - offsets[lo] <= offsets[hi] - offset ? lo : hi;
+};
+
+export function getLogicalPage(
+  renderIndex: number,
+  totalItems: number,
+  additionalPagesPerSide: number,
+  loop: boolean
+): number {
+  'worklet';
+  if (!loop) {
+    return renderIndex;
+  }
+  return (renderIndex - additionalPagesPerSide + totalItems) % totalItems;
+}
+
+export function getLoopBoundaryTarget(
+  renderPage: number,
+  totalPages: number,
+  additionalPagesPerSide: number
+): number {
+  'worklet';
+  const totalRenderPages = totalPages + additionalPagesPerSide * 2;
+  if (renderPage <= 0) {
+    return totalPages;
+  }
+  if (renderPage >= totalRenderPages - 1) {
+    return renderPage - totalPages;
   }
   return -1;
-};
+}