@hero-design/rn 8.24.0 → 8.25.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 5e28173315c89cb6
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) 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`.
-@hero-design/rn:build: (!) 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
-@hero-design/rn:build: created lib/index.js, es/index.js in 27.7s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output b28cdc306082cd71
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) 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`.
+@hero-design/rn:build: (!) 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
+@hero-design/rn:build: created lib/index.js, es/index.js in 27.2s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -981,9 +981,9 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$1 = colorScales.violet,
+  violet$2 = colorScales.violet,
   yellow$1 = colorScales.yellow;
-({
+var palette$b = {
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -1058,21 +1058,38 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark60: violet$1.darken60,
-  violetDark75: violet$1.darken75,
-  violetLight30: violet$1.lighten30,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.lighten90,
+  violet: violet$2.base,
+  violetDark15: violet$2.darken15,
+  violetDark30: violet$2.darken30,
+  violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
+  violetDark75: violet$2.darken75,
+  violetLight30: violet$2.lighten30,
+  violetLight60: violet$2.lighten60,
+  violetLight75: violet$2.lighten75,
+  violetLight90: violet$2.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
   yellowLight60: yellow$1.lighten60,
   yellowLight90: yellow$1.lighten90
+};
+var mauve$4 = colorScales.mauve,
+  violet$1 = colorScales.violet;
+Object.assign(Object.assign({}, palette$b), {
+  mauve: mauve$4.base,
+  mauveLight80: mauve$4.lighten80,
+  violetDark50: violet$1.darken50
+});
+var apple$4 = colorScales.apple,
+  hitPink$1 = colorScales.hitPink;
+Object.assign(Object.assign({}, palette$b), {
+  apple: apple$4.base,
+  appleDark20: apple$4.darken20,
+  appleDark50: apple$4.darken50,
+  appleLight90: apple$4.lighten90,
+  hitPink: hitPink$1.base,
+  hitPinkLight80: hitPink$1.lighten80
 });
 var aliceBlue$1 = colorScales.aliceBlue,
   antiFlashWhite$1 = colorScales.antiFlashWhite,
@@ -1239,7 +1256,7 @@ var currant$1 = colorScales.currant,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
   violet1$3 = colorScales.violet1,
-  violet$2 = colorScales.violet,
+  violet$3 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1258,9 +1275,9 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$2.lighten30,
+  violetLight30: violet$3.lighten30,
   violet1: violet1$3.base,
-  violet: violet$2.base,
+  violet: violet$3.base,
   scarletGum: scarletGum$2.base
 };
 var violet1$2 = colorScales.violet1,
@@ -2240,12 +2257,17 @@ var getErrorTheme = function getErrorTheme(theme) {
     title: theme.fonts.playful.semiBold,
     description: theme.fonts.playful.regular
   };
+  var lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge
+  };
   return {
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     space: space,
-    fonts: fonts
+    fonts: fonts,
+    lineHeight: lineHeight
   };
 };
 
@@ -11289,6 +11311,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setFlatListWidth = _useState4[1];
   var itemWidth = flatListWidth * ITEM_WIDTH_RATE;
   var carouselRef = useRef(null);
+  var viewPosition = Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = useCallback(function (index) {
     var _carouselRef$current;
     var validIndex = 0;
@@ -11302,7 +11325,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollToIndex({
       index: validIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, itemWidth]);
   /*
@@ -11317,7 +11340,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 ? void 0 : _carouselRef$current2.scrollToIndex({
       index: nextIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, currentIndex, itemWidth, items.length]);
   React.useImperativeHandle(ref, function () {
@@ -11372,16 +11395,31 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }, /*#__PURE__*/React.createElement(StyledShadow, null, /*#__PURE__*/React.createElement(StyledCard, null, item)));
   }, [itemWidth]);
+  var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React.createElement(StyledWrapper$7, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React.createElement(FlatList, {
     contentInset: {
       top: 0,
-      left: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+      left: contentContainerPaddingHorizontal,
       bottom: 0,
-      right: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
+      right: contentContainerPaddingHorizontal
     },
+    ListHeaderComponent: Platform.select({
+      android: /*#__PURE__*/React.createElement(View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
+    ListFooterComponent: Platform.select({
+      android: /*#__PURE__*/React.createElement(View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
     onLayout: flatListOnLayout,
     data: items,
     horizontal: true,
@@ -11398,7 +11436,9 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     decelerationRate: "fast",
     renderToHardwareTextureAndroid: true,
-    snapToInterval: itemWidth,
+    snapToInterval: Platform.select({
+      ios: itemWidth
+    }),
     onViewableItemsChanged: visibleSlideChanged,
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80
@@ -12667,7 +12707,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
     fontSize: theme.__hd__.error.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
-    color: theme.__hd__.error.colors.title
+    color: theme.__hd__.error.colors.title,
+    lineHeight: theme.__hd__.error.lineHeight.title
   };
 });
 var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
@@ -12676,7 +12717,8 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
     textAlign: 'center',
-    color: theme.__hd__.error.colors.description
+    color: theme.__hd__.error.colors.description,
+    lineHeight: theme.__hd__.error.lineHeight.description
   };
 });
 
@@ -13901,7 +13943,7 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
       toValue: 1,
       duration: 1200,
       easing: Easing.linear,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     }));
     animation.start();
     return function () {

package/lib/index.js

@@ -1011,9 +1011,9 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$1 = colorScales.violet,
+  violet$2 = colorScales.violet,
   yellow$1 = colorScales.yellow;
-({
+var palette$b = {
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -1088,21 +1088,38 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark60: violet$1.darken60,
-  violetDark75: violet$1.darken75,
-  violetLight30: violet$1.lighten30,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.lighten90,
+  violet: violet$2.base,
+  violetDark15: violet$2.darken15,
+  violetDark30: violet$2.darken30,
+  violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
+  violetDark75: violet$2.darken75,
+  violetLight30: violet$2.lighten30,
+  violetLight60: violet$2.lighten60,
+  violetLight75: violet$2.lighten75,
+  violetLight90: violet$2.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
   yellowLight60: yellow$1.lighten60,
   yellowLight90: yellow$1.lighten90
+};
+var mauve$4 = colorScales.mauve,
+  violet$1 = colorScales.violet;
+Object.assign(Object.assign({}, palette$b), {
+  mauve: mauve$4.base,
+  mauveLight80: mauve$4.lighten80,
+  violetDark50: violet$1.darken50
+});
+var apple$4 = colorScales.apple,
+  hitPink$1 = colorScales.hitPink;
+Object.assign(Object.assign({}, palette$b), {
+  apple: apple$4.base,
+  appleDark20: apple$4.darken20,
+  appleDark50: apple$4.darken50,
+  appleLight90: apple$4.lighten90,
+  hitPink: hitPink$1.base,
+  hitPinkLight80: hitPink$1.lighten80
 });
 var aliceBlue$1 = colorScales.aliceBlue,
   antiFlashWhite$1 = colorScales.antiFlashWhite,
@@ -1269,7 +1286,7 @@ var currant$1 = colorScales.currant,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
   violet1$3 = colorScales.violet1,
-  violet$2 = colorScales.violet,
+  violet$3 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1288,9 +1305,9 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$2.lighten30,
+  violetLight30: violet$3.lighten30,
   violet1: violet1$3.base,
-  violet: violet$2.base,
+  violet: violet$3.base,
   scarletGum: scarletGum$2.base
 };
 var violet1$2 = colorScales.violet1,
@@ -2270,12 +2287,17 @@ var getErrorTheme = function getErrorTheme(theme) {
     title: theme.fonts.playful.semiBold,
     description: theme.fonts.playful.regular
   };
+  var lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge
+  };
   return {
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     space: space,
-    fonts: fonts
+    fonts: fonts,
+    lineHeight: lineHeight
   };
 };
 
@@ -11319,6 +11341,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setFlatListWidth = _useState4[1];
   var itemWidth = flatListWidth * ITEM_WIDTH_RATE;
   var carouselRef = React.useRef(null);
+  var viewPosition = reactNative.Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = React.useCallback(function (index) {
     var _carouselRef$current;
     var validIndex = 0;
@@ -11332,7 +11355,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollToIndex({
       index: validIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, itemWidth]);
   /*
@@ -11347,7 +11370,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 ? void 0 : _carouselRef$current2.scrollToIndex({
       index: nextIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, currentIndex, itemWidth, items.length]);
   React__default["default"].useImperativeHandle(ref, function () {
@@ -11402,16 +11425,31 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledShadow, null, /*#__PURE__*/React__default["default"].createElement(StyledCard, null, item)));
   }, [itemWidth]);
+  var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
     contentInset: {
       top: 0,
-      left: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+      left: contentContainerPaddingHorizontal,
       bottom: 0,
-      right: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
+      right: contentContainerPaddingHorizontal
     },
+    ListHeaderComponent: reactNative.Platform.select({
+      android: /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
+    ListFooterComponent: reactNative.Platform.select({
+      android: /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
     onLayout: flatListOnLayout,
     data: items,
     horizontal: true,
@@ -11428,7 +11466,9 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     decelerationRate: "fast",
     renderToHardwareTextureAndroid: true,
-    snapToInterval: itemWidth,
+    snapToInterval: reactNative.Platform.select({
+      ios: itemWidth
+    }),
     onViewableItemsChanged: visibleSlideChanged,
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80
@@ -12697,7 +12737,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
     fontSize: theme.__hd__.error.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
-    color: theme.__hd__.error.colors.title
+    color: theme.__hd__.error.colors.title,
+    lineHeight: theme.__hd__.error.lineHeight.title
   };
 });
 var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
@@ -12706,7 +12747,8 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
     textAlign: 'center',
-    color: theme.__hd__.error.colors.description
+    color: theme.__hd__.error.colors.description,
+    lineHeight: theme.__hd__.error.lineHeight.description
   };
 });
 
@@ -13931,7 +13973,7 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
       toValue: 1,
       duration: 1200,
       easing: reactNative.Easing.linear,
-      useNativeDriver: true
+      useNativeDriver: reactNative.Platform.OS !== 'web'
     }));
     animation.start();
     return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.24.0",
+  "version": "8.25.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.24.0",
+    "@hero-design/colors": "8.25.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.24.0",
+    "@hero-design/eslint-plugin": "8.25.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@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.24.0",
+    "eslint-config-hd": "8.25.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.24.0",
+    "prettier-config-hd": "8.25.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CardCarousel.tsx

@@ -8,7 +8,9 @@ import React, {
 import {
   FlatList,
   LayoutChangeEvent,
+  Platform,
   StyleProp,
+  View,
   ViewStyle,
 } from 'react-native';
 import { useTheme } from '../../theme';
@@ -85,6 +87,8 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     const itemWidth = flatListWidth * ITEM_WIDTH_RATE;
     const carouselRef = useRef<FlatList>(null);
 
+    const viewPosition =
+      Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
     const snapToIndex = useCallback(
       (index) => {
         let validIndex = 0;
@@ -99,7 +103,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
         carouselRef.current?.scrollToIndex({
           index: validIndex,
           animated: true,
-          viewPosition: VIEW_POSITION_CENTER,
+          viewPosition,
         });
       },
       [carouselRef, itemWidth]
@@ -116,7 +120,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       carouselRef.current?.scrollToIndex({
         index: nextIndex,
         animated: true,
-        viewPosition: VIEW_POSITION_CENTER,
+        viewPosition,
       });
     }, [carouselRef, currentIndex, itemWidth, items.length]);
 
@@ -189,17 +193,27 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       [itemWidth]
     );
 
+    const { contentContainerPaddingHorizontal } =
+      theme.__hd__.cardCarousel.space;
     return (
       <StyledWrapper style={style} testID={testID}>
         <FlatList
           contentInset={{
             top: 0,
-            left: theme.__hd__.cardCarousel.space
-              .contentContainerPaddingHorizontal,
+            left: contentContainerPaddingHorizontal,
             bottom: 0,
-            right:
-              theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+            right: contentContainerPaddingHorizontal,
           }}
+          ListHeaderComponent={Platform.select({
+            android: (
+              <View style={{ width: contentContainerPaddingHorizontal }} />
+            ),
+          })}
+          ListFooterComponent={Platform.select({
+            android: (
+              <View style={{ width: contentContainerPaddingHorizontal }} />
+            ),
+          })}
           onLayout={flatListOnLayout}
           data={items}
           horizontal
@@ -214,7 +228,9 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           keyExtractor={(_, index) => `${index}`}
           decelerationRate="fast"
           renderToHardwareTextureAndroid
-          snapToInterval={itemWidth}
+          snapToInterval={Platform.select({
+            ios: itemWidth,
+          })}
           onViewableItemsChanged={visibleSlideChanged}
           viewabilityConfig={{
             itemVisiblePercentThreshold: 80,

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

@@ -1,104 +1,211 @@
 import { waitFor } from '@testing-library/react-native';
 import React from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, Platform } from 'react-native';
 import { CardCarousel, CardCarouselHandles } from '../CardCarousel';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Typography from '../../Typography';
 
 describe('CardCarousel', () => {
-  it('should render correctly', () => {
-    const wrapper = renderWithTheme(
-      <CardCarousel
-        testID="cardCarousel"
-        style={{ width: 100, height: 100 }}
-        items={[
-          <Typography.Text> screen 1</Typography.Text>,
-          <Typography.Text> screen 2</Typography.Text>,
-        ]}
-      />
-    );
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-    expect(wrapper.queryAllByText('screen 1')).toHaveLength(1);
-    expect(wrapper.queryAllByText('screen 2')).toHaveLength(1);
-    expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(1);
-  });
-
-  describe('autoPlay', () => {
-    it('should call scrollToIndex 1', () => {
-      jest.useFakeTimers();
-      const carouselRef = React.createRef<
-        CardCarouselHandles & {
-          getFlatListRef: () => FlatList;
-        }
-      >();
+  describe('ios', () => {
+    beforeAll(() => {
+      Platform.OS = 'ios';
+    });
 
-      renderWithTheme(
+    it('should render correctly on iOS', () => {
+      const wrapper = renderWithTheme(
         <CardCarousel
-          ref={carouselRef}
-          autoPlay
-          autoPlayInterval={3000}
+          testID="cardCarousel"
+          style={{ width: 100, height: 100 }}
           items={[
             <Typography.Text> screen 1</Typography.Text>,
             <Typography.Text> screen 2</Typography.Text>,
           ]}
         />
       );
-      const flatListRef = carouselRef.current!.getFlatListRef()!;
-      const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
-      jest.advanceTimersByTime(3000);
-      expect(snapToIndexSpy).toHaveBeenCalledWith({
-        animated: true,
-        index: 1,
-        viewPosition: 0.5,
+
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByText('screen 1')).toHaveLength(1);
+      expect(wrapper.queryAllByText('screen 2')).toHaveLength(1);
+      expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(1);
+    });
+
+    describe('autoPlay', () => {
+      it('should call scrollToIndex 1', () => {
+        jest.useFakeTimers();
+        const carouselRef = React.createRef<
+          CardCarouselHandles & {
+            getFlatListRef: () => FlatList;
+          }
+        >();
+
+        renderWithTheme(
+          <CardCarousel
+            ref={carouselRef}
+            autoPlay
+            autoPlayInterval={3000}
+            items={[
+              <Typography.Text> screen 1</Typography.Text>,
+              <Typography.Text> screen 2</Typography.Text>,
+            ]}
+          />
+        );
+        const flatListRef = carouselRef.current!.getFlatListRef()!;
+        const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+        jest.advanceTimersByTime(3000);
+        expect(snapToIndexSpy).toHaveBeenCalledWith({
+          animated: true,
+          index: 1,
+          viewPosition: 0.5,
+        });
+
+        jest.useRealTimers();
       });
+    });
 
-      jest.useRealTimers();
+    describe('hidePageControl', () => {
+      const wrapper = renderWithTheme(
+        <CardCarousel
+          style={{ width: 100, height: 100 }}
+          hidePageControl
+          items={[
+            <Typography.Text> screen 1</Typography.Text>,
+            <Typography.Text> screen 2</Typography.Text>,
+          ]}
+        />
+      );
+      expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(0);
     });
-  });
 
-  describe('hidePageControl', () => {
-    const wrapper = renderWithTheme(
-      <CardCarousel
-        style={{ width: 100, height: 100 }}
-        hidePageControl
-        items={[
-          <Typography.Text> screen 1</Typography.Text>,
-          <Typography.Text> screen 2</Typography.Text>,
-        ]}
-      />
-    );
-    expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(0);
+    describe('snapToIndex', () => {
+      it('should render correctly', () => {
+        const carouselRef = React.createRef<
+          CardCarouselHandles & {
+            getFlatListRef: () => FlatList;
+          }
+        >();
+
+        renderWithTheme(
+          <CardCarousel
+            ref={carouselRef}
+            items={[
+              <Typography.Text> screen 1</Typography.Text>,
+              <Typography.Text> screen 2</Typography.Text>,
+              <Typography.Text> screen 3</Typography.Text>,
+            ]}
+          />
+        );
+
+        const flatListRef = carouselRef.current!.getFlatListRef()!;
+        const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+        carouselRef.current?.snapToIndex(2);
+        waitFor(() => expect(snapToIndexSpy).toHaveBeenCalled());
+
+        expect(snapToIndexSpy).toHaveBeenCalledWith({
+          animated: true,
+          index: 2,
+          viewPosition: 0.5,
+        });
+      });
+    });
   });
+  describe('android', () => {
+    beforeAll(() => {
+      Platform.OS = 'android';
+    });
+    it('should render correctly on iOS', () => {
+      const wrapper = renderWithTheme(
+        <CardCarousel
+          testID="cardCarousel"
+          style={{ width: 100, height: 100 }}
+          items={[
+            <Typography.Text> screen 1</Typography.Text>,
+            <Typography.Text> screen 2</Typography.Text>,
+          ]}
+        />
+      );
 
-  describe('snapToIndex', () => {
-    it('should render correctly', () => {
-      const carouselRef = React.createRef<
-        CardCarouselHandles & {
-          getFlatListRef: () => FlatList;
-        }
-      >();
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByText('screen 1')).toHaveLength(1);
+      expect(wrapper.queryAllByText('screen 2')).toHaveLength(1);
+      expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(1);
+    });
+
+    describe('autoPlay', () => {
+      it('should call scrollToIndex 1', () => {
+        jest.useFakeTimers();
+        const carouselRef = React.createRef<
+          CardCarouselHandles & {
+            getFlatListRef: () => FlatList;
+          }
+        >();
+
+        renderWithTheme(
+          <CardCarousel
+            ref={carouselRef}
+            autoPlay
+            autoPlayInterval={3000}
+            items={[
+              <Typography.Text> screen 1</Typography.Text>,
+              <Typography.Text> screen 2</Typography.Text>,
+            ]}
+          />
+        );
+        const flatListRef = carouselRef.current!.getFlatListRef()!;
+        const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+        jest.advanceTimersByTime(3000);
+        expect(snapToIndexSpy).toHaveBeenCalledWith({
+          animated: true,
+          index: 1,
+          viewPosition: undefined,
+        });
 
-      renderWithTheme(
+        jest.useRealTimers();
+      });
+    });
+
+    describe('hidePageControl', () => {
+      const wrapper = renderWithTheme(
         <CardCarousel
-          ref={carouselRef}
+          style={{ width: 100, height: 100 }}
+          hidePageControl
           items={[
             <Typography.Text> screen 1</Typography.Text>,
             <Typography.Text> screen 2</Typography.Text>,
-            <Typography.Text> screen 3</Typography.Text>,
           ]}
         />
       );
+      expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(0);
+    });
+
+    describe('snapToIndex', () => {
+      it('should render correctly', () => {
+        const carouselRef = React.createRef<
+          CardCarouselHandles & {
+            getFlatListRef: () => FlatList;
+          }
+        >();
+
+        renderWithTheme(
+          <CardCarousel
+            ref={carouselRef}
+            items={[
+              <Typography.Text> screen 1</Typography.Text>,
+              <Typography.Text> screen 2</Typography.Text>,
+              <Typography.Text> screen 3</Typography.Text>,
+            ]}
+          />
+        );
 
-      const flatListRef = carouselRef.current!.getFlatListRef()!;
-      const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
-      carouselRef.current?.snapToIndex(2);
-      waitFor(() => expect(snapToIndexSpy).toHaveBeenCalled());
+        const flatListRef = carouselRef.current!.getFlatListRef()!;
+        const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+        carouselRef.current?.snapToIndex(2);
+        waitFor(() => expect(snapToIndexSpy).toHaveBeenCalled());
 
-      expect(snapToIndexSpy).toHaveBeenCalledWith({
-        animated: true,
-        index: 2,
-        viewPosition: 0.5,
+        expect(snapToIndexSpy).toHaveBeenCalledWith({
+          animated: true,
+          index: 2,
+          viewPosition: undefined,
+        });
       });
     });
   });

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

@@ -1,6 +1,299 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardCarousel should render correctly 1`] = `
+exports[`CardCarousel android should render correctly on iOS 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "height": 100,
+        "width": 100,
+      },
+    ]
+  }
+  testID="cardCarousel"
+>
+  <RCTScrollView
+    bounces={false}
+    contentInset={
+      Object {
+        "bottom": 0,
+        "left": 24,
+        "right": 24,
+        "top": 0,
+      }
+    }
+    data={
+      Array [
+        <Text>
+           screen 1
+        </Text>,
+        <Text>
+           screen 2
+        </Text>,
+      ]
+    }
+    decelerationRate="fast"
+    getItem={[Function]}
+    getItemCount={[Function]}
+    getItemLayout={[Function]}
+    horizontal={true}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onViewableItemsChanged={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={true}
+    renderItem={[Function]}
+    renderToHardwareTextureAndroid={true}
+    scrollEventThrottle={32}
+    showsHorizontalScrollIndicator={false}
+    snapToAlignment="center"
+    snapToInterval={0}
+    stickyHeaderIndices={Array []}
+    viewabilityConfig={
+      Object {
+        "itemVisiblePercentThreshold": 80,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      Array [
+        Object {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": Object {
+            "itemVisiblePercentThreshold": 80,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "padding": 8,
+              },
+              Object {
+                "width": 0,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 8,
+                  "elevation": 4,
+                  "flex": 1,
+                  "shadowColor": "#001f23",
+                  "shadowOffset": Object {
+                    "height": 2,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.12,
+                  "shadowRadius": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  Array [
+                    Object {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "padding": 8,
+              },
+              Object {
+                "width": 0,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 8,
+                  "elevation": 4,
+                  "flex": 1,
+                  "shadowColor": "#001f23",
+                  "shadowOffset": Object {
+                    "height": 2,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.12,
+                  "shadowRadius": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  Array [
+                    Object {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        Array [
+          Object {
+            "alignSelf": "center",
+            "marginTop": 16,
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="pageControl"
+  >
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 1,
+          "width": 24,
+        }
+      }
+      testID="page-control-indicator0"
+    />
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator1"
+    />
+  </View>
+</View>
+`;
+
+exports[`CardCarousel ios should render correctly on iOS 1`] = `
 <View
   style={
     Array [

package/src/components/Error/StyledError.tsx

@@ -68,6 +68,7 @@ const StyledErrorTitle = styled(Typography.Text)(({ theme }) => ({
   textAlign: 'center',
   marginBottom: theme.__hd__.error.space.titleMarginBottom,
   color: theme.__hd__.error.colors.title,
+  lineHeight: theme.__hd__.error.lineHeight.title,
 }));
 
 const StyledErrorDescription = styled(Typography.Text)(({ theme }) => ({
@@ -75,6 +76,7 @@ const StyledErrorDescription = styled(Typography.Text)(({ theme }) => ({
   fontSize: theme.__hd__.error.fontSizes.description,
   textAlign: 'center',
   color: theme.__hd__.error.colors.description,
+  lineHeight: theme.__hd__.error.lineHeight.description,
 }));
 
 export {

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

@@ -77,6 +77,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
               "color": "#001f23",
               "fontFamily": "RebondGrotesque-SemiBold",
               "fontSize": 24,
+              "lineHeight": 32,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -107,6 +108,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
               "color": "#4d6265",
               "fontFamily": "RebondGrotesque",
               "fontSize": 18,
+              "lineHeight": 26,
               "textAlign": "center",
             },
             undefined,
@@ -209,6 +211,7 @@ exports[`Error renders error screen with image correctly 1`] = `
               "color": "#001f23",
               "fontFamily": "RebondGrotesque-SemiBold",
               "fontSize": 24,
+              "lineHeight": 32,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -239,6 +242,7 @@ exports[`Error renders error screen with image correctly 1`] = `
               "color": "#4d6265",
               "fontFamily": "RebondGrotesque",
               "fontSize": 18,
+              "lineHeight": 26,
               "textAlign": "center",
             },
             undefined,
@@ -357,6 +361,7 @@ exports[`Error renders full screen error page correctly 1`] = `
                 "color": "#001f23",
                 "fontFamily": "RebondGrotesque-SemiBold",
                 "fontSize": 24,
+                "lineHeight": 32,
                 "marginBottom": 8,
                 "textAlign": "center",
               },
@@ -387,6 +392,7 @@ exports[`Error renders full screen error page correctly 1`] = `
                 "color": "#4d6265",
                 "fontFamily": "RebondGrotesque",
                 "fontSize": 18,
+                "lineHeight": 26,
                 "textAlign": "center",
               },
               undefined,
@@ -451,6 +457,7 @@ exports[`Error renders title only correctly 1`] = `
               "color": "#001f23",
               "fontFamily": "RebondGrotesque-SemiBold",
               "fontSize": 24,
+              "lineHeight": 32,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -481,6 +488,7 @@ exports[`Error renders title only correctly 1`] = `
               "color": "#4d6265",
               "fontFamily": "RebondGrotesque",
               "fontSize": 18,
+              "lineHeight": 26,
               "textAlign": "center",
             },
             undefined,

package/src/components/Spinner/AnimatedSpinner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, StyleSheet } from 'react-native';
+import { Animated, Easing, Platform, StyleSheet } from 'react-native';
 
 import { StyledSpinnerDot, StyledSpinnerRow } from './StyledSpinner';
 
@@ -22,7 +22,7 @@ const AnimatedSpinner = ({
         toValue: 1,
         duration: 1200,
         easing: Easing.linear,
-        useNativeDriver: true,
+        useNativeDriver: Platform.OS !== 'web',
       })
     );
 

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -436,6 +436,10 @@ Object {
         "description": "RebondGrotesque",
         "title": "RebondGrotesque-SemiBold",
       },
+      "lineHeight": Object {
+        "description": 26,
+        "title": 32,
+      },
       "sizes": Object {
         "image": 176,
       },

package/src/theme/components/error.ts

@@ -34,7 +34,12 @@ const getErrorTheme = (theme: GlobalTheme) => {
     description: theme.fonts.playful.regular,
   };
 
-  return { fontSizes, colors, sizes, space, fonts };
+  const lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts, lineHeight };
 };
 
 export default getErrorTheme;

package/types/theme/components/error.d.ts

@@ -28,5 +28,9 @@ declare const getErrorTheme: (theme: GlobalTheme) => {
         title: string;
         description: string;
     };
+    lineHeight: {
+        title: number;
+        description: number;
+    };
 };
 export default getErrorTheme;