@hero-design/rn 8.41.3-alpha-0 → 8.41.3

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ rollup -c
 
 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 '/Volumes/Data/Projects/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 29.2s
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/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 27.1s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-publish:npm.log

@@ -1,9 +0,0 @@
-@hero-design/rn:publish:npm: cache hit, replaying output 507c34f3e0a508f6
-@hero-design/rn:publish:npm: $ yarn publish --access public
-@hero-design/rn:publish:npm: [1/4] Bumping version...
-@hero-design/rn:publish:npm: info Current version: 8.12.0-rc.0
-@hero-design/rn:publish:npm: [2/4] Logging in...
-@hero-design/rn:publish:npm: [3/4] Publishing...
-@hero-design/rn:publish:npm: success Published.
-@hero-design/rn:publish:npm: [4/4] Revoking token...
-@hero-design/rn:publish:npm: info Not revoking login token, specified via config file.

package/es/index.js

@@ -1029,6 +1029,7 @@ var palette$b = {
   grotesqueGreen: grotesqueGreen.base,
   grotesqueGreenDark30: grotesqueGreen.darken30,
   grotesqueGreenDark45: grotesqueGreen.darken45,
+  grotesqueGreenLight30: grotesqueGreen.lighten30,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
@@ -1050,6 +1051,8 @@ var palette$b = {
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
   purpleDark15: purple$1.darken15,
+  purpleDark30: purple$1.darken30,
+  purpleLight30: purple$1.lighten30,
   red: vermilion$2.base,
   redDark15: vermilion$2.darken15,
   redDark30: vermilion$2.darken30,
@@ -1060,6 +1063,7 @@ var palette$b = {
   redLight75: vermilion$2.lighten75,
   redLight90: vermilion$2.lighten90,
   smalt: smalt.base,
+  smaltDark30: smalt.darken30,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
@@ -1077,7 +1081,9 @@ var palette$b = {
   violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
+  yellowDark30: yellow$1.darken30,
   yellowDark75: yellow$1.darken75,
+  yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
   yellowLight75: yellow$1.lighten75,
@@ -11496,6 +11502,9 @@ var PageControl = function PageControl(_ref) {
       extrapolate: 'clamp'
     });
     return /*#__PURE__*/React.createElement(StyledPageControlAnimatedView, {
+      accessibilityState: {
+        selected: index === currentPage
+      },
       style: [{
         width: indicatorWidth,
         opacity: opacity
@@ -11875,7 +11884,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
+var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11898,6 +11907,7 @@ var Carousel = function Carousel(_ref) {
     style = _ref.style,
     _ref$shouldShowPagina = _ref.shouldShowPagination,
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
+    testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$h);
@@ -11935,18 +11945,23 @@ var Carousel = function Carousel(_ref) {
     viewAreaCoveragePercentThreshold: 50
   }).current;
   var onViewCallBack = React.useCallback(function (info) {
-    if (info.viewableItems.length > 0) {
-      internalOnItemIndexChange(info.viewableItems[0].index || 0);
+    var firstVisibleItem = info.viewableItems.find(function (view) {
+      return view.index != null && view.isViewable;
+    });
+    if (firstVisibleItem) {
+      internalOnItemIndexChange(firstVisibleItem.index || 0);
     }
-  }, []);
+  }, [internalOnItemIndexChange]);
   return /*#__PURE__*/React.createElement(View, _extends$1({
-    style: style
+    style: style,
+    testID: testID
   }, nativeProps), /*#__PURE__*/React.createElement(StyledBackDrop, {
     themeSlideBackground: items[currentSlideIndex].background
   }), /*#__PURE__*/React.createElement(StyledPageControlWrapper, null, pageControlPosition === 'top' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React.createElement(StyledPageControl$1, {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   })), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
+    testID: testID ? "".concat(testID, "_flatlist") : undefined,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     pagingEnabled: true,

package/lib/index.js

@@ -1059,6 +1059,7 @@ var palette$b = {
   grotesqueGreen: grotesqueGreen.base,
   grotesqueGreenDark30: grotesqueGreen.darken30,
   grotesqueGreenDark45: grotesqueGreen.darken45,
+  grotesqueGreenLight30: grotesqueGreen.lighten30,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
@@ -1080,6 +1081,8 @@ var palette$b = {
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
   purpleDark15: purple$1.darken15,
+  purpleDark30: purple$1.darken30,
+  purpleLight30: purple$1.lighten30,
   red: vermilion$2.base,
   redDark15: vermilion$2.darken15,
   redDark30: vermilion$2.darken30,
@@ -1090,6 +1093,7 @@ var palette$b = {
   redLight75: vermilion$2.lighten75,
   redLight90: vermilion$2.lighten90,
   smalt: smalt.base,
+  smaltDark30: smalt.darken30,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
@@ -1107,7 +1111,9 @@ var palette$b = {
   violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
+  yellowDark30: yellow$1.darken30,
   yellowDark75: yellow$1.darken75,
+  yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
   yellowLight75: yellow$1.lighten75,
@@ -11526,6 +11532,9 @@ var PageControl = function PageControl(_ref) {
       extrapolate: 'clamp'
     });
     return /*#__PURE__*/React__default["default"].createElement(StyledPageControlAnimatedView, {
+      accessibilityState: {
+        selected: index === currentPage
+      },
       style: [{
         width: indicatorWidth,
         opacity: opacity
@@ -11905,7 +11914,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
+var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11928,6 +11937,7 @@ var Carousel = function Carousel(_ref) {
     style = _ref.style,
     _ref$shouldShowPagina = _ref.shouldShowPagination,
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
+    testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$h);
@@ -11965,18 +11975,23 @@ var Carousel = function Carousel(_ref) {
     viewAreaCoveragePercentThreshold: 50
   }).current;
   var onViewCallBack = React__default["default"].useCallback(function (info) {
-    if (info.viewableItems.length > 0) {
-      internalOnItemIndexChange(info.viewableItems[0].index || 0);
+    var firstVisibleItem = info.viewableItems.find(function (view) {
+      return view.index != null && view.isViewable;
+    });
+    if (firstVisibleItem) {
+      internalOnItemIndexChange(firstVisibleItem.index || 0);
     }
-  }, []);
+  }, [internalOnItemIndexChange]);
   return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({
-    style: style
+    style: style,
+    testID: testID
   }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledBackDrop, {
     themeSlideBackground: items[currentSlideIndex].background
   }), /*#__PURE__*/React__default["default"].createElement(StyledPageControlWrapper, null, pageControlPosition === 'top' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(StyledPageControl$1, {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselView, null, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
+    testID: testID ? "".concat(testID, "_flatlist") : undefined,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     pagingEnabled: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.41.3-alpha-0",
+  "version": "8.41.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.41.2",
+    "@hero-design/colors": "8.41.3",
     "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.41.2",
+    "@hero-design/react-native-month-year-picker": "^8.41.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -47,8 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.41.2",
-    "@hero-design/react-native-month-year-picker": "^8.41.2",
+    "@hero-design/eslint-plugin": "8.41.3",
+    "@hero-design/react-native-month-year-picker": "^8.41.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,12 +64,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.41.2",
+    "eslint-config-hd": "8.41.3",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.41.2",
+    "prettier-config-hd": "8.41.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/BottomSheet/ScrollView.tsx

@@ -1,5 +1,10 @@
 import React, { useContext, useCallback } from 'react';
-import { ScrollView, ScrollViewProps } from 'react-native';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+} from 'react-native';
 import BottomSheetContext, {
   BottomSheetContextType,
 } from './BottomSheetContext';
@@ -11,23 +16,32 @@ const BottomSheetScrollView = ({
   const { setInternalShowDivider } =
     useContext<BottomSheetContextType>(BottomSheetContext);
 
-  const onScrollBeginDrag = useCallback((e) => {
-    setInternalShowDivider(true);
+  const onScrollBeginDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(true);
 
-    props?.onScrollBeginDrag?.(e);
-  }, []);
+      props?.onScrollBeginDrag?.(e);
+    },
+    []
+  );
 
-  const onMomentumScrollBegin = useCallback((e) => {
-    setInternalShowDivider(true);
+  const onMomentumScrollBegin = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(true);
 
-    props?.onMomentumScrollEnd?.(e);
-  }, []);
+      props?.onMomentumScrollEnd?.(e);
+    },
+    []
+  );
 
-  const onMomentumScrollEnd = useCallback((e) => {
-    setInternalShowDivider(false);
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(false);
 
-    props?.onMomentumScrollEnd?.(e);
-  }, []);
+      props?.onMomentumScrollEnd?.(e);
+    },
+    []
+  );
 
   return (
     <ScrollView

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

@@ -264,6 +264,11 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
     testID="pageControl"
   >
     <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
+      }
       collapsable={false}
       style={
         {
@@ -278,6 +283,11 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
       testID="page-control-indicator0"
     />
     <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
       collapsable={false}
       style={
         {
@@ -559,6 +569,11 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
     testID="pageControl"
   >
     <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
+      }
       collapsable={false}
       style={
         {
@@ -573,6 +588,11 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
       testID="page-control-indicator0"
     />
     <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
       collapsable={false}
       style={
         {

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

@@ -53,6 +53,11 @@ exports[`StyledPageControl should render correctly 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -67,6 +72,11 @@ exports[`StyledPageControl should render correctly 1`] = `
     testID="page-control-indicator0"
   />
   <View
+    accessibilityState={
+      {
+        "selected": true,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -81,6 +91,11 @@ exports[`StyledPageControl should render correctly 1`] = `
     testID="page-control-indicator1"
   />
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {

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

@@ -99,18 +99,29 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
       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={[]}
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
     >
       <View>
         <View
@@ -667,6 +678,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
         }
       >
         <View
+          accessibilityState={
+            {
+              "selected": true,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -681,6 +697,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           testID="page-control-indicator0"
         />
         <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -695,6 +716,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           testID="page-control-indicator1"
         />
         <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -709,6 +735,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           testID="page-control-indicator2"
         />
         <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -777,6 +808,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       }
     >
       <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -791,6 +827,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         testID="page-control-indicator0"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -805,6 +846,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         testID="page-control-indicator1"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -819,6 +865,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         testID="page-control-indicator2"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -901,18 +952,29 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       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={[]}
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
     >
       <View>
         <View
@@ -1506,6 +1568,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
       }
     >
       <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1520,6 +1587,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         testID="page-control-indicator0"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1534,6 +1606,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         testID="page-control-indicator1"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1548,6 +1625,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         testID="page-control-indicator2"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1630,18 +1712,29 @@ exports[`Carousel should call skip call back when press skip 1`] = `
       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={[]}
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
     >
       <View>
         <View

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

@@ -4,7 +4,7 @@ import { ImageResizeMode } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Carousel from '..';
 import Image from '../../Image';
-import { theme } from '../../..';
+import { ThemeProvider, theme } from '../../..';
 import Button from '../../Button/Button';
 
 const carouselData = [
@@ -112,4 +112,50 @@ describe('Carousel', () => {
     fireEvent.press(queryByText('Skip'));
     expect(onSkip).toBeCalled();
   });
+
+  it("pageControl' current index should change to 1 when scroll", async () => {
+    const onSkip = jest.fn();
+
+    const { rerender, getByTestId } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onSkip} />;
+        }}
+      />
+    );
+    const eventData = {
+      viewableItems: [
+        {
+          index: 0,
+          isViewable: false,
+        },
+        {
+          index: 1,
+          isViewable: true,
+        },
+      ],
+    };
+    fireEvent(
+      getByTestId('carousel_flatlist'),
+      'onViewableItemsChanged',
+      eventData
+    );
+    rerender(
+      <ThemeProvider theme={theme}>
+        <Carousel
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onSkip} />;
+          }}
+        />
+      </ThemeProvider>
+    );
+
+    expect(getByTestId('page-control-indicator1')).toHaveAccessibilityState({
+      selected: true,
+    });
+  });
 });