@hero-design/rn 8.24.0 → 8.25.1

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/Collapse/index.tsx

@@ -1,13 +1,13 @@
-import { Animated, Easing } from 'react-native';
+import type { ReactNode } from 'react';
 import React, { useCallback, useEffect } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import type { ReactNode } from 'react';
+import { LayoutAnimation, Platform, UIManager } from 'react-native';
+import { usePrevious } from '../../utils/hooks';
 import {
   StyledChildWrapper,
   StyledHiddenWrapper,
   StyledWrapper,
 } from './StyledCollapse';
-import { usePrevious } from '../../utils/hooks';
 
 export interface CollapseProps extends ViewProps {
   /*
@@ -28,8 +28,13 @@ export interface CollapseProps extends ViewProps {
   testID?: string;
 }
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
 const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
-  const collapseAnim = React.useRef(new Animated.Value(0)).current;
   const [contentHeight, setContentHeight] = React.useState<number>(0);
 
   const previousOpenState = usePrevious(open);
@@ -39,11 +44,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
       (open !== previousOpenState && previousOpenState !== undefined) ||
       open
     ) {
-      Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.cubic),
-        useNativeDriver: false,
-      }).start();
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
 
@@ -54,7 +55,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
   return (
     <StyledWrapper
       style={{
-        height: collapseAnim,
+        height: open ? contentHeight : 0,
       }}
       testID={testID}
     >