Notification Bell

1import React, { useEffect, useRef } from "react"
2import { Pressable, Text, View } from "react-native"
3import Animated, {
4  FadeInDown,
5  FadeOutUp,
6  ReduceMotion,
7  useAnimatedStyle,
8  useFrameCallback,
9  useReducedMotion,
10  useSharedValue,
11  withSpring,
12} from "react-native-reanimated"
13import Svg, { Path } from "react-native-svg"
14export interface NotificationBellProps {
15  count?: number
16  defaultCount?: number
17  max?: number
18  variant?: "count" | "dot"
19  size?: number
20  color?: "red" | "orange" | "green" | "blue" | "violet"
21  backgroundColor?: string
22  iconColor?: string
23  onPress?: () => void
24  testID?: string
25}
26const colors = {
27  red: "#FF453A",
28  orange: "#FF9F0A",
29  green: "#30D158",
30  blue: "#0A84FF",
31  violet: "#BF5AF2",
32}
33function springStep(position: number, velocity: number, target: number, stiffness: number, damping: number, dt: number) {
34  "worklet"
35  const decay = damping / 2
36  const frequency = Math.sqrt(stiffness - decay * decay)
37  const displacement = position - target
38  const envelope = Math.exp(-decay * dt)
39  const cosine = Math.cos(frequency * dt)
40  const sine = Math.sin(frequency * dt)
41  return [
42    target + envelope * (displacement * cosine + (velocity + decay * displacement) / frequency * sine),
43    envelope * (velocity * cosine - (decay * velocity + stiffness * displacement) / frequency * sine),
44  ]
45}
46export function NotificationBell({
47  count,
48  defaultCount = 0,
49  max = 99,
50  variant = "count",
51  size = 48,
52  color = "red",
53  backgroundColor = "#262626",
54  iconColor = "#9b9aa7",
55  onPress,
56  testID,
57}: NotificationBellProps) {
58  const unread = Math.max(0, Math.floor(count ?? defaultCount)),
59    previous = useRef(unread),
60    reduced = useReducedMotion()
61  const bell = useSharedValue(0),
62    bellVelocity = useSharedValue(0),
63    clapper = useSharedValue(0),
64    clapperVelocity = useSharedValue(0),
65    scale = useSharedValue(unread > 0 ? 1 : 0)
66  useFrameCallback(({ timeSincePreviousFrame }) => {
67    if (reduced || timeSincePreviousFrame == null) return
68    if (Math.abs(bellVelocity.get()) + Math.abs(bell.get()) + Math.abs(clapperVelocity.get()) + Math.abs(clapper.get()) < 0.01) return
69    const dt = Math.min(timeSincePreviousFrame, 64) / 1000
70    const [angle, velocity] = springStep(bell.get(), bellVelocity.get(), 0, 220, 10, dt)
71    bell.set(angle)
72    bellVelocity.set(velocity)
73    const target = Math.max(-13, Math.min(13, -velocity / 450 * 13))
74    const [lag, lagVelocity] = springStep(clapper.get(), clapperVelocity.get(), target, 300, 14, dt)
75    clapper.set(lag)
76    clapperVelocity.set(lagVelocity)
77  })
78  useEffect(() => {
79    const delta = unread - previous.current
80    previous.current = unread
81    if (delta > 0 && !reduced) {
82      const impulse = 500 * (0.7 + (0.6 * Math.min(delta, 5)) / 5)
83      const moving = bellVelocity.get()
84      bellVelocity.set(Math.max(-900, Math.min(900, moving + (moving > 1 ? 1 : -1) * impulse)))
85    }
86    scale.value = reduced
87      ? Number(unread > 0)
88      : withSpring(Number(unread > 0), { damping: 20, stiffness: 600 })
89  }, [unread, reduced, bellVelocity, scale])
90  const swing = useAnimatedStyle(() => ({
91    transformOrigin: "50% 12%",
92    transform: [{ rotate: `${Math.max(-35, Math.min(35, bell.value))}deg` }],
93  }))
94  const inertial = useAnimatedStyle(() => ({
95    transformOrigin: "50% 83.33%",
96    transform: [{ rotate: `${Math.max(-13, Math.min(13, clapper.value))}deg` }],
97  }))
98  const badge = useAnimatedStyle(() => ({
99    transform: [{ scale: scale.value }],
100  }))
101  const badgeSize = size * (variant === "dot" ? 0.22 : 0.38),
102    label = unread > max ? `${max}+` : String(unread)
103  return (
104    <Pressable
105      testID={testID}
106      accessibilityRole="button"
107      accessibilityLabel={`Notifications, ${unread} unread`}
108      onPress={onPress}
109      style={({ pressed }) => ({
110        width: size,
111        height: size,
112        borderRadius: size / 2,
113        backgroundColor,
114        alignItems: "center",
115        justifyContent: "center",
116        transform: [{ scale: pressed && !reduced ? 0.9 : 1 }],
117      })}
118    >
119      <Animated.View
120        style={[{ width: size * 0.56, height: size * 0.56 }, swing]}
121      >
122        <Svg width="100%" height="100%" viewBox="0 0 18 18">
123          <Path
124            d="M3.5 6.5C3.5 3.46279 5.96279 1 9 1C12.0372 1 14.5 3.46279 14.5 6.5V10.75C14.5 11.4408 15.0592 12 15.75 12C16.1642 12 16.5 12.3358 16.5 12.75C16.5 13.1642 16.1642 13.5 15.75 13.5H2.25C1.83579 13.5 1.5 13.1642 1.5 12.75C1.5 12.3358 1.83579 12 2.25 12C2.94079 12 3.5 11.4408 3.5 10.75V6.5Z"
125            fill={iconColor}
126            fillOpacity={0.55}
127          />
128        </Svg>
129        <Animated.View
130          style={[
131            { position: "absolute", width: "100%", height: "100%" },
132            inertial,
133          ]}
134        >
135          <Svg width="100%" height="100%" viewBox="0 0 18 18">
136            <Path d="M10.2 15H7.80099C7.64999 15 7.50799 15.068 7.41299 15.185C7.31799 15.302 7.28099 15.456 7.31199 15.603C7.48499 16.425 8.17999 17 9.00099 17C9.82199 17 10.517 16.425 10.69 15.603C10.721 15.456 10.684 15.302 10.589 15.185C10.494 15.068 10.351 15 10.2 15Z" fill={iconColor} />
137          </Svg>
138        </Animated.View>
139      </Animated.View>
140      <Animated.View
141        pointerEvents="none"
142        style={[
143          {
144            position: "absolute",
145            right: size / 2 - (0.9 * size * Math.SQRT1_2) / 2 - badgeSize / 2,
146            top: size / 2 - (0.9 * size * Math.SQRT1_2) / 2 - badgeSize / 2,
147            minWidth: badgeSize,
148            height: badgeSize,
149            paddingHorizontal: variant === "dot" ? 0 : size * 0.09,
150            borderRadius: badgeSize / 2,
151            backgroundColor: colors[color],
152            alignItems: "center",
153            justifyContent: "center",
154            overflow: "hidden",
155          },
156          badge,
157        ]}
158      >
159        {variant === "count" && (
160          <Animated.Text
161            key={label}
162            entering={FadeInDown.duration(180).reduceMotion(
163              ReduceMotion.System
164            )}
165            exiting={FadeOutUp.duration(180).reduceMotion(ReduceMotion.System)}
166            style={{
167              color: "#fff",
168              fontSize: size * 0.21,
169              fontWeight: "600",
170              fontVariant: ["tabular-nums"],
171            }}
172          >
173            {label}
174          </Animated.Text>
175        )}
176      </Animated.View>
177    </Pressable>
178  )
179}
180export default NotificationBell