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

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 44.1s
+created lib/index.js, es/index.js in 57.1s

package/CHANGELOG.md

@@ -1,16 +1,10 @@
 # @hero-design/rn
 
-## 8.55.1-rc2.0
+## 8.55.1
 
 ### Patch Changes
 
-- [#2647](https://github.com/Thinkei/hero-design/pull/2647) [`96d0a79e0`](https://github.com/Thinkei/hero-design/commit/96d0a79e008db83c915bbadc8d70a5403d6bd4e3) Thanks [@ttkien](https://github.com/ttkien)! - add pre-commit
-
-- [#2647](https://github.com/Thinkei/hero-design/pull/2647) [`35fcc3812`](https://github.com/Thinkei/hero-design/commit/35fcc3812a090140848c80ed8d5f39026c4c5ee2) Thanks [@ttkien](https://github.com/ttkien)! - yarn install after bump version
-
-- Updated dependencies [[`96d0a79e0`](https://github.com/Thinkei/hero-design/commit/96d0a79e008db83c915bbadc8d70a5403d6bd4e3), [`35fcc3812`](https://github.com/Thinkei/hero-design/commit/35fcc3812a090140848c80ed8d5f39026c4c5ee2)]:
-  - @hero-design/colors@8.42.6-rc2.0
-  - @hero-design/react-native-month-year-picker@8.42.7-rc2.0
+- [#2666](https://github.com/Thinkei/hero-design/pull/2666) [`61807698e`](https://github.com/Thinkei/hero-design/commit/61807698e94cc831a9083f3d531131c86f4af220) Thanks [@ttkien](https://github.com/ttkien)! - [Carousel] replace useWindowsDimension with onLayout and convert Carousel example to react-native-web
 
 ## 8.55.0
 

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal as Modal$1, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal as Modal$1, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, useWindowDimensions, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, memo, useReducer, useLayoutEffect, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -12376,8 +12376,15 @@ var Carousel = function Carousel(_ref) {
       onItemIndexChange(index);
     }
   }, [setCurrentSlideIndex, onItemIndexChange]);
-  var _useWindowDimensions = useWindowDimensions(),
-    width = _useWindowDimensions.width;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    flatListWidth = _useState4[0],
+    setFlatListWidth = _useState4[1];
+  var itemWidth = flatListWidth;
+  var flatListOnLayout = useCallback(function (e) {
+    setFlatListWidth(e.nativeEvent.layout.width);
+  }, [setFlatListWidth]);
+  var width = flatListWidth;
   var scrollX = useRef(new Animated.Value(0)).current;
   useEffect(function () {
     // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
@@ -12392,7 +12399,7 @@ var Carousel = function Carousel(_ref) {
     return function () {
       clearTimeout(handle);
     };
-  }, [currentSlideIndex, carouselRef]);
+  }, [currentSlideIndex, carouselRef, scrollX, width]);
   var viewConfig = useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
@@ -12413,6 +12420,7 @@ var Carousel = function Carousel(_ref) {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   })), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
+    onLayout: flatListOnLayout,
     testID: testID ? "".concat(testID, "_flatlist") : undefined,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
@@ -12446,6 +12454,13 @@ var Carousel = function Carousel(_ref) {
         content: content,
         width: width
       });
+    },
+    getItemLayout: function getItemLayout(_, index) {
+      return {
+        length: itemWidth,
+        offset: itemWidth * index,
+        index: index
+      };
     }
   }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldRenderPagination && /*#__PURE__*/React.createElement(StyledPageControl, {
     numberOfPages: items.length,

package/lib/index.js

@@ -12406,8 +12406,15 @@ var Carousel = function Carousel(_ref) {
       onItemIndexChange(index);
     }
   }, [setCurrentSlideIndex, onItemIndexChange]);
-  var _useWindowDimensions = reactNative.useWindowDimensions(),
-    width = _useWindowDimensions.width;
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    flatListWidth = _useState4[0],
+    setFlatListWidth = _useState4[1];
+  var itemWidth = flatListWidth;
+  var flatListOnLayout = React.useCallback(function (e) {
+    setFlatListWidth(e.nativeEvent.layout.width);
+  }, [setFlatListWidth]);
+  var width = flatListWidth;
   var scrollX = React.useRef(new reactNative.Animated.Value(0)).current;
   React.useEffect(function () {
     // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
@@ -12422,7 +12429,7 @@ var Carousel = function Carousel(_ref) {
     return function () {
       clearTimeout(handle);
     };
-  }, [currentSlideIndex, carouselRef]);
+  }, [currentSlideIndex, carouselRef, scrollX, width]);
   var viewConfig = React.useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
@@ -12443,6 +12450,7 @@ var Carousel = function Carousel(_ref) {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselView, null, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
+    onLayout: flatListOnLayout,
     testID: testID ? "".concat(testID, "_flatlist") : undefined,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
@@ -12476,6 +12484,13 @@ var Carousel = function Carousel(_ref) {
         content: content,
         width: width
       });
+    },
+    getItemLayout: function getItemLayout(_, index) {
+      return {
+        length: itemWidth,
+        offset: itemWidth * index,
+        index: index
+      };
     }
   }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldRenderPagination && /*#__PURE__*/React__default["default"].createElement(StyledPageControl, {
     numberOfPages: items.length,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.55.1-rc2.0",
+  "version": "8.55.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
-    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage",
+    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage && cat ./coverage/lcov.info",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
     "build": "yarn build:js && yarn build:types",
@@ -22,14 +22,14 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.6-rc2.0",
+    "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "9.0.1-rc2.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.0",
+    "@hero-design/eslint-plugin": "9.0.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
@@ -66,12 +66,12 @@
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.5-rc2.0",
+    "eslint-config-hd": "8.42.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.5-rc2.0",
+    "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",

package/sonar-project.properties

@@ -7,3 +7,4 @@ sonar.sources=.
 sonar.inclusions=**/*
 sonar.exclusions=**/__tests__/**,**/public/**
 sonar.java.binaries=**/src/main/java
+sonar.javascript.lcov.reportPaths=./coverage/lcov.info

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

@@ -97,6 +97,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
         }
         getItem={[Function]}
         getItemCount={[Function]}
+        getItemLayout={[Function]}
         horizontal={true}
         keyExtractor={[Function]}
         onContentSizeChange={[Function]}
@@ -133,7 +134,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
         <View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -148,7 +148,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -185,13 +185,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Text
                   allowFontScaling={false}
@@ -244,7 +244,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           </View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -259,7 +258,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -300,13 +299,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Image
                   source={
@@ -376,7 +375,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           </View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -391,7 +389,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -438,13 +436,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Text
                   allowFontScaling={false}
@@ -497,7 +495,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           </View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -512,7 +509,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -557,13 +554,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Text
                   allowFontScaling={false}
@@ -991,6 +988,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         }
         getItem={[Function]}
         getItemCount={[Function]}
+        getItemLayout={[Function]}
         horizontal={true}
         keyExtractor={[Function]}
         onContentSizeChange={[Function]}
@@ -1027,7 +1025,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         <View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -1042,7 +1039,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -1079,13 +1076,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Text
                   allowFontScaling={false}
@@ -1138,7 +1135,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           </View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -1153,7 +1149,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -1194,13 +1190,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Image
                   source={
@@ -1270,7 +1266,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           </View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -1285,7 +1280,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -1332,13 +1327,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
+                width={300}
               >
                 <Text
                   allowFontScaling={false}
@@ -1391,7 +1386,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           </View>
           <View
             onFocusCapture={[Function]}
-            onLayout={[Function]}
             style={
               [
                 {
@@ -1406,7 +1400,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                 [
                   {},
                   {
-                    "width": 750,
+                    "width": 300,
                   },
                 ]
               }
@@ -1451,814 +1445,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     },
                     [
                       {
-                        "width": 750,
+                        "width": 300,
                       },
                       undefined,
                     ],
                   ]
                 }
-                width={750}
-              >
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
-                        "letterSpacing": 1.5,
-                        "lineHeight": 44,
-                      },
-                      [
-                        {
-                          "marginBottom": 16,
-                          "marginTop": 8,
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  themeIntent="body"
-                  themeLevel="h1"
-                  themeTypeface="playful"
-                >
-                  Test slide 4
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RCTScrollView>
-      <View
-        style={
-          [
-            {
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 24,
-              "paddingHorizontal": 24,
-              "paddingVertical": 16,
-            },
-            undefined,
-          ]
-        }
-      >
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "alignSelf": "stretch",
-                "backgroundColor": "#401960",
-                "borderRadius": 32,
-                "flexDirection": "row",
-                "height": 60,
-                "justifyContent": "center",
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            allowFontScaling={false}
-            disabled={false}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.24,
-                  "lineHeight": 28,
-                },
-                [
-                  {
-                    "color": "#ffffff",
-                    "flexShrink": 1,
-                    "textAlign": "center",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeButtonVariant="filled-primary"
-            themeIntent="body"
-            themeLevel="h5"
-            themeTypeface="neutral"
-          >
-            Skip
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    pointerEvents="box-none"
-    position="bottom"
-    style={
-      [
-        {
-          "bottom": 0,
-          "elevation": 9999,
-          "flexDirection": "column-reverse",
-          "left": 0,
-          "paddingHorizontal": 24,
-          "paddingVertical": 16,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        },
-        undefined,
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`Carousel should call skip call back when press skip 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    testID="carousel"
-  >
-    <View
-      style={
-        [
-          {
-            "backgroundColor": "#ece8ef",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
-      }
-      themeSlideBackground="#ece8ef"
-    />
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "height": 48,
-            "justifyContent": "center",
-          },
-          undefined,
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-            },
-            [
-              {
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        <View
-          accessibilityState={
-            {
-              "selected": true,
-            }
-          }
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 1,
-              "width": 24,
-            }
-          }
-          testID="page-control-indicator0"
-        />
-        <View
-          accessibilityState={
-            {
-              "selected": false,
-            }
-          }
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator1"
-        />
-        <View
-          accessibilityState={
-            {
-              "selected": false,
-            }
-          }
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator2"
-        />
-        <View
-          accessibilityState={
-            {
-              "selected": false,
-            }
-          }
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator3"
-        />
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "flexGrow": 2,
-            "justifyContent": "space-between",
-          },
-          undefined,
-        ]
-      }
-    >
-      <RCTScrollView
-        bounces={false}
-        data={
-          [
-            {
-              "background": "#ece8ef",
-              "body": "Access your Work, Money and Benefits in the palm of your hand.",
-              "heading": "Welcome to the new Employment Hero app",
-              "image": 1,
-            },
-            {
-              "background": "#ccd2d3",
-              "body": "Our app now has a new bright clean modern look and feel with the same great features.",
-              "content": <Image
-                source={
-                  {
-                    "uri": "https://picsum.photos/30",
-                  }
-                }
-              />,
-              "heading": "Same app with a new look!",
-              "image": "https://picsum.photos/800/1200",
-            },
-            {
-              "background": "#ccd2d3",
-              "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
-              "heading": "Easier to get around",
-              "image": {
-                "height": 100,
-                "resizeMode": "cover",
-                "uri": "https://picsum.photos/1200/800",
-                "width": 30,
-              },
-            },
-            {
-              "background": "#ccd2d3",
-              "heading": "Test slide 4",
-              "image": {
-                "height": 100,
-                "uri": "https://picsum.photos/1200/800",
-                "width": 30,
-              },
-            },
-          ]
-        }
-        getItem={[Function]}
-        getItemCount={[Function]}
-        horizontal={true}
-        keyExtractor={[Function]}
-        onContentSizeChange={[Function]}
-        onLayout={[Function]}
-        onMomentumScrollBegin={[Function]}
-        onMomentumScrollEnd={[Function]}
-        onScroll={[Function]}
-        onScrollBeginDrag={[Function]}
-        onScrollEndDrag={[Function]}
-        onViewableItemsChanged={[Function]}
-        pagingEnabled={true}
-        removeClippedSubviews={false}
-        renderItem={[Function]}
-        scrollEventThrottle={32}
-        showsHorizontalScrollIndicator={false}
-        stickyHeaderIndices={[]}
-        testID="carousel_flatlist"
-        viewabilityConfig={
-          {
-            "viewAreaCoveragePercentThreshold": 50,
-          }
-        }
-        viewabilityConfigCallbackPairs={
-          [
-            {
-              "onViewableItemsChanged": [Function],
-              "viewabilityConfig": {
-                "viewAreaCoveragePercentThreshold": 50,
-              },
-            },
-          ]
-        }
-      >
-        <View>
-          <View
-            onFocusCapture={[Function]}
-            onLayout={[Function]}
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                },
-                null,
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "width": 750,
-                  },
-                ]
-              }
-            >
-              <Image
-                source={1}
-                style={
-                  [
-                    {
-                      "borderRadius": 0,
-                      "height": 72,
-                      "width": 72,
-                    },
-                    [
-                      {
-                        "flex": 1,
-                        "flexGrow": 2,
-                        "resizeMode": "contain",
-                        "width": "100%",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              />
-              <View
-                marginTop="large"
-                paddingHorizontal="large"
-                style={
-                  [
-                    {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
-                    },
-                    [
-                      {
-                        "width": 750,
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                width={750}
-              >
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
-                        "letterSpacing": 1.5,
-                        "lineHeight": 44,
-                      },
-                      [
-                        {
-                          "marginBottom": 16,
-                          "marginTop": 8,
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  themeIntent="body"
-                  themeLevel="h1"
-                  themeTypeface="playful"
-                >
-                  Welcome to the new Employment Hero app
-                </Text>
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
-                      },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="regular"
-                >
-                  Access your Work, Money and Benefits in the palm of your hand.
-                </Text>
-              </View>
-            </View>
-          </View>
-          <View
-            onFocusCapture={[Function]}
-            onLayout={[Function]}
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                },
-                null,
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "width": 750,
-                  },
-                ]
-              }
-            >
-              <Image
-                source={
-                  {
-                    "uri": "https://picsum.photos/800/1200",
-                  }
-                }
-                style={
-                  [
-                    {
-                      "borderRadius": 0,
-                      "height": 72,
-                      "width": 72,
-                    },
-                    [
-                      {
-                        "flex": 1,
-                        "flexGrow": 2,
-                        "resizeMode": "contain",
-                        "width": "100%",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              />
-              <View
-                marginTop="large"
-                paddingHorizontal="large"
-                style={
-                  [
-                    {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
-                    },
-                    [
-                      {
-                        "width": 750,
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                width={750}
-              >
-                <Image
-                  source={
-                    {
-                      "uri": "https://picsum.photos/30",
-                    }
-                  }
-                  style={
-                    [
-                      {
-                        "borderRadius": 0,
-                        "height": 72,
-                        "width": 72,
-                      },
-                      undefined,
-                    ]
-                  }
-                />
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
-                        "letterSpacing": 1.5,
-                        "lineHeight": 44,
-                      },
-                      [
-                        {
-                          "marginBottom": 16,
-                          "marginTop": 8,
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  themeIntent="body"
-                  themeLevel="h1"
-                  themeTypeface="playful"
-                >
-                  Same app with a new look!
-                </Text>
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
-                      },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="regular"
-                >
-                  Our app now has a new bright clean modern look and feel with the same great features.
-                </Text>
-              </View>
-            </View>
-          </View>
-          <View
-            onFocusCapture={[Function]}
-            onLayout={[Function]}
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                },
-                null,
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "width": 750,
-                  },
-                ]
-              }
-            >
-              <Image
-                height={100}
-                resizeMode="cover"
-                source={
-                  {
-                    "height": 100,
-                    "resizeMode": "cover",
-                    "uri": "https://picsum.photos/1200/800",
-                    "width": 30,
-                  }
-                }
-                style={
-                  [
-                    {
-                      "borderRadius": 0,
-                      "height": 72,
-                      "width": 72,
-                    },
-                    [
-                      {
-                        "alignSelf": "center",
-                        "height": 100,
-                        "resizeMode": "cover",
-                        "width": 30,
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                width={30}
-              />
-              <View
-                marginTop="large"
-                paddingHorizontal="large"
-                style={
-                  [
-                    {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
-                    },
-                    [
-                      {
-                        "width": 750,
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                width={750}
-              >
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
-                        "letterSpacing": 1.5,
-                        "lineHeight": 44,
-                      },
-                      [
-                        {
-                          "marginBottom": 16,
-                          "marginTop": 8,
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  themeIntent="body"
-                  themeLevel="h1"
-                  themeTypeface="playful"
-                >
-                  Easier to get around
-                </Text>
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
-                      },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="regular"
-                >
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.
-                </Text>
-              </View>
-            </View>
-          </View>
-          <View
-            onFocusCapture={[Function]}
-            onLayout={[Function]}
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                },
-                null,
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "width": 750,
-                  },
-                ]
-              }
-            >
-              <Image
-                height={100}
-                source={
-                  {
-                    "height": 100,
-                    "uri": "https://picsum.photos/1200/800",
-                    "width": 30,
-                  }
-                }
-                style={
-                  [
-                    {
-                      "borderRadius": 0,
-                      "height": 72,
-                      "width": 72,
-                    },
-                    [
-                      {
-                        "alignSelf": "center",
-                        "height": 100,
-                        "resizeMode": "contain",
-                        "width": 30,
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                width={30}
-              />
-              <View
-                marginTop="large"
-                paddingHorizontal="large"
-                style={
-                  [
-                    {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
-                    },
-                    [
-                      {
-                        "width": 750,
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                width={750}
+                width={300}
               >
                 <Text
                   allowFontScaling={false}

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)}