diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index 16242fce7fca..9c398d7a1990 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import {InteractionManager} from 'react-native'; import Animated, {interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import useTheme from '@hooks/useTheme'; @@ -38,13 +38,16 @@ function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, dis const offsetX = useSharedValue(isOn ? OFFSET_X.ON : OFFSET_X.OFF); const theme = useTheme(); + useEffect(() => { + offsetX.set(withTiming(isOn ? OFFSET_X.ON : OFFSET_X.OFF, {duration: 300})); + }, [isOn, offsetX]); + const handleSwitchPress = () => { InteractionManager.runAfterInteractions(() => { if (disabled) { disabledAction?.(); return; } - offsetX.set(withTiming(isOn ? OFFSET_X.OFF : OFFSET_X.ON, {duration: 300})); onToggle(!isOn); }); }; diff --git a/src/styles/utils/generators/TooltipStyleUtils/index.ts b/src/styles/utils/generators/TooltipStyleUtils/index.ts index 950ba241570b..dbaf0a7fe5a6 100644 --- a/src/styles/utils/generators/TooltipStyleUtils/index.ts +++ b/src/styles/utils/generators/TooltipStyleUtils/index.ts @@ -265,6 +265,8 @@ const createTooltipStyleUtils: StyleUtilGenerator = ( /** Utility function to create and manage scale animations with React Native Reanimated */ getTooltipAnimatedStyles: (props: TooltipAnimationProps) => { + 'worklet'; + const tooltipHorizontalPadding = spacing.ph2.paddingHorizontal * 2; const tooltipWidth = props.tooltipContentWidth && props.tooltipContentWidth + tooltipHorizontalPadding + 1; const isTooltipSizeReady = tooltipWidth !== undefined && props.tooltipWrapperHeight !== undefined;