Fluid Tabs

1import React, { useEffect, useId, useState, type ReactNode } from "react"
2import {
3  Platform,
4  Pressable,
5  Text,
6  View,
7  useColorScheme,
8  useWindowDimensions,
9  type StyleProp,
10  type ViewStyle,
11} from "react-native"
12import Animated, {
13  Easing,
14  useAnimatedProps,
15  useAnimatedStyle,
16  useSharedValue,
17  withSequence,
18  withSpring,
19  withTiming,
20} from "react-native-reanimated"
21import Svg, {
22  Defs,
23  Filter,
24  FeGaussianBlur,
25  G,
26  Path,
27  Text as SvgText,
28} from "react-native-svg"
29import { LinearGradient } from "expo-linear-gradient"
30export interface FluidTabItem {
31  id: string
32  label: string
33  icon: ReactNode
34}
35export interface FluidTabsProps {
36  tabs?: FluidTabItem[]
37  defaultActive?: string
38  onChange?: (id: string) => void
39  theme?: "light" | "dark" | "system"
40  compact?: boolean
41  radius?: number
42  colors?: Partial<{
43    surface: string
44    border: string
45    active: string
46    inactive: string
47    hover: string
48    pillTop: string
49    pillBottom: string
50    pillBorder: string
51  }>
52  fontFamily?: string
53  style?: StyleProp<ViewStyle>
54  testID?: string
55}
56const ORIGINAL_ICONS = {
57  deposits: {
58    viewBox: "0 0 576 512",
59    paths: [
60      "M567.938 243.908L462.25 85.374A48.003 48.003 0 0 0 422.311 64H153.689a48 48 0 0 0-39.938 21.374L8.062 243.908A47.994 47.994 0 0 0 0 270.533V400c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V270.533a47.994 47.994 0 0 0-8.062-26.625zM162.252 128h251.497l85.333 128H376l-32 64H232l-32-64H76.918l85.334-128z",
61    ],
62  },
63  funds: {
64    viewBox: "0 0 24 24",
65    paths: [
66      "M13 2.051V11h8.949c-.47-4.717-4.232-8.479-8.949-8.949zm4.969 17.953c2.189-1.637 3.694-4.14 3.98-7.004h-8.183l4.203 7.004z",
67      "M11 12V2.051C5.954 2.555 2 6.824 2 12c0 5.514 4.486 10 10 10a9.93 9.93 0 0 0 4.255-.964s-5.253-8.915-5.254-9.031A.02.02 0 0 0 11 12z",
68    ],
69  },
70  accounts: {
71    viewBox: "0 0 512 512",
72    paths: [
73      "M501.62 92.11L267.24 2.04a31.958 31.958 0 0 0-22.47 0L10.38 92.11A16.001 16.001 0 0 0 0 107.09V144c0 8.84 7.16 16 16 16h480c8.84 0 16-7.16 16-16v-36.91c0-6.67-4.14-12.64-10.38-14.98zM64 192v160H48c-8.84 0-16 7.16-16 16v48h448v-48c0-8.84-7.16-16-16-16h-16V192h-64v160h-96V192h-64v160h-96V192H64zm432 256H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h480c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z",
74    ],
75  },
76}
77function DefaultIcon({ kind }: { kind: keyof typeof ORIGINAL_ICONS }) {
78  const icon = ORIGINAL_ICONS[kind]
79  return (
80    <Svg width={22} height={22} viewBox={icon.viewBox}>
81      {icon.paths.map((d, index) => (
82        <Path key={index} d={d} fill="currentColor" />
83      ))}
84    </Svg>
85  )
86}
87const DEFAULT_TABS: FluidTabItem[] = [
88  { id: "accounts", label: "Accounts", icon: <DefaultIcon kind="accounts" /> },
89  { id: "deposits", label: "Deposits", icon: <DefaultIcon kind="deposits" /> },
90  { id: "funds", label: "Funds", icon: <DefaultIcon kind="funds" /> },
91]
92class BlurTarget extends FeGaussianBlur {
93  setNativeProps = (
94    props: React.ComponentProps<typeof FeGaussianBlur> & {
95      style?: React.ComponentProps<typeof FeGaussianBlur>
96    }
97  ) => {
98    if (Platform.OS === "web") {
99      const node = (
100        this as unknown as {
101          elementRef?: {
102            current: {
103              setAttribute: (key: string, value: string) => void
104            } | null
105          }
106        }
107      ).elementRef?.current
108      const amount = props.style?.stdDeviation ?? props.stdDeviation
109      if (amount !== undefined)
110        node?.setAttribute("stdDeviation", String(amount))
111    } else this.root?.setNativeProps(props)
112  }
113}
114const AnimatedBlur = Animated.createAnimatedComponent(BlurTarget)
115const AnimatedG = Animated.createAnimatedComponent(G)
116function Content({
117  tab,
118  active,
119  width,
120  height,
121  gap,
122  fontSize,
123  fontFamily,
124  activeColor,
125  inactiveColor,
126  hoverColor,
127  hovered,
128}: {
129  tab: FluidTabItem
130  active: boolean
131  width: number
132  height: number
133  gap: number
134  fontSize: number
135  fontFamily?: string
136  activeColor: string
137  inactiveColor: string
138  hoverColor: string
139  hovered: boolean
140}) {
141  const id = useId().replace(/\W/g, "")
142  const blur = useSharedValue(0),
143    scale = useSharedValue(active ? 1.03 : 1),
144    color = useSharedValue(active ? activeColor : inactiveColor)
145  useEffect(() => {
146    color.set(
147      withTiming(active ? activeColor : hovered ? hoverColor : inactiveColor, {
148        duration: 200,
149        easing: Easing.bezier(0.4, 0, 0.2, 1),
150      })
151    )
152  }, [active, hovered, activeColor, inactiveColor, hoverColor])
153  useEffect(() => {
154    scale.set(
155      withSpring(active ? 1.03 : 1, { stiffness: 300, damping: 15, mass: 1 })
156    )
157    const transition = { duration: 150, easing: Easing.bezier(0, 0, 0.58, 1) }
158    blur.set(
159      active
160        ? withSequence(withTiming(4, transition), withTiming(0, transition))
161        : withTiming(0, { duration: 300, easing: transition.easing })
162    )
163  }, [active])
164  const filter = useAnimatedProps(() => ({
165    stdDeviation: Math.max(0, blur.get()),
166  }))
167  const icon = useAnimatedProps(() => ({
168    transform: `translate(11 11) scale(${scale.get()}) translate(-11 -11)`,
169  }))
170  const group = useAnimatedProps(() => ({
171    fill: color.get(),
172    color: color.get(),
173  }))
174  return (
175    <Svg width={width} height={height} style={{ overflow: "visible" }}>
176      <Defs>
177        <Filter id={id} x="-30%" y="-60%" width="160%" height="220%">
178          <AnimatedBlur animatedProps={filter} />
179        </Filter>
180      </Defs>
181      <AnimatedG filter={`url(#${id})`} animatedProps={group}>
182        <AnimatedG x={0} y={(height - 22) / 2} animatedProps={icon}>
183          {tab.icon}
184        </AnimatedG>
185        <SvgText
186          x={22 + gap}
187          y={height / 2 + fontSize * 0.35}
188          fontSize={fontSize}
189          fontFamily={fontFamily}
190          fontWeight={active ? "700" : "600"}
191          letterSpacing={-fontSize * 0.025}
192        >
193          {tab.label}
194        </SvgText>
195      </AnimatedG>
196    </Svg>
197  )
198}
199export function FluidTabs({
200  tabs = DEFAULT_TABS,
201  defaultActive = tabs[0]?.id,
202  onChange,
203  theme = "system",
204  compact,
205  radius = 999,
206  colors: overrides,
207  fontFamily = Platform.OS === "web" ? "Arial" : undefined,
208  style,
209  testID,
210}: FluidTabsProps) {
211  const [active, setActive] = useState(defaultActive),
212    [measurements, setMeasurements] = useState<
213      Record<string, { x: number; width: number; height: number }>
214    >({}),
215    [labels, setLabels] = useState<Record<string, number>>({}),
216    [hovered, setHovered] = useState<string | null>(null)
217  const scheme = useColorScheme(),
218    window = useWindowDimensions(),
219    small = compact ?? window.width < 640,
220    dark = theme === "dark" || (theme === "system" && scheme === "dark")
221  const colors = {
222    surface: dark ? "#171717" : "#f5f1eb",
223    border: dark ? "#262626" : "#f5f1ebf4",
224    active: dark ? "#fff" : "#292926",
225    inactive: dark ? "#737373" : "#585652",
226    hover: dark ? "#d4d4d4" : "#585652",
227    pillTop: dark ? "#404040" : "#fefefe",
228    pillBottom: dark ? "rgba(38,38,38,.9)" : "rgba(249,250,251,.8)",
229    pillBorder: dark ? "rgba(82,82,82,.5)" : "rgba(254,254,254,.9)",
230    ...overrides,
231  }
232  const pillX = useSharedValue(0),
233    pillWidth = useSharedValue(0),
234    pillHeight = useSharedValue(0),
235    visible = useSharedValue(0)
236  useEffect(() => {
237    const m = measurements[active]
238    if (!m) return
239    const spring = { stiffness: 280, damping: 25, mass: 0.8 }
240    if (!visible.get()) {
241      pillX.set(m.x)
242      pillWidth.set(m.width)
243      pillHeight.set(m.height)
244      visible.set(1)
245    } else {
246      pillX.set(withSpring(m.x, spring))
247      pillWidth.set(withSpring(m.width, spring))
248      pillHeight.set(withSpring(m.height, spring))
249    }
250  }, [active, measurements])
251  const pill = useAnimatedStyle(() => ({
252    opacity: visible.get(),
253    width: pillWidth.get(),
254    height: pillHeight.get(),
255    transform: [{ translateX: pillX.get() }],
256  }))
257  const fontSize = small ? 14 : 16,
258    innerGap = small ? 6 : 12,
259    padding = small ? 12 : 16,
260    height = small ? 42 : 50
261  return (
262    <View
263      testID={testID}
264      style={[
265        {
266          alignSelf: "center",
267          flexDirection: "row",
268          gap: small ? 4 : 8,
269          borderRadius: radius,
270          borderWidth: 1.6,
271          borderColor: colors.border,
272          backgroundColor: colors.surface,
273          padding: 4,
274        },
275        style,
276      ]}
277    >
278      <Animated.View
279        pointerEvents="none"
280        style={[
281          {
282            position: "absolute",
283            top: 4,
284            left: 0,
285            borderRadius: radius,
286            borderWidth: 1,
287            borderColor: colors.pillBorder,
288            overflow: "hidden",
289            boxShadow: "0px 1px 2px rgba(0,0,0,.05)",
290          },
291          pill,
292        ]}
293      >
294        <LinearGradient
295          colors={[colors.pillTop, colors.pillBottom]}
296          style={{ flex: 1 }}
297        />
298      </Animated.View>
299      {tabs.map((tab) => {
300        const labelWidth = labels[tab.id] ?? tab.label.length * fontSize * 0.58,
301          contentWidth = 22 + innerGap + labelWidth
302        return (
303          <Pressable
304            key={tab.id}
305            accessibilityRole="tab"
306            accessibilityLabel={tab.label}
307            accessibilityState={{ selected: active === tab.id }}
308            onPress={() => {
309              setActive(tab.id)
310              onChange?.(tab.id)
311            }}
312            onHoverIn={() => setHovered(tab.id)}
313            onHoverOut={() => setHovered(null)}
314            onPressIn={() => setHovered(tab.id)}
315            onPressOut={() => setHovered(null)}
316            onLayout={(e) => {
317              const { x, width, height } = e.nativeEvent.layout
318              setMeasurements((old) =>
319                old[tab.id]?.x === x &&
320                old[tab.id]?.width === width &&
321                old[tab.id]?.height === height
322                  ? old
323                  : { ...old, [tab.id]: { x, width, height } }
324              )
325            }}
326            style={{
327              height,
328              paddingHorizontal: padding,
329              justifyContent: "center",
330              borderRadius: radius,
331            }}
332          >
333            <Content
334              tab={tab}
335              active={tab.id === active}
336              width={contentWidth}
337              height={height}
338              gap={innerGap}
339              fontSize={fontSize}
340              fontFamily={fontFamily}
341              activeColor={colors.active}
342              inactiveColor={colors.inactive}
343              hoverColor={colors.hover}
344              hovered={hovered === tab.id}
345            />
346            <View
347              pointerEvents="none"
348              style={{ position: "absolute", opacity: 0 }}
349            >
350              <Text
351                onLayout={(e) => {
352                  const width = e.nativeEvent.layout.width
353                  setLabels((old) =>
354                    old[tab.id] === width ? old : { ...old, [tab.id]: width }
355                  )
356                }}
357                style={{
358                  fontFamily,
359                  fontSize,
360                  fontWeight: active === tab.id ? "700" : "600",
361                  letterSpacing: -fontSize * 0.025,
362                }}
363              >
364                {tab.label}
365              </Text>
366            </View>
367          </Pressable>
368        )
369      })}
370    </View>
371  )
372}
373export default FluidTabs