@fountain-ui/core 2.0.0-beta.1 → 2.0.0-beta.12

package/src/Slide/Slide.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import { Dimensions } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type SlideProps from './SlideProps';
 
 const defaultEnterDuration = 300;
 const defaultExitDuration = 300;
 
+const getDisappearingOffsetY = (): number => Dimensions.get('window').height;
+
 export default function Slide(props: SlideProps) {
     const {
         animatedY: animatedYProp,
@@ -20,40 +23,40 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = Animated.useSharedValue(window.height);
+    const y = useSharedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }));
+    }), []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: Animated.WithTimingConfig = {
+            onEnter?.();
+
+            const toValue = 0;
+            const enterConfig: Readonly<WithTimingConfig> = {
                 duration: enterDuration,
                 easing: Easing.out(Easing.exp),
             };
 
-            onEnter?.();
-
-            animatedY.value = Animated.withTiming(0, enterConfig, isFinished => {
+            animatedY.value = withTiming(toValue, enterConfig, isFinished => {
                 if (isFinished && onEntered) {
-                    Animated.runOnJS(onEntered)();
+                    runOnJS(onEntered)();
                 }
             });
         } else {
-            const exitConfig: Animated.WithTimingConfig = {
+            onExit?.();
+
+            const toValue = getDisappearingOffsetY();
+            const exitConfig: Readonly<WithTimingConfig> = {
                 duration: exitDuration,
                 easing: Easing.in(Easing.ease),
             };
 
-            onExit?.();
-
-            animatedY.value = Animated.withTiming(window.height, exitConfig, isFinished => {
+            animatedY.value = withTiming(toValue, exitConfig, isFinished => {
                 if (isFinished && onExited) {
-                    Animated.runOnJS(onExited)();
+                    runOnJS(onExited)();
                 }
             });
         }

package/src/SvgIcon/SvgIcon.tsx

@@ -6,7 +6,6 @@ import type SvgIconProps from './SvgIconProps';
 export default function SvgIcon(props: SvgIconProps) {
     const {
         color: colorProp = 'primary',
-        colorValue,
         height = 24,
         style: styleProp,
         viewBox = '0 0 20 20',
@@ -16,7 +15,7 @@ export default function SvgIcon(props: SvgIconProps) {
 
     const theme = useTheme();
 
-    const color = colorValue ?? theme.palette[colorProp].main;
+    const color = theme.palette[colorProp].main;
 
     const style = css([
         { flexShrink: 0 },

package/src/SvgIcon/SvgIconProps.ts

@@ -19,7 +19,7 @@ export default interface SvgIconProps extends OverridableComponentProps<SvgProps
     /**
      * The color of the component. It is treated as higher priority than `color` prop if provided.
      */
-    colorValue?: string;
+    fill?: SvgProps['fill'];
 
     /**
      * The height applied to the icon.

package/src/Tabs/TabIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type TabIndicatorProps from './TabIndicatorProps';
@@ -35,8 +35,9 @@ export default function TabIndicator(props: TabIndicatorProps) {
 
     const styles = useStyles();
 
-    const layout = Animated.useDerivedValue(() => {
+    const animatedStyle = useAnimatedStyle(() => {
         const rawScrollValue = scrollValue.value;
+
         const index = Math.floor(rawScrollValue);
         const offset = rawScrollValue % 1;
 
@@ -53,12 +54,7 @@ export default function TabIndicator(props: TabIndicatorProps) {
             left: x1 + leftInset,
             width: Math.max(x2 - x1 - rightInset, 0),
         };
-    });
-
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        left: layout.value.left,
-        width: layout.value.width,
-    }));
+    }, [coordinates, scrollable]);
 
     return (
         <Animated.View

package/src/Tabs/TabIndicatorProps.ts

@@ -1,5 +1,5 @@
 import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import type { OverridableComponentProps } from '../types';
 import type TabCoordinate from './TabCoordinate';
 
@@ -22,5 +22,5 @@ export default interface TabIndicatorProps extends OverridableComponentProps<Vie
     /**
      * Scrollable value for using animated interpolation.
      */
-    scrollValue: Animated.SharedValue<number>;
+    scrollValue: SharedValue<number>;
 }> {}

package/src/Tabs/Tabs.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { cloneElement, useEffect, useMemo, useRef } from 'react';
 import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { isEveryDefined } from '@fountain-ui/utils';
 import { css, useTheme } from '../styles';
-import { useWidth } from '../internal/hooks';
 import type TabsProps from './TabsProps';
-import TabCoordinate, { defaultCoordinate } from './TabCoordinate';
 import TabIndicator from './TabIndicator';
+import useTabsWidth from './useTabsWidth';
+import useTabCoordinates from './useTabCoordinates';
 
 type TabsStyleKeys =
     | 'root'
@@ -34,6 +34,11 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
     };
 };
 
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = {
+    duration: 200,
+    easing: Easing.out(Easing.exp),
+};
+
 export default function Tabs(props: TabsProps) {
     const {
         children,
@@ -51,56 +56,49 @@ export default function Tabs(props: TabsProps) {
 
     const styles = useStyles();
 
-    const [containerWidth, handleLayout] = useWidth();
+    const [containerWidth, handleLayout] = useTabsWidth();
 
-    const scrollViewRef = React.useRef<ScrollView | null>(null);
+    const scrollViewRef = useRef<ScrollView | null>(null);
 
-    const tabCount = React.Children.count(children);
-    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));
+    const { coordinates, updateCoordinate } = useTabCoordinates(children);
 
-    const internalScrollValue = Animated.useSharedValue(0);
-    const scrollValue = scrollValueProp || internalScrollValue;
+    const internalScrollValue = useSharedValue(0);
+    const scrollValue = scrollValueProp ?? internalScrollValue;
 
-    const isReadyToRenderIndicator = isEveryDefined(coordinates);
+    const isReadyToRenderIndicator = coordinates.length > 0;
 
-    React.useEffect(() => {
+    useEffect(() => {
         const animateTab = (index: number) => {
-            internalScrollValue.value = Animated.withTiming(index, {
-                duration: 200,
-                easing: Easing.out(Easing.exp),
-            });
+            scrollValue.value = withTiming(index, ANIMATION_CONFIG);
         };
 
-        if (scrollValueProp === undefined) {
-            animateTab(indexProp);
-        }
-    }, [indexProp, scrollValueProp, internalScrollValue]);
+        animateTab(indexProp);
+    }, [indexProp, scrollValue]);
+
+    const scrollPosition = useMemo<number>(() => {
+        const coordinate = coordinates[indexProp - 1];
 
-    React.useEffect(() => {
-        const snapTab = (index: number) => {
-            const scrollView = scrollViewRef.current;
-            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;
+        if (coordinate) {
+            const tabWidth = coordinate.x2 - coordinate.x1;
+            return Math.floor(coordinate.x1 + tabWidth / 2);
+        }
 
-            if (scrollView) {
-                const tabWidth = coordinate.x2 - coordinate.x1;
-                const x = coordinate.x1 + tabWidth / 2;
+        return 0;
+    }, [indexProp, coordinates]);
 
-                scrollView.scrollTo({ x, y: 0, animated: true });
-            }
-        };
+    useEffect(() => {
+        const scrollView = scrollViewRef.current;
 
-        snapTab(indexProp);
-    }, [indexProp, containerWidth, coordinates]);
+        if (scrollView) {
+            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });
+        }
+    }, [scrollPosition, containerWidth]);
 
     const tabElements = React.Children.map(children, (child, index) => {
         const onLayout = (event: LayoutChangeEvent) => {
             const { x, width } = event.nativeEvent.layout;
 
-            setCoordinates(prev => ([
-                ...prev.slice(0, index),
-                { x1: x, x2: x + width },
-                ...prev.slice(index + 1),
-            ]));
+            updateCoordinate(index, x, width);
         };
 
         const onMouseDown = (e: GestureResponderEvent) => {
@@ -121,7 +119,7 @@ export default function Tabs(props: TabsProps) {
             : (isReadyToRenderIndicator ? false : selected);
 
         //@ts-ignore
-        return React.cloneElement(child, {
+        return cloneElement(child, {
             enableIndicator: enableIndicatorPlaceholder,
             onLayout,
             onPress,
@@ -169,10 +167,10 @@ export default function Tabs(props: TabsProps) {
                     {indicator}
                 </ScrollView>
             ) : (
-                <>
+                <React.Fragment>
                     {tabElements}
                     {indicator}
-                </>
+                </React.Fragment>
             )}
         </View>
     );

package/src/Tabs/useTabCoordinates.ts

@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react';
+import { isEveryDefined } from '@fountain-ui/utils';
+import TabCoordinate from './TabCoordinate';
+
+export interface UseTabCoordinates {
+    coordinates: TabCoordinate[];
+    updateCoordinate: (index: number, x: number, width: number) => void;
+}
+
+export default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates {
+    const incompleteCoordinatesRef = useRef<TabCoordinate[]>([]);
+
+    const [completeCoordinates, setCompleteCoordinates] = useState<TabCoordinate[]>([]);
+
+    const isAllCoordinatesDefined = (coordinates: TabCoordinate[]): boolean => {
+        const numberOfTab = React.Children.count(tabElements);
+        const numberOfCoordinates = coordinates.length;
+
+        const everyCoordinatesDefined = isEveryDefined(coordinates);
+
+        return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
+    };
+
+    const updateCoordinate = (index: number, x: number, width: number) => {
+        incompleteCoordinatesRef.current[index] = { x1: x, x2: x + width };
+
+        if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {
+            setCompleteCoordinates(incompleteCoordinatesRef.current);
+        }
+    };
+
+    return {
+        coordinates: completeCoordinates,
+        updateCoordinate,
+    };
+}

package/src/Tabs/useTabsWidth.ts

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, ViewProps } from 'react-native';
+
+const assumeInitialWidth = (): number => Dimensions.get('window').width;
+
+const isIntegerPartEquals = (a: number, b: number) => Math.round(a) === Math.round(b);
+
+const isIntegerPartDifferent = (a: number, b: number) => !isIntegerPartEquals(a, b);
+
+export default function useTabsWidth(): [number, ViewProps['onLayout']] {
+    const [width, setWidth] = useState(assumeInitialWidth);
+
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
+        const newWidth = e.nativeEvent.layout.width;
+
+        setWidth((prevWidth) => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);
+    }, []);
+
+    return [width, onLayout];
+}

package/src/TextField/InputLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import usePaperStyles from '../Paper/usePaperStyles';
 import { inputPaddingHorizontal } from './utils';
 
 interface LabelProps {
@@ -30,8 +31,6 @@ interface LabelProps {
 type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
 
 const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
-    const theme = useTheme();
-
     return {
         background: {
             position: 'absolute',
@@ -40,15 +39,13 @@ const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
             bottom: 0,
             right: 0,
             width: 8,
-            height: 2,
-            backgroundColor: theme.palette.background.default,
+            height: 4,
         },
         backgroundText: {
             position: 'absolute',
             left: 18,
             paddingHorizontal: 0,
             color: 'transparent',
-            backgroundColor: theme.palette.background.default,
         },
         placeholder: {
             position: 'absolute',
@@ -81,8 +78,16 @@ const InputLabel = (props: LabelProps) => {
         value,
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
+    const paperStyles = usePaperStyles();
+
+    const backgroundStyle = {
+        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,
+    };
+
     const hasFocus = hasActiveOutline || value;
     const opacity = animatedLabel.interpolate({
         inputRange: [0, 1],
@@ -141,6 +146,7 @@ const InputLabel = (props: LabelProps) => {
                     pointerEvents={'none'}
                     style={[
                         styles.background,
+                        backgroundStyle,
                         {
                             opacity,
                             transform: [
@@ -159,6 +165,7 @@ const InputLabel = (props: LabelProps) => {
                     style={[
                         styles.placeholder,
                         styles.backgroundText,
+                        backgroundStyle,
                         labelStyle,
                         {
                             top: topPosition + 1,

package/src/TextField/OutlinedTextField.tsx

@@ -34,7 +34,6 @@ const useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextF
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: theme.palette.background.default,
             borderRadius: theme.shape.roundness,
         },
         input: {
@@ -80,6 +79,7 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
     } = props;
 
     const theme = useTheme();
+
     const styles = useStyles();
 
     const hasActiveOutline = focused || error;

package/src/Tooltip/Tooltip.tsx

@@ -1,7 +1,8 @@
 import React 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 { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
@@ -11,7 +12,7 @@ import UpArrow from './UpArrow';
 const defaultOpacity = 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 {
@@ -31,11 +32,11 @@ export default function Tooltip(props: TooltipProps) {
 
     const [layout, setLayout] = React.useState(initialLayout);
 
-    const scale = Animated.useSharedValue(0);
+    const scale = useSharedValue(0);
 
-    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    const tooltipAnimatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     const [r, g, b] = rgb(theme.palette.primary.main);
 
@@ -53,9 +54,9 @@ export default function Tooltip(props: TooltipProps) {
     };
 
     React.useEffect(() => {
-        const nextValue = visible ? 1 : 0;
+        const nextScaleValue = visible ? 1 : 0;
 
-        scale.value = Animated.withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,6 +1,14 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+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 { useHeight } from '../internal/hooks';
 import useElevationStyle from './useElevationStyle';
@@ -23,7 +31,6 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -37,15 +44,14 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
-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 }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -57,30 +63,47 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [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 translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const overlapped = 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 animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        if (Platform.OS === 'web') {
+            return {
+                transform,
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform,
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform,
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
 
     const onScrollViewChanged = (nextIndex: number) => {
         const prevIndex = indexRef.current;
@@ -100,16 +123,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);
         }
     };
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
             lastTranslateY.value = translateY.value;
         },
@@ -131,15 +152,11 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(0, ANIMATION_CONFIG);
                     }
                 }
 
@@ -170,17 +187,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]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];