@hero-design/rn 8.59.0 → 8.60.0

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -5,9 +5,9 @@ import {
   ScrollViewProps as RnScrollViewProps,
   SectionListProps,
 } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
 import { FABProps } from '../FAB/FAB';
 import AnimatedFAB from './AnimatedFAB';
-import { ActionGroupProps } from '../FAB/ActionGroup';
 
 export interface AnimatedScrollerProps<T> {
   /**
@@ -27,6 +27,8 @@ function AnimatedScroller<T>({
   fabProps,
 }: AnimatedScrollerProps<T>) {
   const contentOffsetY = React.useRef(new Animated.Value(0)).current;
+  const contentHeight = React.useRef(new Animated.Value(0)).current;
+  const layoutHeight = React.useRef(new Animated.Value(0)).current;
 
   // Common props for all ScrollView, FlatList and SectionList.
   const { onScroll, scrollEventThrottle } = ScrollComponent.props;
@@ -37,7 +39,15 @@ function AnimatedScroller<T>({
         ...ScrollComponent.props,
         scrollEventThrottle: scrollEventThrottle || 100,
         onScroll: Animated.event(
-          [{ nativeEvent: { contentOffset: { y: contentOffsetY } } }],
+          [
+            {
+              nativeEvent: {
+                contentOffset: { y: contentOffsetY },
+                contentSize: { height: contentHeight },
+                layoutMeasurement: { height: layoutHeight },
+              },
+            },
+          ],
           {
             useNativeDriver: false,
             listener: onScroll,
@@ -46,7 +56,12 @@ function AnimatedScroller<T>({
       })}
 
       {!!fabProps && (
-        <AnimatedFAB fabProps={fabProps} contentOffsetY={contentOffsetY} />
+        <AnimatedFAB
+          fabProps={fabProps}
+          contentOffsetY={contentOffsetY}
+          contentHeight={contentHeight}
+          layoutHeight={layoutHeight}
+        />
       )}
     </>
   );

package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx

@@ -125,17 +125,28 @@ describe('Scrollables With FAB', () => {
       const fabProps =
         fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
 
+      const scrollConfig = {
+        contentSize: { height: 2000 },
+        layoutMeasurement: { height: 700, width: 400 },
+      };
+
       const { getByText, queryByText, getByTestId, queryByTestId } =
         renderWithTheme(<ScrollComponent fabProps={fabProps} />);
 
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 50 },
+        },
+      });
+
       // Scrolling down
       expect(getByText('Shout out')).toBeDefined();
 
       fireEvent.scroll(getByTestId('scrollable-with-fab'), {
         nativeEvent: {
-          contentSize: { height: 1000 },
-          contentOffset: { y: 10 },
-          layoutMeasurement: { height: 2000, width: 400 },
+          ...scrollConfig,
+          contentOffset: { y: 150 },
         },
       });
 
@@ -145,9 +156,8 @@ describe('Scrollables With FAB', () => {
 
       fireEvent.scroll(getByTestId('scrollable-with-fab'), {
         nativeEvent: {
-          contentSize: { height: 1000 },
-          contentOffset: { y: 400 },
-          layoutMeasurement: { height: 2000, width: 400 },
+          ...scrollConfig,
+          contentOffset: { y: 500 },
         },
       });
 
@@ -158,15 +168,26 @@ describe('Scrollables With FAB', () => {
       // Scrolling up
       fireEvent.scroll(getByTestId('scrollable-with-fab'), {
         nativeEvent: {
-          contentSize: { height: 1000 },
-          contentOffset: { y: -10 },
-          layoutMeasurement: { height: 2000, width: 400 },
+          ...scrollConfig,
+          contentOffset: { y: -150 },
         },
       });
 
       // Collapsed
       expect(queryByText('Shout out')).toBeNull();
       expect(getByTestId('animated-fab-icon')).toBeDefined();
+
+      // Scrolling up to top
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 0 },
+        },
+      });
+
+      // Expanded
+      expect(getByText('Shout out')).toBeDefined();
+      expect(getByTestId('styled-fab-icon')).toBeDefined();
     }
   );
 });