@hero-design/rn 8.59.0 → 8.60.0

package/lib/index.js

@@ -14416,7 +14416,8 @@ var Error$1 = function Error(_ref2) {
   }, nativeProps));
 };
 
-var StyledFAB$1 = index$9(reactNative.TouchableHighlight)(function (_ref) {
+var AnimatedTouchableHighlight = reactNative.Animated.createAnimatedComponent(reactNative.TouchableHighlight);
+var StyledFAB$1 = index$9(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
   return {
@@ -14431,7 +14432,8 @@ var StyledFAB$1 = index$9(reactNative.TouchableHighlight)(function (_ref) {
     shadowColor: theme.__hd__.fab.shadows.color,
     shadowOffset: theme.__hd__.fab.shadows.offset,
     shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity
+    shadowOpacity: theme.__hd__.fab.shadows.opacity,
+    height: theme.__hd__.fab.sizes.height
   };
 });
 var StyledFABIcon = index$9(Icon)(function (_ref2) {
@@ -14523,16 +14525,14 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
     testID: "styled-fab-icon"
   })), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
 };
-var defaultAnimation = {
-  create: {
-    type: 'easeInEaseOut',
-    property: 'opacity'
-  },
-  update: {
-    type: 'spring',
-    springDamping: reactNative.Platform.OS === 'ios' ? 0.7 : 1.2
-  },
-  duration: reactNative.Platform.OS === 'ios' ? 300 : 400
+var animateWidth = function animateWidth() {
+  reactNative.LayoutAnimation.configureNext({
+    duration: reactNative.Platform.OS === 'ios' ? 200 : 400,
+    update: {
+      type: 'spring',
+      springDamping: reactNative.Platform.OS === 'ios' ? 1 : 1.5
+    }
+  });
 };
 var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var _StyleSheet$flatten, _StyleSheet$flatten2;
@@ -14544,61 +14544,99 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     active = _ref3.active,
     style = _ref3.style;
   var theme = useTheme();
-  var _React$useState = React__default["default"].useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    canAnimate = _React$useState2[0],
-    setCanAnimate = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState({
+  var _React$useState = React__default["default"].useState({
       hideTitle: false,
       hideButton: false
     }),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    displayState = _React$useState4[0],
-    setDisplayState = _React$useState4[1];
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    displayState = _React$useState2[0],
+    setDisplayState = _React$useState2[1];
   var isIconOnly = displayState.hideTitle || active || !title;
+  var animatedValues = {
+    opacity: React__default["default"].useRef(new reactNative.Animated.Value(1)).current,
+    width: React__default["default"].useRef(new reactNative.Animated.Value(1)).current,
+    translateY: React__default["default"].useRef(new reactNative.Animated.Value(0)).current
+  };
+  var marginBottom = Number((_StyleSheet$flatten = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
+  var _React$useState3 = React__default["default"].useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    buttonWidth = _React$useState4[0],
+    setButtonWidth = _React$useState4[1];
+  var hasSetButtonWidth = buttonWidth > 0;
   React__default["default"].useImperativeHandle(ref, function () {
     return {
       show: function show() {
+        reactNative.Animated.spring(animatedValues.translateY, {
+          toValue: 0,
+          useNativeDriver: true
+        }).start();
         setDisplayState({
           hideButton: false,
           hideTitle: false
         });
+        animateWidth();
+        reactNative.Animated.spring(animatedValues.opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        }).start();
       },
       collapse: function collapse() {
+        reactNative.Animated.parallel([reactNative.Animated.spring(animatedValues.opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        }), reactNative.Animated.spring(animatedValues.translateY, {
+          toValue: 0,
+          useNativeDriver: true
+        })]).start();
+        animateWidth();
         setDisplayState({
           hideButton: false,
           hideTitle: true
         });
       },
       hide: function hide() {
-        setDisplayState(function (previousState) {
-          return _objectSpread2(_objectSpread2({}, previousState), {}, {
-            hideButton: true
+        reactNative.Animated.stagger(20, [reactNative.Animated.spring(animatedValues.opacity, {
+          toValue: 0,
+          useNativeDriver: true
+        }), reactNative.Animated.spring(animatedValues.translateY, {
+          toValue: 1,
+          useNativeDriver: true
+        })]).start(function () {
+          animateWidth();
+          setDisplayState(function (previousState) {
+            return _objectSpread2(_objectSpread2({}, previousState), {}, {
+              hideButton: true
+            });
           });
         });
       }
     };
   }, []);
-  React__default["default"].useEffect(function () {
-    if (canAnimate) {
-      reactNative.LayoutAnimation.configureNext(defaultAnimation);
-    }
-  }, [isIconOnly, displayState.hideButton, canAnimate]);
-  var marginBottom = Number((_StyleSheet$flatten = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
-  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1
-  /** Add a small timeout before executing animation to prevent flakiness */, {
-    onLayout: function onLayout() {
-      return setTimeout(function () {
-        return setCanAnimate(true);
-      }, 500);
+  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
+    onLayout: function onLayout(event) {
+      return !hasSetButtonWidth && !active && setButtonWidth(event.nativeEvent.layout.width);
     },
     underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
     style: [style, {
-      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
+      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
+      transform: [{
+        translateY: animatedValues.translateY.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, marginBottom + theme.__hd__.fab.sizes.height * 2]
+        })
+      }]
     }],
     testID: testID,
     themeActive: active
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: {
+      flexDirection: 'row',
+      opacity: animatedValues.opacity.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1]
+      })
+    }
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -14606,7 +14644,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  }));
+  })));
 });
 FAB$1.displayName = 'FAB';
 
@@ -14656,7 +14694,9 @@ var ActionItem = function ActionItem(_ref) {
     reactNative.Animated.spring(animatedValue.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: reactNative.Platform.OS !== 'web',
-      delay: index * 20
+      delay: index * 30,
+      speed: 10,
+      bounciness: 10
     }).start();
   }, [active, index]);
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
@@ -14733,8 +14773,9 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
+  var theme = useTheme();
   var fabRef = React.useRef(null);
-  var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
+  var animatedValue = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React__default["default"].useImperativeHandle(ref, function () {
     return {
       showFAB: function showFAB() {
@@ -14752,28 +14793,28 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [fabRef]);
   React__default["default"].useEffect(function () {
-    reactNative.Animated.spring(tranlateXAnimation.current, {
+    reactNative.Animated.spring(animatedValue.current, {
       toValue: active ? 1 : 0,
+      delay: 100,
       useNativeDriver: reactNative.Platform.OS !== 'web'
     }).start();
+    if (active) {
+      var _fabRef$current4;
+      (_fabRef$current4 = fabRef.current) === null || _fabRef$current4 === void 0 || _fabRef$current4.collapse();
+    } else {
+      var _fabRef$current5;
+      (_fabRef$current5 = fabRef.current) === null || _fabRef$current5 === void 0 || _fabRef$current5.show();
+    }
   }, [active]);
-  var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
+  var actionGroupOpacity = animatedValue.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  var interpolatedFABOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0]
-  });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: {
-      opacity: interpolatedFABOpacityAnimation
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, null, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     key: "fab",
     testID: "fab",
     icon: fabIcon,
@@ -14797,7 +14838,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
-      opacity: interpolatedActionGroupOpacityAnimation
+      opacity: actionGroupOpacity
     }
   }, /*#__PURE__*/React__default["default"].createElement(Box, {
     style: [style, {
@@ -14810,7 +14851,13 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  }))), active && /*#__PURE__*/React__default["default"].createElement(StyledFAB
+  // This FAB is moved up a bit compared to the original FAB,
+  // set marginBottom to negative value to compensate for it
+  , {
+    style: {
+      marginBottom: -theme.space.xxsmall
+    },
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,
@@ -35584,8 +35631,9 @@ var index = Object.assign(RichTextEditorWithRef, {
   Toolbar: EditorToolbar
 });
 
-var COLLAPSE_BREAKPOINT = 10;
-var SHOW_AND_HIDE_BREAKPOINT = 200;
+var LAST_BREAKPOINT = 100;
+var MIDDLE_BREAKPOINT = 250;
+var MAX_ANIMATABLE_SCROLL_DISTANCE = 400;
 var REF_ACTIONS_BY_COMPONENT = {
   FAB: {
     show: 'show',
@@ -35600,27 +35648,23 @@ var REF_ACTIONS_BY_COMPONENT = {
 };
 var AnimatedFAB = function AnimatedFAB(_ref) {
   var fabProps = _ref.fabProps,
-    contentOffsetY = _ref.contentOffsetY;
+    contentOffsetY = _ref.contentOffsetY,
+    contentHeight = _ref.contentHeight,
+    layoutHeight = _ref.layoutHeight;
   var component = 'items' in fabProps ? 'ActionGroup' : 'FAB';
-  var _React$useState = React__default["default"].useState('down'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    currentScrollDirection = _React$useState2[0],
-    setCurrentScrollDirection = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    lastScrollY = _React$useState4[0],
-    setLastScrollY = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState('show'),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    fabState = _React$useState6[0],
-    setFabState = _React$useState6[1];
-  var _React$useState7 = React__default["default"].useState(SHOW_AND_HIDE_BREAKPOINT),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    remainingScrollOffset = _React$useState8[0],
-    setRemainingScrollOffset = _React$useState8[1];
   var ref = React__default["default"].useRef(null);
+  var currentContentHeight = React__default["default"].useRef(0);
+  var currentLayoutHeight = React__default["default"].useRef(0);
+  /** fabState is used to avoid calling duplicated animations. */
+  var fabState = React__default["default"].useRef('show');
+  /** remainingScrollOffset determines whether to animate the FAB. */
+  var remainingScrollOffset = React__default["default"].useRef(MAX_ANIMATABLE_SCROLL_DISTANCE);
+  /** currentScrollDirection is used to determine the scroll direction. */
+  var currentScrollDirection = React__default["default"].useRef('down');
+  /** lastScrollY is the scrollY from the preview scroll event. */
+  var lastScrollY = React__default["default"].useRef(0);
   var animateFab = React__default["default"].useCallback(function (newState) {
-    if (fabState !== newState) {
+    if (fabState.current !== newState) {
       if (newState === 'show') {
         var _ref$current;
         (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current[REF_ACTIONS_BY_COMPONENT[component].show]();
@@ -35631,37 +35675,64 @@ var AnimatedFAB = function AnimatedFAB(_ref) {
         var _ref$current3;
         (_ref$current3 = ref.current) === null || _ref$current3 === void 0 || _ref$current3[REF_ACTIONS_BY_COMPONENT[component].collapse]();
       }
-      setFabState(newState);
-    }
-  }, [fabState, component]);
-  // Listen to ScrollView's contentOffsetY value
-  contentOffsetY.addListener(function (_ref2) {
-    var value = _ref2.value;
-    if (value < 0) {
-      return;
-    }
-    var newScrollDirection = value > lastScrollY ? 'down' : 'up';
-    var isScrollingDown = newScrollDirection === 'down';
-    if (newScrollDirection !== currentScrollDirection || lastScrollY === 0) {
-      setLastScrollY(value);
-      setCurrentScrollDirection(newScrollDirection);
-    }
-    var offsetFromLastDirection = Math.abs(value - lastScrollY);
-    var offsetDiff = Math.round(Math.max(remainingScrollOffset - offsetFromLastDirection, 0));
-    if (remainingScrollOffset > 0) {
-      if (offsetDiff === SHOW_AND_HIDE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'show' : 'hide');
-      } else if (offsetDiff <= SHOW_AND_HIDE_BREAKPOINT && offsetDiff > COLLAPSE_BREAKPOINT) {
-        animateFab('collapse');
-      } else if (offsetDiff <= COLLAPSE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'hide' : 'show');
-      }
-      setRemainingScrollOffset(offsetDiff);
+      fabState.current = newState;
     }
-  });
+  }, [component]);
   React__default["default"].useEffect(function () {
-    setRemainingScrollOffset(SHOW_AND_HIDE_BREAKPOINT);
-  }, [currentScrollDirection]);
+    contentHeight.addListener(function (_ref2) {
+      var value = _ref2.value;
+      if (value > 0 && value !== currentContentHeight.current) {
+        currentContentHeight.current = value;
+      }
+    });
+    layoutHeight.addListener(function (_ref3) {
+      var value = _ref3.value;
+      if (value > 0 && value !== currentLayoutHeight.current) {
+        currentLayoutHeight.current = value;
+      }
+    });
+    // Listen to ScrollView's contentOffsetY value
+    contentOffsetY.addListener(function (_ref4) {
+      var value = _ref4.value;
+      if (value < 0 ||
+      // Prevent calling the function if the scroll is not significant
+      value > 0 && Math.abs(value - lastScrollY.current) < 5) {
+        return;
+      }
+      // Scroll up to top, bouncing included.
+      if (value === 0 && lastScrollY.current !== 0) {
+        animateFab('show');
+      }
+      var newScrollDirection = value >= lastScrollY.current ? 'down' : 'up';
+      if (newScrollDirection !== currentScrollDirection.current) {
+        // If scroll direction changes, reset all values
+        currentScrollDirection.current = newScrollDirection;
+        remainingScrollOffset.current = MAX_ANIMATABLE_SCROLL_DISTANCE;
+      }
+      var hasReachedBottom = value + currentLayoutHeight.current >= currentContentHeight.current;
+      // Scroll down to bottom, bouncing included.
+      if (hasReachedBottom) {
+        animateFab('hide');
+        return;
+      }
+      if (remainingScrollOffset.current) {
+        var offsetDiff = Math.round(Math.max(Math.abs(value - lastScrollY.current), 0));
+        var newRemainingScrollOffset = Math.max(remainingScrollOffset.current - offsetDiff, 0);
+        if (newRemainingScrollOffset <= LAST_BREAKPOINT) {
+          animateFab(currentScrollDirection.current === 'down' ? 'hide' : 'show');
+        } else if (newRemainingScrollOffset <= MIDDLE_BREAKPOINT) {
+          animateFab('collapse');
+        }
+        remainingScrollOffset.current = newRemainingScrollOffset;
+      }
+      lastScrollY.current = value;
+    });
+    return function () {
+      contentOffsetY.removeAllListeners();
+      contentHeight.removeAllListeners();
+      layoutHeight.removeAllListeners();
+    };
+  }, [contentHeight, contentOffsetY, layoutHeight]);
   return component === 'FAB' ? /*#__PURE__*/React__default["default"].createElement(FAB, _extends$1({
     ref: ref
   }, fabProps)) : /*#__PURE__*/React__default["default"].createElement(ActionGroup, _extends$1({
@@ -35673,6 +35744,8 @@ function AnimatedScroller(_ref) {
   var ScrollComponent = _ref.ScrollComponent,
     fabProps = _ref.fabProps;
   var contentOffsetY = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
+  var contentHeight = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
+  var layoutHeight = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
   // Common props for all ScrollView, FlatList and SectionList.
   var _ScrollComponent$prop = ScrollComponent.props,
     onScroll = _ScrollComponent$prop.onScroll,
@@ -35683,6 +35756,12 @@ function AnimatedScroller(_ref) {
       nativeEvent: {
         contentOffset: {
           y: contentOffsetY
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
         }
       }
     }], {
@@ -35691,7 +35770,9 @@ function AnimatedScroller(_ref) {
     })
   })), !!fabProps && /*#__PURE__*/React__default["default"].createElement(AnimatedFAB, {
     fabProps: fabProps,
-    contentOffsetY: contentOffsetY
+    contentOffsetY: contentOffsetY,
+    contentHeight: contentHeight,
+    layoutHeight: layoutHeight
   }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.59.0",
+  "version": "8.60.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AnimatedScroller/AnimatedFAB.tsx

@@ -7,8 +7,9 @@ import ActionGroup, {
 } from '../FAB/ActionGroup';
 import { FABHandles, FABProps } from '../FAB/FAB';
 
-const COLLAPSE_BREAKPOINT = 10;
-const SHOW_AND_HIDE_BREAKPOINT = 200;
+const LAST_BREAKPOINT = 100;
+const MIDDLE_BREAKPOINT = 250;
+const MAX_ANIMATABLE_SCROLL_DISTANCE = 400;
 const REF_ACTIONS_BY_COMPONENT = {
   FAB: {
     show: 'show',
@@ -25,25 +26,36 @@ const REF_ACTIONS_BY_COMPONENT = {
 interface AnimatedFABProps {
   fabProps: FABProps | ActionGroupProps;
   contentOffsetY: Animated.Value;
+  contentHeight: Animated.Value;
+  layoutHeight: Animated.Value;
 }
 
-const AnimatedFAB = ({ fabProps, contentOffsetY }: AnimatedFABProps) => {
+const AnimatedFAB = ({
+  fabProps,
+  contentOffsetY,
+  contentHeight,
+  layoutHeight,
+}: AnimatedFABProps) => {
   const component = 'items' in fabProps ? 'ActionGroup' : 'FAB';
-  const [currentScrollDirection, setCurrentScrollDirection] = React.useState<
-    'up' | 'down'
-  >('down');
-  const [lastScrollY, setLastScrollY] = React.useState(0);
-  const [fabState, setFabState] = React.useState<'show' | 'hide' | 'collapse'>(
-    'show'
-  );
-  const [remainingScrollOffset, setRemainingScrollOffset] = React.useState(
-    SHOW_AND_HIDE_BREAKPOINT
-  );
   const ref = React.useRef<FABHandles & ActionGroupHandles>(null);
+  const currentContentHeight = React.useRef(0);
+  const currentLayoutHeight = React.useRef(0);
+
+  /** fabState is used to avoid calling duplicated animations. */
+  const fabState = React.useRef<'show' | 'hide' | 'collapse'>('show');
+
+  /** remainingScrollOffset determines whether to animate the FAB. */
+  const remainingScrollOffset = React.useRef(MAX_ANIMATABLE_SCROLL_DISTANCE);
+
+  /** currentScrollDirection is used to determine the scroll direction. */
+  const currentScrollDirection = React.useRef<'up' | 'down'>('down');
+
+  /** lastScrollY is the scrollY from the preview scroll event. */
+  const lastScrollY = React.useRef(0);
 
   const animateFab = React.useCallback(
     (newState: 'show' | 'hide' | 'collapse') => {
-      if (fabState !== newState) {
+      if (fabState.current !== newState) {
         if (newState === 'show') {
           ref.current?.[REF_ACTIONS_BY_COMPONENT[component].show]();
         } else if (newState === 'hide') {
@@ -51,49 +63,87 @@ const AnimatedFAB = ({ fabProps, contentOffsetY }: AnimatedFABProps) => {
         } else {
           ref.current?.[REF_ACTIONS_BY_COMPONENT[component].collapse]();
         }
-        setFabState(newState);
+        fabState.current = newState;
       }
     },
-    [fabState, component]
+    [component]
   );
 
-  // Listen to ScrollView's contentOffsetY value
-  contentOffsetY.addListener(({ value }) => {
-    if (value < 0) {
-      return;
-    }
-
-    const newScrollDirection = value > lastScrollY ? 'down' : 'up';
-    const isScrollingDown = newScrollDirection === 'down';
-
-    if (newScrollDirection !== currentScrollDirection || lastScrollY === 0) {
-      setLastScrollY(value);
-      setCurrentScrollDirection(newScrollDirection);
-    }
-    const offsetFromLastDirection = Math.abs(value - lastScrollY);
-    const offsetDiff = Math.round(
-      Math.max(remainingScrollOffset - offsetFromLastDirection, 0)
-    );
-
-    if (remainingScrollOffset > 0) {
-      if (offsetDiff === SHOW_AND_HIDE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'show' : 'hide');
-      } else if (
-        offsetDiff <= SHOW_AND_HIDE_BREAKPOINT &&
-        offsetDiff > COLLAPSE_BREAKPOINT
+  React.useEffect(() => {
+    contentHeight.addListener(({ value }) => {
+      if (value > 0 && value !== currentContentHeight.current) {
+        currentContentHeight.current = value;
+      }
+    });
+
+    layoutHeight.addListener(({ value }) => {
+      if (value > 0 && value !== currentLayoutHeight.current) {
+        currentLayoutHeight.current = value;
+      }
+    });
+
+    // Listen to ScrollView's contentOffsetY value
+    contentOffsetY.addListener(({ value }) => {
+      if (
+        value < 0 ||
+        // Prevent calling the function if the scroll is not significant
+        (value > 0 && Math.abs(value - lastScrollY.current) < 5)
       ) {
-        animateFab('collapse');
-      } else if (offsetDiff <= COLLAPSE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'hide' : 'show');
+        return;
       }
 
-      setRemainingScrollOffset(offsetDiff);
-    }
-  });
+      // Scroll up to top, bouncing included.
+      if (value === 0 && lastScrollY.current !== 0) {
+        animateFab('show');
+      }
 
-  React.useEffect(() => {
-    setRemainingScrollOffset(SHOW_AND_HIDE_BREAKPOINT);
-  }, [currentScrollDirection]);
+      const newScrollDirection = value >= lastScrollY.current ? 'down' : 'up';
+
+      if (newScrollDirection !== currentScrollDirection.current) {
+        // If scroll direction changes, reset all values
+        currentScrollDirection.current = newScrollDirection;
+        remainingScrollOffset.current = MAX_ANIMATABLE_SCROLL_DISTANCE;
+      }
+
+      const hasReachedBottom =
+        value + currentLayoutHeight.current >= currentContentHeight.current;
+
+      // Scroll down to bottom, bouncing included.
+      if (hasReachedBottom) {
+        animateFab('hide');
+        return;
+      }
+
+      if (remainingScrollOffset.current) {
+        const offsetDiff = Math.round(
+          Math.max(Math.abs(value - lastScrollY.current), 0)
+        );
+
+        const newRemainingScrollOffset = Math.max(
+          remainingScrollOffset.current - offsetDiff,
+          0
+        );
+
+        if (newRemainingScrollOffset <= LAST_BREAKPOINT) {
+          animateFab(
+            currentScrollDirection.current === 'down' ? 'hide' : 'show'
+          );
+        } else if (newRemainingScrollOffset <= MIDDLE_BREAKPOINT) {
+          animateFab('collapse');
+        }
+
+        remainingScrollOffset.current = newRemainingScrollOffset;
+      }
+
+      lastScrollY.current = value;
+    });
+
+    return () => {
+      contentOffsetY.removeAllListeners();
+      contentHeight.removeAllListeners();
+      layoutHeight.removeAllListeners();
+    };
+  }, [contentHeight, contentOffsetY, layoutHeight]);
 
   return component === 'FAB' ? (
     <FAB ref={ref} {...(fabProps as FABProps)} />