Use scale animation for tabs (#5483)

* fix passing PressableScale oPressIn prop

* use PressableScale for tabs

1 files changed, 16 insertions, 11 deletions

diff --git a/src/lib/custom-animations/PressableScale.tsx b/src/lib/custom-animations/PressableScale.tsx
index 68315a978..d6eabf8b2 100644
--- a/src/lib/custom-animations/PressableScale.tsx
+++ b/src/lib/custom-animations/PressableScale.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, PressableProps} from 'react-native'
+import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
 import Animated, {
   cancelAnimation,
   runOnJS,
@@ -16,14 +16,17 @@ const DEFAULT_TARGET_SCALE = isNative || isTouchDevice ? 0.98 : 1
 export function PressableScale({
   targetScale = DEFAULT_TARGET_SCALE,
   children,
+  contentContainerStyle,
+  onPressIn,
+  onPressOut,
   ...rest
-}: {targetScale?: number} & Exclude<
-  PressableProps,
-  'onPressIn' | 'onPressOut'
->) {
+}: {
+  targetScale?: number
+  contentContainerStyle?: StyleProp<ViewStyle>
+} & Exclude<PressableProps, 'onPressIn' | 'onPressOut'>) {
   const scale = useSharedValue(1)
 
-  const style = useAnimatedStyle(() => ({
+  const animatedStyle = useAnimatedStyle(() => ({
     transform: [{scale: scale.value}],
   }))
 
@@ -32,22 +35,24 @@ export function PressableScale({
       accessibilityRole="button"
       onPressIn={e => {
         'worklet'
-        if (rest.onPressIn) {
-          runOnJS(rest.onPressIn)(e)
+        if (onPressIn) {
+          runOnJS(onPressIn)(e)
         }
         cancelAnimation(scale)
         scale.value = withTiming(targetScale, {duration: 100})
       }}
       onPressOut={e => {
         'worklet'
-        if (rest.onPressOut) {
-          runOnJS(rest.onPressOut)(e)
+        if (onPressOut) {
+          runOnJS(onPressOut)(e)
         }
         cancelAnimation(scale)
         scale.value = withTiming(1, {duration: 100})
       }}
       {...rest}>
-      <Animated.View style={style}>{children as React.ReactNode}</Animated.View>
+      <Animated.View style={[animatedStyle, contentContainerStyle]}>
+        {children as React.ReactNode}
+      </Animated.View>
     </Pressable>
   )
 }