From 498f957a1d9c702c3d2d6cfc5c175b0659ec99c0 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 25 Sep 2024 18:28:10 +0100
Subject: Use scale animation for tabs (#5483)

* fix passing PressableScale oPressIn prop

* use PressableScale for tabs
---
 src/lib/custom-animations/PressableScale.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'src/lib/custom-animations')

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>
   )
 }
-- 
cgit 1.4.1