forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use scale animation for tabs (#5483)
* fix passing PressableScale oPressIn prop
* use PressableScale for tabs
authored by
Samuel Newman
and committed by
GitHub
498f957a
47301661
+26
-17
+16
-11
src/lib/custom-animations/PressableScale.tsx
+16
-11
src/lib/custom-animations/PressableScale.tsx
···
1
1
import React from 'react'
2
-
import {Pressable, PressableProps} from 'react-native'
2
+
import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
3
3
import Animated, {
4
4
cancelAnimation,
5
5
runOnJS,
···
16
16
export function PressableScale({
17
17
targetScale = DEFAULT_TARGET_SCALE,
18
18
children,
19
+
contentContainerStyle,
20
+
onPressIn,
21
+
onPressOut,
19
22
...rest
20
-
}: {targetScale?: number} & Exclude<
21
-
PressableProps,
22
-
'onPressIn' | 'onPressOut'
23
-
>) {
23
+
}: {
24
+
targetScale?: number
25
+
contentContainerStyle?: StyleProp<ViewStyle>
26
+
} & Exclude<PressableProps, 'onPressIn' | 'onPressOut'>) {
24
27
const scale = useSharedValue(1)
25
28
26
-
const style = useAnimatedStyle(() => ({
29
+
const animatedStyle = useAnimatedStyle(() => ({
27
30
transform: [{scale: scale.value}],
28
31
}))
29
32
···
32
35
accessibilityRole="button"
33
36
onPressIn={e => {
34
37
'worklet'
35
-
if (rest.onPressIn) {
36
-
runOnJS(rest.onPressIn)(e)
38
+
if (onPressIn) {
39
+
runOnJS(onPressIn)(e)
37
40
}
38
41
cancelAnimation(scale)
39
42
scale.value = withTiming(targetScale, {duration: 100})
40
43
}}
41
44
onPressOut={e => {
42
45
'worklet'
43
-
if (rest.onPressOut) {
44
-
runOnJS(rest.onPressOut)(e)
46
+
if (onPressOut) {
47
+
runOnJS(onPressOut)(e)
45
48
}
46
49
cancelAnimation(scale)
47
50
scale.value = withTiming(1, {duration: 100})
48
51
}}
49
52
{...rest}>
50
-
<Animated.View style={style}>{children as React.ReactNode}</Animated.View>
53
+
<Animated.View style={[animatedStyle, contentContainerStyle]}>
54
+
{children as React.ReactNode}
55
+
</Animated.View>
51
56
</Pressable>
52
57
)
53
58
}
+10
-6
src/view/shell/bottom-bar/BottomBar.tsx
+10
-6
src/view/shell/bottom-bar/BottomBar.tsx
···
1
1
import React, {ComponentProps} from 'react'
2
-
import {GestureResponderEvent, TouchableOpacity, View} from 'react-native'
2
+
import {GestureResponderEvent, View} from 'react-native'
3
3
import Animated from 'react-native-reanimated'
4
4
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
5
import {msg, Trans} from '@lingui/macro'
···
8
8
import {StackActions} from '@react-navigation/native'
9
9
10
10
import {useAnalytics} from '#/lib/analytics/analytics'
11
+
import {PressableScale} from '#/lib/custom-animations/PressableScale'
11
12
import {useHaptics} from '#/lib/haptics'
12
13
import {useDedupe} from '#/lib/hooks/useDedupe'
13
14
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
···
29
30
import {UserAvatar} from '#/view/com/util/UserAvatar'
30
31
import {Logo} from '#/view/icons/Logo'
31
32
import {Logotype} from '#/view/icons/Logotype'
33
+
import {atoms as a} from '#/alf'
32
34
import {useDialogControl} from '#/components/Dialog'
33
35
import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
34
36
import {
···
326
328
327
329
interface BtnProps
328
330
extends Pick<
329
-
ComponentProps<typeof TouchableOpacity>,
331
+
ComponentProps<typeof PressableScale>,
330
332
| 'accessible'
331
333
| 'accessibilityRole'
332
334
| 'accessibilityHint'
···
350
352
accessibilityLabel,
351
353
}: BtnProps) {
352
354
return (
353
-
<TouchableOpacity
355
+
<PressableScale
354
356
testID={testID}
355
357
style={styles.ctrl}
356
358
onPress={onLongPress ? onPress : undefined}
···
358
360
onLongPress={onLongPress}
359
361
accessible={accessible}
360
362
accessibilityLabel={accessibilityLabel}
361
-
accessibilityHint={accessibilityHint}>
363
+
accessibilityHint={accessibilityHint}
364
+
targetScale={0.8}
365
+
contentContainerStyle={[a.flex_1]}>
362
366
{icon}
363
367
{notificationCount ? (
364
-
<View style={[styles.notificationCount]}>
368
+
<View style={[styles.notificationCount, {top: -5}]}>
365
369
<Text style={styles.notificationCountLabel}>{notificationCount}</Text>
366
370
</View>
367
371
) : undefined}
368
-
</TouchableOpacity>
372
+
</PressableScale>
369
373
)
370
374
}