@fountain-ui/core 2.0.0-beta.5 → 2.0.0-beta.50

package/src/Tooltip/Tooltip.tsx

@@ -1,25 +1,28 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, View, ViewProps } from 'react-native';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
 import type TooltipProps from './TooltipProps';
 import UpArrow from './UpArrow';
 
-const defaultOpacity = 0.8;
+const DEFAULT_OPACITY = 0.8;
 const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
 
-const animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
+        arrowLayout,
         children,
         left,
         onClose,
         placement = 'top',
         right,
+        numberOfTitleLines = 1,
         style,
         title,
         tooltipStyle,
@@ -29,19 +32,23 @@ export default function Tooltip(props: TooltipProps) {
 
     const theme = useTheme();
 
-    const [layout, setLayout] = React.useState(initialLayout);
+    const [layout, setLayout] = useState(initialLayout);
 
-    const scale = Animated.useSharedValue(0);
+    const scale = useSharedValue(0);
 
-    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     const [r, g, b] = rgb(theme.palette.primary.main);
 
     const totalVerticalOffset = -(layout.height + verticalOffset);
     const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: 'center',
+        alignItems: arrowLayout?.placement === 'left'
+            ? 'flex-start'
+            : arrowLayout?.placement === 'right'
+                ? 'flex-end'
+                : 'center',
         bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
         left,
         position: 'absolute',
@@ -52,18 +59,19 @@ export default function Tooltip(props: TooltipProps) {
         overflow: visible ? undefined : 'hidden',
     };
 
-    React.useEffect(() => {
-        const nextValue = visible ? 1 : 0;
+    useEffect(() => {
+        const nextScaleValue = visible ? 1 : 0;
 
-        scale.value = Animated.withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {
         alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,
+        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
         borderRadius: theme.shape.roundness,
         flexDirection: 'row',
         padding: theme.spacing(2),
+        width: '100%',
     };
 
     const fontStyle = createFontStyle(theme, {
@@ -73,19 +81,28 @@ export default function Tooltip(props: TooltipProps) {
 
     const textStyle = css([
         fontStyle,
-        { marginRight: theme.spacing(2) },
+        {
+            marginRight: theme.spacing(2),
+            flexShrink: 1,
+        },
     ]);
 
+    const arrowStyle = css({
+        ...(arrowLayout && {
+            [arrowLayout.placement]: arrowLayout.offset,
+        }),
+    });
+
     const buttonElem = (
-        <TouchableWithoutFeedback
-            disallowInterruption={true}
+        <ButtonBase
+            pressEffect={'none'}
             onPress={onClose}
         >
             <View style={css(touchableStyle)}>
                 <Text
                     children={title}
                     // TODO: Should we provide text prop customization?
-                    numberOfLines={1}
+                    numberOfLines={numberOfTitleLines}
                     style={textStyle}
                 />
                 <CloseIcon
@@ -94,15 +111,17 @@ export default function Tooltip(props: TooltipProps) {
                     height={20}
                 />
             </View>
-        </TouchableWithoutFeedback>
+        </ButtonBase>
     );
 
     const arrowElem = (
-        <UpArrow
-            upsideDown={placement === 'top'}
-            fill={theme.palette.primary.main}
-            opacity={defaultOpacity}
-        />
+        <View style={arrowStyle}>
+            <UpArrow
+                upsideDown={placement === 'top'}
+                fill={theme.palette.primary.main}
+                opacity={DEFAULT_OPACITY}
+            />
+        </View>
     );
 
     return (
@@ -112,7 +131,7 @@ export default function Tooltip(props: TooltipProps) {
             <Animated.View
                 onLayout={(event) => setLayout(event.nativeEvent.layout)}
                 style={[
-                    tooltipAnimatedStyle,
+                    animatedStyle,
                     tooltipLayoutStyle,
                     tooltipStyle,
                 ]}

package/src/Tooltip/TooltipProps.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 
 export type TooltipPlacement = 'top' | 'bottom';
 
+export type TooltipArrowPlacement = 'left' | 'right';
+
 export default interface TooltipProps extends ComponentProps<{
     /**
      * Tooltip reference element.
@@ -53,4 +55,19 @@ export default interface TooltipProps extends ComponentProps<{
      * @default false
      */
     visible?: boolean;
+
+    /**
+     * Tooltip arrow layout.
+     * If 'undefined', the arrow will be centered on tooltip.
+     */
+    arrowLayout?: {
+        placement: TooltipArrowPlacement;
+        offset: number;
+    }
+
+    /**
+     * number of tooltip's title lines
+     * @default 1
+     */
+    numberOfTitleLines?: TextProps['numberOfLines'];
 }> {}

package/src/Typography/Typography.tsx

@@ -45,7 +45,10 @@ const styles = StyleSheet.create({
 
 const Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {
     const {
+        accessibilityRole,
         align = 'inherit',
+        ariaLevel,
+        disableFontScaling = false,
         children,
         color: colorProp = 'inherit',
         ellipsizeMode = 'tail',
@@ -76,13 +79,15 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
     ]);
 
     const accessibility = accessibilityMap[variant];
-    const accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;
+    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;
+    const variantLevel = accessibility?.['area-level'];
 
     return (
         <Text
             ref={ref}
-            accessibilityRole={accessibilityRole}
-            aria-level={accessibility?.['area-level']}
+            accessibilityRole={accessibilityRole || variantRole}
+            allowFontScaling={!disableFontScaling}
+            aria-level={ariaLevel || variantLevel}
             children={children}
             ellipsizeMode={ellipsizeMode}
             // @ts-ignore

package/src/Typography/TypographyProps.ts

@@ -39,6 +39,11 @@ export interface AccessibilityMap extends Partial<{
 }> {}
 
 export default interface TypographyProps extends ComponentProps<{
+    /**
+     * Applies HTML tag at web and communicates purpose of component at app
+     */
+    accessibilityRole?: AccessibilityProps['accessibilityRole'];
+
     /**
      * Set the text-align on the component.
      * The value 'justify' is not supported on Android and fallbacks to left.
@@ -46,6 +51,17 @@ export default interface TypographyProps extends ComponentProps<{
      */
     align?: TypographyAlign;
 
+    /**
+     * Applies HTML heading level
+     */
+    ariaLevel?: number;
+
+    /**
+     * Specifies whether fonts should scale to respect Text Size accessibility settings.
+     * @default false
+     */
+    disableFontScaling?: boolean;
+
     /**
      * The content of the component.
      */

package/src/animated/AnimatedPressable.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
 import Pressable from '../Pressable';
 
-// @ts-ignore
 export default Animated.createAnimatedComponent(Pressable);

package/src/hooks/index.ts

@@ -1,7 +1,11 @@
+export { default as useAnimatedValue } from './useAnimatedValue';
 export { default as useBreakpointUp } from './useBreakpointUp';
 export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
 export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
+export { default as useImperativeState } from './useImperativeState';
+export { default as useSyncAnimatedValue } from './useSyncAnimatedValue';
 export { default as useThrottle } from './useThrottle';
+export { default as useDebounce } from './useDebounce';
 export { default as useValidWindowDimensions } from './useValidWindowDimensions';

package/src/hooks/useAnimatedValue.ts

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+
+function ensureFiniteNumber(value: any, fallback: number = 0): number {
+    return Number.isFinite(value) ? value : fallback;
+}
+
+export default function useAnimatedValue(initialValue: number = 0): Animated.Value {
+    if (__DEV__) {
+        if (!Number.isFinite(initialValue)) {
+            console.warn(`Initial value: ${initialValue} must be numeric.`);
+        }
+    }
+
+    const initialAnimatedValue = useMemo<Animated.Value>(
+        () => new Animated.Value(ensureFiniteNumber(initialValue)),
+        [],
+    );
+
+    return useRef<Animated.Value>(initialAnimatedValue).current;
+};

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,9 +1,26 @@
-import React from 'react';
-import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useCallback, useRef } from 'react';
+import {
+    Falsy,
+    Keyboard,
+    Platform,
+    RegisteredStyle,
+    ScrollViewProps,
+    StyleSheet,
+    ViewProps,
+    ViewStyle,
+} from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import {
+    runOnJS,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@fountain-ui/styles';
 import { useHeight } from '../internal/hooks';
-import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 
 type WebOnlyStyle = { boxShadow: any };
@@ -23,7 +40,8 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
+    dividerExposureMode?: 'always' | 'overlapped';
+    supportsReverseScroll?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -37,15 +55,16 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    translucent: false,
+    dividerExposureMode: 'overlapped',
+    supportsReverseScroll: true,
 };
 
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { translucent, keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -57,32 +76,32 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
-
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
-
-    const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
-
-    const onScrollViewChanged = (nextIndex: number) => {
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
+
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
+
+    const theme = useTheme();
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        return {
+            transform,
+            borderColor: theme.palette.divider,
+            borderBottomWidth: dividerExposureMode === 'always' || overlapped.value ? StyleSheet.hairlineWidth : 0,
+        };
+    }, [
+        theme,
+        dividerExposureMode,
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
+
+    const onScrollViewChanged = useCallback((nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             return;
@@ -100,16 +119,14 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
         }
-    };
+    }, [appBarHeight]);
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
             lastTranslateY.value = translateY.value;
         },
@@ -119,7 +136,6 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
 
-            const ty = translateY.value;
             const maxTy = maxTranslateY.value;
 
             if (SUPPORTS_DRAG_DETECTION) {
@@ -129,19 +145,25 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
                 overlapped.value = offsetY + translateY.value > 0;
             } else {
-                if (offsetY > -maxTy) {
-                    if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
-                    }
-                } else {
-                    if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
-                    }
-                }
+                const minOffsetY = -maxTy;
+                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+
+                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+                const dy = safeOffsetY - safeLastOffsetY;
+
+                const newTranslateY = supportsReverseScroll
+                    ? dy === 0
+                        ? lastTranslateY.value
+                        : dy > 0
+                            ? maxTy
+                            : 0
+                    : safeLastOffsetY === minOffsetY
+                        ? 0
+                        : maxTy;
+
+                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);
+                lastTranslateY.value = newTranslateY;
 
                 overlapped.value = offsetY > 0;
 
@@ -170,17 +192,15 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    });
+    }, [keyboardDismissMode, appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useDebounce.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export default function useDebounce(callback: (args?: any) => void, debounceMillis: number) {
+    const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        return () => {
+            debounceTimeout.current && clearTimeout(debounceTimeout.current);
+        };
+    }, []);
+
+    return useCallback((...args: any[]) => {
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+
+        if (callback) {
+            debounceTimeout.current = setTimeout(() => {
+                callback(...args);
+            }, debounceMillis);
+        }
+    }, [debounceMillis, callback]);
+}

package/src/hooks/useFadeInAppBar.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useMemo } from 'react';
+import { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
 import { useHeight } from '../internal/hooks';
@@ -18,7 +19,6 @@ export interface Options {
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface FadeInAppBar {
@@ -26,8 +26,9 @@ export interface FadeInAppBar {
     titleStyle: ViewStyleProp;
     onAppBarLayout: OnLayoutCallback;
     onScroll: OnScroll;
-    dy: Animated.SharedValue<number>;
-    normalized: Animated.SharedValue<number>;
+    scrollY: SharedValue<number>;
+    dy: SharedValue<number>;
+    normalized: SharedValue<number>;
 }
 
 const defaultOptions: Required<Options> = {
@@ -35,18 +36,14 @@ const defaultOptions: Required<Options> = {
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
-const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;
-
 export default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {
     const {
         fadeInBeginY,
         fadeInEndY,
         floating,
         keyboardDismissMode,
-        translucent,
     }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
@@ -60,7 +57,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
 
     const [appBarHeight, onAppBarLayout] = useHeight();
 
-    const [fromOffsetY, toOffsetY] = React.useMemo(() => {
+    const [fromOffsetY, toOffsetY] = useMemo(() => {
         const endY = typeof fadeInEndY === 'function'
             ? fadeInEndY(appBarHeight)
             : fadeInEndY;
@@ -72,34 +69,38 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         return [beginY, endY];
     }, [fadeInBeginY, fadeInBeginY, appBarHeight]);
 
-    const dy = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const normalized = Animated.useSharedValue<number>(0);
+    const scrollY = useSharedValue<number>(0);
+    const dy = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const normalized = useSharedValue<number>(0);
+
+    const originalBackgroundColor = theme.palette.background.default;
+    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
 
-    const backgroundColor = theme.palette.background.default;
-    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
+    const animatedAppBarStyle = useAnimatedStyle(() => {
+        const [r, g, b] = rgbValues;
+        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
 
-    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-        elevation: normalized.value >= 1 ? 6 : 0,
-        shadowColor: '#000',
-        shadowOffset,
-        shadowRadius: 4.65,
-        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
-    }));
+        return {
+            backgroundColor,
+            borderColor: theme.palette.divider,
+            borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,
+        };
+    }, [rgbValues]);
 
-    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({
+    const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,
-    }));
+    }), []);
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
         },
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
+            scrollY.value = offsetY;
 
             const distance = Math.max(toOffsetY - fromOffsetY, 1);
             const localOffsetY = offsetY - fromOffsetY;
@@ -114,11 +115,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    });
+    }, [keyboardDismissMode]);
 
     const appBarStyle = [
         animatedAppBarStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         floating ? styles.floating : undefined,
     ];
 
@@ -127,6 +128,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         titleStyle: [animatedTitleStyle],
         onAppBarLayout,
         onScroll: scrollHandler,
+        scrollY,
         dy,
         normalized,
     };