@hero-design/rn 8.59.0 → 8.60.1-alpha.0

package/lib/index.js

@@ -1322,7 +1322,9 @@ var BASE_COLORS = {
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
   yellow: '#fadb14',
-  windsorGrey: '#606065'
+  windsorGrey: '#606065',
+  mist: '#e8e9f8',
+  cloud: '#ccd9f5'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   var _ref17 = _slicedToArray(_ref16, 2),
@@ -1331,15 +1333,17 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
 }, {});
 var blue$1 = colorScales.blue,
-  ultramarineBlue$2 = colorScales.ultramarineBlue,
+  cloud = colorScales.cloud,
+  deepSaffron$2 = colorScales.deepSaffron,
   green$1 = colorScales.green,
   grey$2 = colorScales.grey,
   grotesqueGreen = colorScales.grotesqueGreen,
-  deepSaffron$2 = colorScales.deepSaffron,
+  mist = colorScales.mist,
   pink$1 = colorScales.pink,
   purple$1 = colorScales.purple,
-  vermilion$2 = colorScales.vermilion,
   smalt = colorScales.smalt,
+  ultramarineBlue$2 = colorScales.ultramarineBlue,
+  vermilion$2 = colorScales.vermilion,
   violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 var palette$b = {
@@ -1358,9 +1362,11 @@ var palette$b = {
   blueLight60: blue$1.lighten60,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
+  cloudLight90: cloud.lighten90,
   dodgerBlue: ultramarineBlue$2.base,
   dodgerBlueDark15: ultramarineBlue$2.darken15,
   dodgerBlueDark30: ultramarineBlue$2.darken30,
+  dodgerBlueDark60: ultramarineBlue$2.darken60,
   dodgerBlueLight30: ultramarineBlue$2.lighten30,
   dodgerBlueLight45: ultramarineBlue$2.lighten45,
   dodgerBlueLight60: ultramarineBlue$2.lighten60,
@@ -1369,6 +1375,7 @@ var palette$b = {
   green: green$1.base,
   greenDark15: green$1.darken15,
   greenDark30: green$1.darken30,
+  greenDark60: green$1.darken60,
   greenDark75: green$1.darken75,
   greenLight30: green$1.lighten30,
   greenLight75: green$1.lighten75,
@@ -1379,6 +1386,7 @@ var palette$b = {
   greyDark45: grey$2.darken45,
   greyDark60: grey$2.darken60,
   greyDark75: grey$2.darken75,
+  greyLight30: grey$2.lighten30,
   greyLight45: grey$2.lighten45,
   greyLight60: grey$2.lighten60,
   greyLight75: grey$2.lighten75,
@@ -1392,20 +1400,27 @@ var palette$b = {
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
+  mistLight30: mist.lighten30,
+  mistLight60: mist.lighten60,
+  mistLight90: mist.lighten90,
   orange: deepSaffron$2.base,
   orangeDark15: deepSaffron$2.darken15,
   orangeDark30: deepSaffron$2.darken30,
+  orangeDark60: deepSaffron$2.darken60,
   orangeDark75: deepSaffron$2.darken75,
   orangeLight30: deepSaffron$2.lighten30,
+  orangeLight60: deepSaffron$2.lighten60,
   orangeLight75: deepSaffron$2.lighten75,
   orangeLight90: deepSaffron$2.lighten90,
   pink: pink$1.base,
   pinkDark15: pink$1.darken15,
   pinkDark30: pink$1.darken30,
   pinkDark45: pink$1.darken45,
+  pinkDark60: pink$1.darken60,
   pinkDark75: pink$1.darken75,
   pinkLight30: pink$1.lighten30,
   pinkLight45: pink$1.lighten45,
+  pinkLight60: pink$1.lighten60,
   pinkLight75: pink$1.lighten75,
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
@@ -1448,6 +1463,7 @@ var palette$b = {
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark30: yellow$1.darken30,
+  yellowDark45: yellow$1.darken45,
   yellowDark75: yellow$1.darken75,
   yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
@@ -2964,11 +2980,17 @@ var getProgressTheme = function getProgressTheme(theme) {
 
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
-    circle: theme.colors.onDefaultGlobalSurface
+    circle: theme.colors.primary,
+    checked: theme.colors.highlightedSurface,
+    intents: {
+      light: theme.colors.defaultGlobalSurface,
+      dark: theme.colors.neutralGlobalSurface
+    }
   };
   var space = {
     circleLeftMargin: theme.space.small,
-    groupTopMargin: theme.space.xsmall
+    groupTopMarginSmall: theme.space.xsmall,
+    groupTopMarginMedium: theme.space.medium
   };
   var boundingBoxSize = theme.sizes.large;
   var innerPadding = theme.space.xsmall;
@@ -14416,7 +14438,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 +14454,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 +14547,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 +14566,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 +14666,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 +14716,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 +14795,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 +14815,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 +14860,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 +14873,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,
@@ -16128,9 +16197,18 @@ var InnerCircle = index$9(reactNative.View)(function (_ref2) {
   };
 });
 var Spacer = index$9(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeIntent = _ref3.themeIntent;
+  return {
+    marginTop: themeIntent === 'light' ? theme.__hd__.radio.space.groupTopMarginSmall : theme.__hd__.radio.space.groupTopMarginMedium
+  };
+});
+var StyledRadio = index$9(List.Item)(function (_ref4) {
+  var theme = _ref4.theme,
+    themeIntent = _ref4.themeIntent,
+    themeChecked = _ref4.themeChecked;
   return {
-    marginTop: theme.__hd__.radio.space.groupTopMargin
+    backgroundColor: themeChecked ? theme.__hd__.radio.colors.checked : theme.__hd__.radio.colors.intents[themeIntent]
   };
 });
 
@@ -16147,17 +16225,23 @@ var Radio = function Radio(_ref2) {
     checked = _ref2$checked === void 0 ? false : _ref2$checked,
     onPress = _ref2.onPress,
     style = _ref2.style,
-    testID = _ref2.testID;
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    subText = _ref2.subText,
+    testID = _ref2.testID,
+    _ref2$inactiveIntent = _ref2.inactiveIntent,
+    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent;
+  return /*#__PURE__*/React__default["default"].createElement(StyledRadio, {
     onPress: onPress,
     selected: checked,
     title: text,
+    subtitle: subText,
     suffix: /*#__PURE__*/React__default["default"].createElement(RadioCircle, {
       checked: checked,
       text: text
     }),
     style: style,
-    testID: testID
+    testID: testID,
+    themeIntent: inactiveIntent,
+    themeChecked: checked
   });
 };
 
@@ -16178,19 +16262,25 @@ var RadioGroup = function RadioGroup(_ref) {
     options = _ref.options,
     keyExtractor = _ref.keyExtractor,
     style = _ref.style,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$inactiveIntent = _ref.inactiveIntent,
+    inactiveIntent = _ref$inactiveIntent === void 0 ? 'light' : _ref$inactiveIntent;
   return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     style: style,
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: getKey(option, index, keyExtractor)
-    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, null), /*#__PURE__*/React__default["default"].createElement(Radio, {
+    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, {
+      themeIntent: inactiveIntent
+    }), /*#__PURE__*/React__default["default"].createElement(Radio, {
       text: option.text,
+      subText: option.subText,
       checked: option.value === value,
       onPress: function onPress() {
         return _onPress(option.value);
-      }
+      },
+      inactiveIntent: inactiveIntent
     }));
   }));
 };
@@ -35584,8 +35674,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 +35691,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 +35718,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.current = 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);
-    }
-  });
+  }, [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 +35787,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 +35799,12 @@ function AnimatedScroller(_ref) {
       nativeEvent: {
         contentOffset: {
           y: contentOffsetY
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
         }
       }
     }], {
@@ -35691,7 +35813,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.1-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.5",
+    "@hero-design/colors": "9.0.0-alpha.0",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"