Morphing Discovery Bar

1import React, { useEffect, useId, useRef, useState } from "react"
2import {
3  Platform,
4  Pressable,
5  Text,
6  TextInput,
7  View,
8  useColorScheme,
9  useWindowDimensions,
10  type StyleProp,
11  type ViewStyle,
12} from "react-native"
13import Animated, {
14  Easing,
15  useAnimatedProps,
16  useAnimatedStyle,
17  useSharedValue,
18  withSpring,
19  withTiming,
20} from "react-native-reanimated"
21import Svg, {
22  Defs,
23  Filter,
24  FeGaussianBlur,
25  G,
26  Path,
27  Rect,
28  Text as SvgText,
29} from "react-native-svg"
30import { BlurView } from "expo-blur"
31export interface Category {
32  id: string
33  label: string
34  icon: React.ReactNode | ((color: string) => React.ReactNode)
35  activeColor: string
36  activeTextColor: string
37}
38export interface MorphingDiscoveryBarProps {
39  categories: Category[]
40  onCategoryChange?: (id: string) => void
41  onSearchChange?: (value: string) => void
42  onSearchSubmit?: (value: string) => void
43  defaultCategory?: string
44  searchPlaceholder?: string
45  compact?: boolean
46  searchWidth?: number
47  iconSize?: number
48  fontFamily?: string
49  theme?: "light" | "dark" | "system"
50  radius?: number
51  backdropIntensity?: number
52  colors?: Partial<{
53    surface: string
54    border: string
55    text: string
56    inactive: string
57    placeholder: string
58    darkPill: string
59  }>
60  style?: StyleProp<ViewStyle>
61  testID?: string
62}
63function discoverySpring(p: number) {
64  "worklet"
65  const a = Math.sqrt(1 - 0.7 * 0.7),
66    omega = Math.log(0.7 / a / 0.001) / (0.7 * 0.7),
67    t = 0.7 * p
68  return p >= 1
69    ? 1
70    : 1 -
71        Math.exp(-omega * 0.7 * t) *
72          (Math.cos(omega * a * t) + (0.7 / a) * Math.sin(omega * a * t))
73}
74const MORPH = { duration: 700, easing: discoverySpring }
75const INPUT = { duration: 150, easing: Easing.bezier(0.25, 0.1, 0.35, 1) }
76class BlurTarget extends FeGaussianBlur {
77  setNativeProps = (
78    props: React.ComponentProps<typeof FeGaussianBlur> & {
79      style?: React.ComponentProps<typeof FeGaussianBlur>
80    }
81  ) => {
82    if (Platform.OS === "web") {
83      const node = (
84        this as unknown as {
85          elementRef?: {
86            current: {
87              setAttribute: (key: string, value: string) => void
88            } | null
89          }
90        }
91      ).elementRef?.current
92      const amount = props.style?.stdDeviation ?? props.stdDeviation
93      if (amount !== undefined)
94        node?.setAttribute("stdDeviation", String(amount))
95    } else this.root?.setNativeProps(props)
96  }
97}
98const AB = Animated.createAnimatedComponent(BlurTarget),
99  AG = Animated.createAnimatedComponent(G),
100  AR = Animated.createAnimatedComponent(Rect),
101  AT = Animated.createAnimatedComponent(SvgText)
102const AnimatedInput = Animated.createAnimatedComponent(TextInput)
103export function MorphingDiscoveryBar({
104  categories,
105  onCategoryChange,
106  onSearchChange,
107  onSearchSubmit,
108  defaultCategory,
109  searchPlaceholder = "Search",
110  compact,
111  searchWidth,
112  iconSize = 18,
113  fontFamily = Platform.OS === "web" ? "Arial" : undefined,
114  theme = "system",
115  radius = 32,
116  backdropIntensity = 12,
117  colors: overrides,
118  style,
119  testID,
120}: MorphingDiscoveryBarProps) {
121  const [searching, setSearching] = useState(false),
122    [selected, setSelected] = useState(defaultCategory ?? categories[0]?.id),
123    [value, setValue] = useState(""),
124    [closingValue, setClosingValue] = useState("")
125  const [labelWidths, setLabelWidths] = useState<Record<string, number>>({})
126  const input = useRef<TextInput>(null)
127  const window = useWindowDimensions(),
128    scheme = useColorScheme(),
129    small = compact ?? window.width < 640,
130    dark = theme === "dark" || (theme === "system" && scheme === "dark")
131  const colors = {
132    surface: dark ? "#171717" : "#fff",
133    border: dark ? "#262626" : "#f5f5f5",
134    text: dark ? "#fff" : "#171717",
135    inactive: dark ? "#a3a3a3" : "#525252",
136    placeholder: dark ? "#525252" : "#a3a3a3",
137    darkPill: "#262626",
138    ...overrides,
139  }
140  const size = small ? 48 : 56,
141    gap = small ? 6 : 12,
142    padding = small ? 6 : 8,
143    labelSize = small ? 12 : 18,
144    tabPadding = small ? 12 : 24,
145    tabGap = small ? 6 : 8,
146    iconPadding = small ? 12 : 16
147  const tabHeight = Math.max(iconSize, small ? 16 : 28) + (small ? 16 : 24),
148    categoryHeight = tabHeight + 10
149  let cursor = 5
150  const tabs = categories.map((category) => {
151    const width =
152      tabPadding * 2 +
153      iconSize +
154      tabGap +
155      (labelWidths[`${labelSize}-${category.id}`] ??
156        category.label.length * labelSize * 0.55)
157    const tab = { ...category, x: cursor, width }
158    cursor += width + 4
159    return tab
160  })
161  const categoryWidth = Math.max(10, cursor + 1)
162  const maximum = window.width - (small ? 16 : 32)
163  const visibleCategoryWidth = Math.max(
164    0,
165    Math.min(categoryWidth, maximum - padding * 2 - size - gap)
166  )
167  const targetSearchWidth =
168    searchWidth ??
169    (small ? (window.width >= 480 ? 256 : window.width - 80) : 320)
170  const rootWidth = useSharedValue(
171      Math.min(maximum, padding * 2 + size + gap + visibleCategoryWidth)
172    ),
173    searchSize = useSharedValue(size),
174    iconX = useSharedValue((size - 18) / 2),
175    categoryP = useSharedValue(0),
176    closeP = useSharedValue(0),
177    inputP = useSharedValue(0),
178    scrollX = useSharedValue(0),
179    closingScrollX = useSharedValue(0),
180    pressP = useSharedValue(1)
181  const pillX = useSharedValue(tabs.find((tab) => tab.id === selected)?.x ?? 5),
182    pillWidth = useSharedValue(
183      tabs.find((tab) => tab.id === selected)?.width ?? 0
184    ),
185    pillColor = useSharedValue(
186      dark
187        ? colors.darkPill
188        : (tabs.find((tab) => tab.id === selected)?.activeColor ??
189            "transparent")
190    )
191  const categoryFilter = useId().replace(/\W/g, ""),
192    closeFilter = useId().replace(/\W/g, ""),
193    inputFilter = useId().replace(/\W/g, "")
194  useEffect(() => {
195    rootWidth.set(
196      withTiming(
197        Math.min(
198          maximum,
199          padding * 2 +
200            (searching
201              ? targetSearchWidth + gap + 56
202              : size + gap + visibleCategoryWidth)
203        ),
204        MORPH
205      )
206    )
207    searchSize.set(withTiming(searching ? targetSearchWidth : size, MORPH))
208    iconX.set(withTiming(searching ? iconPadding : (size - 18) / 2, MORPH))
209    categoryP.set(withTiming(searching ? 0 : 1, MORPH))
210    closeP.set(withTiming(searching ? 1 : 0, MORPH))
211    inputP.set(withTiming(searching ? 1 : 0, INPUT))
212    if (searching) {
213      const timer = setTimeout(() => input.current?.focus(), 100)
214      return () => clearTimeout(timer)
215    }
216  }, [searching, targetSearchWidth, size, gap, visibleCategoryWidth, maximum])
217  useEffect(() => {
218    const tab = tabs.find((item) => item.id === selected)
219    if (tab) {
220      pillX.set(withTiming(tab.x, MORPH))
221      pillWidth.set(withTiming(tab.width, MORPH))
222      pillColor.set(
223        withTiming(dark ? colors.darkPill : tab.activeColor, { duration: 150 })
224      )
225    }
226  }, [selected, labelWidths, dark, labelSize])
227  const root = useAnimatedStyle(() => ({ width: rootWidth.get() }))
228  const search = useAnimatedStyle(() => ({ width: searchSize.get() }))
229  const searchIcon = useAnimatedStyle(() => ({ left: iconX.get() }))
230  const inputBox = useAnimatedStyle(() => ({
231    width: Math.max(0, searchSize.get() - 2 * iconPadding - 26),
232  }))
233  const inputMotion = useAnimatedProps(() => ({
234    opacity: searching && inputP.get() === 1 ? 0 : inputP.get(),
235    transform: `translate(0 20) scale(${0.6 + 0.4 * inputP.get()} ${0.8 + 0.2 * inputP.get()}) translate(0 -20)`,
236  }))
237  const nativeInputMotion = useAnimatedStyle(() => ({
238    opacity: searching && inputP.get() === 1 ? 1 : 0,
239  }))
240  const mirrorPosition = useAnimatedProps(() => ({
241    x: -(searching ? scrollX.get() : closingScrollX.get()),
242  }))
243  const inputBlur = useAnimatedProps(() => ({
244    stdDeviation: 4 * (1 - inputP.get()),
245  }))
246  const categoryBox = useAnimatedStyle(() => ({
247    left: padding + searchSize.get() + gap,
248    opacity: Math.max(0, Math.min(1, categoryP.get())),
249  }))
250  const categoryMotion = useAnimatedProps(() => ({
251    transform: `translate(${visibleCategoryWidth / 2} ${categoryHeight / 2}) scale(${0.9 + 0.1 * categoryP.get()}) translate(${-visibleCategoryWidth / 2} ${-categoryHeight / 2})`,
252  }))
253  const categoryBlur = useAnimatedProps(() => ({
254    stdDeviation: 10 * Math.max(0, 1 - categoryP.get()),
255  }))
256  const pill = useAnimatedProps(() => ({
257    x: pillX.get(),
258    width: Math.max(0, pillWidth.get()),
259    fill: pillColor.get(),
260  }))
261  const closeBox = useAnimatedStyle(() => ({
262    left: padding + searchSize.get() + gap,
263    width: 120 - 64 * closeP.get(),
264    opacity: Math.max(0, Math.min(1, closeP.get())),
265    transformOrigin: [0, "50%", 0],
266    transform: [
267      { translateX: -80 * (1 - closeP.get()) },
268      { scaleX: (1.5 - 0.5 * closeP.get()) * pressP.get() },
269      { scaleY: (0.8 + 0.2 * closeP.get()) * pressP.get() },
270    ],
271  }))
272  const closeBlur = useAnimatedProps(() => ({
273    stdDeviation: 8 * Math.max(0, 1 - closeP.get()),
274  }))
275  const closeRect = useAnimatedProps(() => ({
276    width: Math.max(0, 120 - 64 * closeP.get() - 1),
277  }))
278  const closeIcon = useAnimatedProps(() => ({
279    transform: `translate(${(120 - 64 * closeP.get() - 18) / 2} ${(size - 18) / 2})`,
280  }))
281  function close() {
282    setClosingValue(value)
283    closingScrollX.set(scrollX.get())
284    input.current?.blur()
285    setSearching(false)
286    setValue("")
287    onSearchChange?.("")
288  }
289  function change(text: string) {
290    setValue(text)
291    onSearchChange?.(text)
292  }
293  return (
294    <Animated.View
295      testID={testID}
296      style={[
297        {
298          height: 80,
299          alignSelf: "center",
300          borderRadius: radius,
301          justifyContent: "center",
302        },
303        root,
304        style,
305      ]}
306    >
307      <View
308        pointerEvents="none"
309        style={{
310          position: "absolute",
311          top: (80 - Math.max(size, categoryHeight) - padding * 2) / 2,
312          bottom: (80 - Math.max(size, categoryHeight) - padding * 2) / 2,
313          left: 0,
314          right: 0,
315          borderRadius: radius,
316          overflow: "hidden",
317        }}
318      >
319        <BlurView
320          intensity={backdropIntensity}
321          tint={dark ? "dark" : "light"}
322          experimentalBlurMethod="dimezisBlurView"
323          style={{ flex: 1 }}
324        />
325      </View>
326      <View
327        pointerEvents="none"
328        accessibilityElementsHidden
329        importantForAccessibility="no-hide-descendants"
330        style={{ position: "absolute", opacity: 0, flexDirection: "row" }}
331      >
332        {categories.map((category) => (
333          <Text
334            key={`${labelSize}-${category.id}`}
335            onLayout={(e) => {
336              const w = e.nativeEvent.layout.width
337              setLabelWidths((previous) =>
338                previous[`${labelSize}-${category.id}`] === w
339                  ? previous
340                  : { ...previous, [`${labelSize}-${category.id}`]: w }
341              )
342            }}
343            style={{
344              fontFamily,
345              fontSize: labelSize,
346              lineHeight: small ? 16 : 28,
347              fontWeight: "700",
348              letterSpacing: -labelSize * 0.025,
349            }}
350          >
351            {category.label}
352          </Text>
353        ))}
354      </View>
355      <Animated.View
356        style={[
357          {
358            position: "absolute",
359            left: padding,
360            height: size,
361            borderRadius: 28,
362            borderWidth: 1,
363            borderColor: colors.border,
364            backgroundColor: colors.surface,
365            overflow: "hidden",
366            boxShadow: "0px 1px 2px rgba(0,0,0,.05)",
367            transitionProperty: ["backgroundColor", "borderColor"],
368            transitionDuration: 150,
369          },
370          search,
371        ]}
372      >
373        <Animated.View
374          pointerEvents="none"
375          style={[{ position: "absolute", top: (size - 18) / 2 }, searchIcon]}
376        >
377          <Svg
378            width={18}
379            height={18}
380            viewBox="0 0 24 24"
381            fill="none"
382            stroke={dark ? colors.inactive : colors.text}
383            strokeWidth={3}
384            strokeLinecap="round"
385          >
386            <Path d="m21 21-4.34-4.34" />
387            <Path d="M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
388          </Svg>
389        </Animated.View>
390        <Animated.View
391          pointerEvents={searching ? "auto" : "none"}
392          style={[
393            {
394              position: "absolute",
395              left: iconPadding + 26,
396              top: (size - 40) / 2,
397              height: 40,
398              overflow: "hidden",
399            },
400            inputBox,
401          ]}
402        >
403          <Svg
404            width={Math.max(1, targetSearchWidth - 2 * iconPadding - 26)}
405            height={40}
406            pointerEvents="none"
407            style={{ position: "absolute", top: 0, left: 0 }}
408          >
409            <Defs>
410              <Filter
411                id={inputFilter}
412                x="-10%"
413                y="-30%"
414                width="120%"
415                height="160%"
416              >
417                <AB animatedProps={inputBlur} />
418              </Filter>
419            </Defs>
420            <AG animatedProps={inputMotion}>
421              <G filter={`url(#${inputFilter})`}>
422                <AT
423                  animatedProps={mirrorPosition}
424                  y={20 + (small ? 14 : 16) * 0.35}
425                  fontFamily={fontFamily}
426                  fontSize={small ? 14 : 16}
427                  fontWeight="500"
428                  fill={
429                    (searching ? value : closingValue)
430                      ? colors.text
431                      : colors.placeholder
432                  }
433                >
434                  {(searching ? value : closingValue) || searchPlaceholder}
435                </AT>
436              </G>
437            </AG>
438          </Svg>
439          <AnimatedInput
440            ref={input}
441            value={value}
442            onChangeText={change}
443            onSubmitEditing={() => onSearchSubmit?.(value)}
444            returnKeyType="search"
445            editable={searching}
446            accessibilityLabel={searchPlaceholder}
447            cursorColor={colors.text}
448            selectionColor={colors.text}
449            placeholder={searchPlaceholder}
450            placeholderTextColor={colors.placeholder}
451            onScroll={({ nativeEvent }) => {
452              if (searching)
453                scrollX.set(Math.max(0, nativeEvent.contentOffset.x))
454            }}
455            style={[
456              {
457                color: colors.text,
458                fontFamily,
459                fontSize: small ? 14 : 16,
460                fontWeight: "500",
461                padding: 0,
462                height: 40,
463                textAlignVertical: "center",
464                includeFontPadding: false,
465              },
466              nativeInputMotion,
467            ]}
468          />
469        </Animated.View>
470        {!searching && (
471          <Pressable
472            accessibilityRole="button"
473            accessibilityLabel="Open search"
474            onPress={() => setSearching(true)}
475            style={{
476              position: "absolute",
477              left: 0,
478              right: 0,
479              top: 0,
480              bottom: 0,
481            }}
482          />
483        )}
484      </Animated.View>
485      <Animated.View
486        pointerEvents={searching ? "none" : "auto"}
487        accessibilityElementsHidden={searching}
488        importantForAccessibility={searching ? "no-hide-descendants" : "auto"}
489        style={[
490          {
491            position: "absolute",
492            top: (80 - categoryHeight) / 2,
493            height: categoryHeight,
494            width: visibleCategoryWidth,
495          },
496          categoryBox,
497        ]}
498      >
499        <Svg
500          width={visibleCategoryWidth}
501          height={categoryHeight}
502          pointerEvents="none"
503          style={{ position: "absolute", overflow: "visible" }}
504        >
505          <Defs>
506            <Filter
507              id={categoryFilter}
508              x="-10%"
509              y="-40%"
510              width="120%"
511              height="180%"
512            >
513              <AB animatedProps={categoryBlur} />
514            </Filter>
515          </Defs>
516          <AG animatedProps={categoryMotion}>
517            <G filter={`url(#${categoryFilter})`}>
518              <Rect
519                x={0.5}
520                y={0.5}
521                width={Math.max(0, visibleCategoryWidth - 1)}
522                height={categoryHeight - 1}
523                rx={999}
524                fill={colors.surface}
525                stroke={dark ? colors.border : "#F0F0F0"}
526              />
527              <AR
528                y={5}
529                height={tabHeight}
530                rx={999}
531                animatedProps={pill}
532                stroke={dark ? "#404040" : "transparent"}
533              />
534              {tabs.map((tab) => (
535                <CategoryContent
536                  key={tab.id}
537                  tab={tab}
538                  active={selected === tab.id}
539                  size={labelSize}
540                  small={small}
541                  iconSize={iconSize}
542                  tabHeight={tabHeight}
543                  padding={tabPadding}
544                  gap={tabGap}
545                  inactive={colors.inactive}
546                  fontFamily={fontFamily}
547                />
548              ))}
549            </G>
550          </AG>
551        </Svg>
552        {tabs.map((tab) => (
553          <Pressable
554            key={tab.id}
555            accessibilityRole="tab"
556            accessibilityState={{ selected: selected === tab.id }}
557            accessibilityLabel={tab.label}
558            onPress={() => {
559              setSelected(tab.id)
560              onCategoryChange?.(tab.id)
561            }}
562            style={{
563              position: "absolute",
564              left: tab.x,
565              top: 5,
566              width: Math.max(
567                0,
568                Math.min(tab.width, visibleCategoryWidth - tab.x)
569              ),
570              height: tabHeight,
571            }}
572          />
573        ))}
574      </Animated.View>
575      <Animated.View
576        pointerEvents={searching ? "auto" : "none"}
577        style={[
578          { position: "absolute", top: (80 - size) / 2, height: size },
579          closeBox,
580        ]}
581      >
582        <Svg
583          width={120}
584          height={size}
585          pointerEvents="none"
586          style={{ position: "absolute", overflow: "visible" }}
587        >
588          <Defs>
589            <Filter
590              id={closeFilter}
591              x="-20%"
592              y="-40%"
593              width="140%"
594              height="180%"
595            >
596              <AB animatedProps={closeBlur} />
597            </Filter>
598          </Defs>
599          <G filter={`url(#${closeFilter})`}>
600            <AR
601              x={0.5}
602              y={0.5}
603              height={size - 1}
604              rx={999}
605              fill={colors.surface}
606              stroke={colors.border}
607              animatedProps={closeRect}
608            />
609            <AG animatedProps={closeIcon}>
610              <Svg
611                width={18}
612                height={18}
613                viewBox="0 0 24 24"
614                fill="none"
615                stroke={colors.text}
616                strokeWidth={2.5}
617                strokeLinecap="round"
618              >
619                <Path d="m18 6-12 12M6 6l12 12" />
620              </Svg>
621            </AG>
622          </G>
623        </Svg>
624        <Pressable
625          accessibilityRole="button"
626          accessibilityLabel="Close search"
627          onPress={close}
628          onPressIn={() =>
629            pressP.set(withSpring(0.9, { stiffness: 550, damping: 30 }))
630          }
631          onPressOut={() =>
632            pressP.set(withSpring(1, { stiffness: 550, damping: 30 }))
633          }
634          style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
635        />
636      </Animated.View>
637    </Animated.View>
638  )
639}
640function CategoryContent({
641  tab,
642  active,
643  size,
644  small,
645  iconSize,
646  tabHeight,
647  padding,
648  gap,
649  inactive,
650  fontFamily,
651}: {
652  tab: Category & { x: number; width: number }
653  active: boolean
654  size: number
655  small: boolean
656  iconSize: number
657  tabHeight: number
658  padding: number
659  gap: number
660  inactive: string
661  fontFamily?: string
662}) {
663  const color = useSharedValue(active ? tab.activeTextColor : inactive)
664  useEffect(() => {
665    color.set(
666      withTiming(active ? tab.activeTextColor : inactive, {
667        duration: 150,
668        easing: Easing.bezier(0.4, 0, 0.2, 1),
669      })
670    )
671  }, [active, inactive, tab.activeTextColor])
672  const fill = useAnimatedProps(() => ({ fill: color.get() }))
673  return (
674    <G>
675      <AG
676        animatedProps={fill}
677        transform={`translate(${tab.x + padding} ${5 + (tabHeight - iconSize) / 2})`}
678      >
679        <Svg
680          width={iconSize}
681          height={iconSize}
682          viewBox={`0 0 ${iconSize} ${iconSize}`}
683        >
684          <G
685            transform={
686              small
687                ? `translate(${iconSize * 0.05} ${iconSize * 0.05}) scale(.9)`
688                : undefined
689            }
690          >
691            {typeof tab.icon === "function"
692              ? tab.icon(active ? tab.activeTextColor : inactive)
693              : tab.icon}
694          </G>
695        </Svg>
696      </AG>
697      <AT
698        x={tab.x + padding + iconSize + gap}
699        y={5 + tabHeight / 2 + size * 0.35}
700        fontFamily={fontFamily}
701        fontSize={size}
702        fontWeight="700"
703        letterSpacing={-size * 0.025}
704        animatedProps={fill}
705      >
706        {tab.label}
707      </AT>
708    </G>
709  )
710}
711export default MorphingDiscoveryBar