Use scale animation for tabs (#5483)

* fix passing PressableScale oPressIn prop * use PressableScale for tabs
bluesky-social · Sep 25, 2024 · 498f957 · 498f957
1 parent 4730166
commit 498f957
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git 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>
   )
 }
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -1,5 +1,5 @@
 import React, {ComponentProps} from 'react'
-import {GestureResponderEvent, TouchableOpacity, View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
@@ -8,6 +8,7 @@ import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
 import {StackActions} from '@react-navigation/native'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
+import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
 import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
@@ -29,6 +30,7 @@ import {Text} from '#/view/com/util/text/Text'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
+import {atoms as a} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
 import {
@@ -326,7 +328,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
 
 interface BtnProps
   extends Pick<
-    ComponentProps<typeof TouchableOpacity>,
+    ComponentProps<typeof PressableScale>,
     | 'accessible'
     | 'accessibilityRole'
     | 'accessibilityHint'
@@ -350,21 +352,23 @@ function Btn({
   accessibilityLabel,
 }: BtnProps) {
   return (
-    <TouchableOpacity
+    <PressableScale
       testID={testID}
       style={styles.ctrl}
       onPress={onLongPress ? onPress : undefined}
       onPressIn={onLongPress ? undefined : onPress}
       onLongPress={onLongPress}
       accessible={accessible}
       accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}>
+      accessibilityHint={accessibilityHint}
+      targetScale={0.8}
+      contentContainerStyle={[a.flex_1]}>
       {icon}
       {notificationCount ? (
-        <View style={[styles.notificationCount]}>
+        <View style={[styles.notificationCount, {top: -5}]}>
           <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
         </View>
       ) : undefined}
-    </TouchableOpacity>
+    </PressableScale>
   )
 }