@hero-design/rn 8.55.1-rc2.3 → 8.55.1

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -64,6 +64,14 @@ describe('Carousel', () => {
         />
       );
 
+      fireEvent(getByTestId('carousel_flatlist'), 'layout', {
+        nativeEvent: {
+          layout: {
+            width: 300,
+          },
+        },
+      });
+
       expect(getByTestId('carousel')).toBeTruthy();
 
       expect(queryByText('Skip')).toBeTruthy();
@@ -96,7 +104,7 @@ describe('Carousel', () => {
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();
 
-    const { queryByText, toJSON } = renderWithTheme(
+    const { queryByText } = renderWithTheme(
       <Carousel
         testID="carousel"
         items={carouselData}
@@ -106,8 +114,6 @@ describe('Carousel', () => {
       />
     );
 
-    expect(toJSON()).toMatchSnapshot();
-
     expect(queryByText('Skip')).toBeTruthy();
 
     fireEvent.press(queryByText('Skip'));

package/src/components/Carousel/index.tsx

@@ -14,7 +14,7 @@ import {
   ViewProps,
   ViewStyle,
   ViewToken,
-  useWindowDimensions,
+  LayoutChangeEvent,
 } from 'react-native';
 
 import { useTheme } from '../../theme';
@@ -112,13 +112,22 @@ const Carousel = ({
   const internalOnItemIndexChange = useCallback(
     (index: number) => {
       setCurrentSlideIndex(index);
+
       if (onItemIndexChange) {
         onItemIndexChange(index);
       }
     },
     [setCurrentSlideIndex, onItemIndexChange]
   );
-  const { width } = useWindowDimensions();
+  const [flatListWidth, setFlatListWidth] = useState(0);
+  const itemWidth = flatListWidth;
+  const flatListOnLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setFlatListWidth(e.nativeEvent.layout.width);
+    },
+    [setFlatListWidth]
+  );
+  const width = flatListWidth;
 
   const scrollX = useRef(new Animated.Value(0)).current;
   useEffect(() => {
@@ -133,8 +142,7 @@ const Carousel = ({
     return () => {
       clearTimeout(handle);
     };
-  }, [currentSlideIndex, carouselRef]);
-
+  }, [currentSlideIndex, carouselRef, scrollX, width]);
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
 
   const onViewCallBack = useRef(
@@ -167,7 +175,8 @@ const Carousel = ({
       </StyledPageControlWrapper>
 
       <StyledCarouselView>
-        <FlatList
+        <FlatList<CarouselData>
+          onLayout={flatListOnLayout}
           testID={testID ? `${testID}_flatlist` : undefined}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -186,7 +195,6 @@ const Carousel = ({
             if (!item) return null;
 
             const { image, heading, body, content } = item;
-
             return (
               <CarouselItem
                 image={image}
@@ -197,6 +205,11 @@ const Carousel = ({
               />
             );
           }}
+          getItemLayout={(_, index) => ({
+            length: itemWidth,
+            offset: itemWidth * index,
+            index,
+          })}
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}