chore: some changes with review

Author: dohooo

example/src/App.tsx

@@ -1,12 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import {
-    Button,
-    Dimensions,
-    Image,
-    ImageSourcePropType,
-    View,
-} from 'react-native';
+import { Button, Image, ImageSourcePropType, View } from 'react-native';
 import Carousel from '../../src/index';
 import type { ICarouselInstance } from '../../src/types';
 import Animated, {
@@ -16,9 +10,6 @@ import Animated, {
     useSharedValue,
 } from 'react-native-reanimated';
 
-const window = Dimensions.get('window');
-const PAGE_WIDTH = window.width;
-
 const data: ImageSourcePropType[] = [
     require('../assets/carousel-0.jpg'),
     require('../assets/carousel-1.jpg'),
@@ -42,7 +33,8 @@ export default function App() {
                 style={{ height: 240 }}
                 defaultIndex={0}
                 ref={r}
-                width={PAGE_WIDTH}
+                vertical
+                height={240}
                 parallaxScrollingScale={0.8}
                 data={data}
                 renderItem={(source, index) => {
@@ -83,8 +75,9 @@ export default function App() {
                 onProgressChange={(_, absoluteProgress) => {
                     progressValue.value = absoluteProgress;
                 }}
+                vertical
                 mode="parallax"
-                width={window.width}
+                height={240}
                 parallaxScrollingScale={0.8}
                 data={data}
                 renderItem={(source, i) => {

src/Carousel.tsx

@@ -13,11 +13,11 @@ import { useIndexController } from './hooks/useIndexController';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
 import { ScrollViewGesture } from './ScrollViewGesture';
 import { useVisibleRanges } from './hooks/useVisibleRanges';
-import type { ICarouselInstance, ICarouselProps } from './types';
+import type { ICarouselInstance, TCarouselProps } from './types';
 import { StyleSheet, View } from 'react-native';
 
 function Carousel<T>(
-    props: PropsWithChildren<ICarouselProps<T>>,
+    props: PropsWithChildren<TCarouselProps<T>>,
     ref: React.Ref<ICarouselInstance>
 ) {
     const {
@@ -41,21 +41,19 @@ function Carousel<T>(
 
     usePropsErrorBoundary({
         ...props,
-        viewCount: _data.length,
+        data: _data,
+        mode,
+        loop,
+        style,
+        defaultIndex,
+        autoPlayInterval,
+        panGestureHandlerProps,
     });
 
-    const width = React.useMemo(
-        () => Math.round(props.width || 0),
-        [props.width]
-    );
-    const height = React.useMemo(
-        () => Math.round(props.height || 0),
-        [props.height]
-    );
-    const size = React.useMemo(
-        () => (vertical ? height : width),
-        [width, height, vertical]
-    );
+    const width: number = props.vertical ? 0 : Math.round(props.width || 0);
+    const height: number = props.vertical ? Math.round(props.height || 0) : 0;
+    const size: number = vertical ? height : width;
+
     const layoutStyle = React.useMemo(() => {
         return {
             width: !vertical ? width : '100%',
@@ -126,7 +124,7 @@ function Carousel<T>(
             return handlerOffsetX.value;
         }
         return isNaN(x) ? 0 : x;
-    }, [loop, width, data]);
+    }, [loop, size, data]);
 
     useAnimatedReaction(
         () => offsetX.value,

src/hooks/usePropsErrorBoundary.ts

@@ -1,23 +1,22 @@
 import React from 'react';
-import type { ICarouselProps } from 'src/types';
+import type { TCarouselProps } from 'src/types';
 
-export function usePropsErrorBoundary(
-    props: ICarouselProps & { viewCount: number }
-) {
+export function usePropsErrorBoundary(props: TCarouselProps) {
     React.useEffect(() => {
-        const { defaultIndex, viewCount, vertical, height, width } = props;
+        const { defaultIndex, data } = props;
 
+        const viewCount = data.length;
         if (typeof defaultIndex === 'number' && viewCount > 0) {
             if (defaultIndex < 0 || defaultIndex >= viewCount) {
                 throw Error(
                     'DefaultIndex must be in the range of data length.'
                 );
             }
         }
-        if (!vertical && !width) {
+        if (!props.vertical && !props.width) {
             throw Error('`width` must be specified for vertical carousels.');
         }
-        if (vertical && !height) {
+        if (props.vertical && !props.height) {
             throw Error('`height` must be specified for vertical carousels.');
         }
     }, [props]);

src/index.tsx

@@ -1,4 +1,4 @@
-export type { ICarouselProps, ICarouselInstance } from './types';
+export type { TCarouselProps, ICarouselInstance } from './types';
 import Carousel from './Carousel';
 
 export default Carousel;

src/types.ts

@@ -2,7 +2,30 @@ import type { ViewStyle } from 'react-native';
 import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
 import type { TMode } from './layouts';
 
-export interface ICarouselProps<T = any> {
+interface IHorizontalModeProps {
+    /**
+     * Layout items vertically instead of horizontally
+     */
+    vertical?: false;
+    /**
+     * Specified carousel container width.
+     */
+    width: number;
+}
+
+interface IVerticalModeProps {
+    /**
+     * Layout items vertically instead of horizontally
+     */
+    vertical: true;
+    /**
+     * Specified carousel container height.
+     * @default '100%'
+     */
+    height: number;
+}
+
+export type TCarouselProps<T = any> = {
     ref?: React.Ref<ICarouselInstance>;
     /**
      * Carousel loop playback.
@@ -14,15 +37,6 @@ export interface ICarouselProps<T = any> {
      * @default 'default'
      */
     mode?: TMode;
-    /**
-     * Specified carousel container width.
-     */
-    width?: number;
-    /**
-     * Specified carousel container height.
-     * @default '100%'
-     */
-    height?: number;
     /**
      * Carousel items data set.
      */
@@ -74,10 +88,6 @@ export interface ICarouselProps<T = any> {
      * @default 0 all items will respond to pan gesture events.
      */
     windowSize?: number;
-    /**
-     * Layout items vertically instead of horizontally
-     */
-    vertical?: boolean;
     /**
      * Render carousel item.
      */
@@ -103,7 +113,7 @@ export interface ICarouselProps<T = any> {
         offsetProgress: number,
         absoluteProgress: number
     ) => void;
-}
+} & (IHorizontalModeProps | IVerticalModeProps);
 
 export interface ICarouselInstance {
     /**