Interaction
Filter Disclosure

An expressive interaction rebuilt for touch
Expo code
Original web component

Watermelon UI
Our Expo component

React Native Web
Component source
Make it yours

One file to copy into your app.
filter-disclosure.in-progress.tsx

1import React, {
2  useEffect,
3  useLayoutEffect,
4  useRef,
5  useState,
6  type ComponentType,
7} from "react"
8import {
9  Platform,
10  Pressable,
11  StyleSheet,
12  Text,
13  View,
14  useColorScheme,
15  useWindowDimensions,
16  type StyleProp,
17  type ViewStyle,
18} from "react-native"
19import Animated, {
20  Easing,
21  ReduceMotion,
22  defineAnimation,
23  interpolateColor,
24  useAnimatedStyle,
25  useSharedValue,
26  withTiming,
27  type AnimationCallback,
28} from "react-native-reanimated"
29import Svg, { Path } from "react-native-svg"
30const ICONS = {
31  tasks: {
32    viewBox: "0 0 512 512",
33    paths: [
34      "M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z",
35    ],
36  },
37  events: {
38    viewBox: "0 0 512 512",
39    paths: [
40      "M480 128a64 64 0 0 0-64-64h-16V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 368 48v16H144V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 112 48v16H96a64 64 0 0 0-64 64v12a4 4 0 0 0 4 4h440a4 4 0 0 0 4-4zM32 416a64 64 0 0 0 64 64h320a64 64 0 0 0 64-64V179a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3zm344-208a24 24 0 1 1-24 24 24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24 24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24 24 24 0 0 1 24-24",
41    ],
42  },
43  reminders: {
44    viewBox: "0 0 448 512",
45    paths: [
46      "M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z",
47    ],
48  },
49  appointments: {
50    viewBox: "0 0 16 16",
51    paths: [
52      "M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354",
53    ],
54  },
55  meetings: {
56    viewBox: "0 0 16 16",
57    paths: [
58      "M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5",
59    ],
60  },
61  celebrations: {
62    viewBox: "0 0 24 24",
63    paths: [
64      "M16 16C17.6569 16 19 17.3431 19 19C19 20.6569 17.6569 22 16 22C14.3431 22 13 20.6569 13 19C13 17.3431 14.3431 16 16 16ZM6 12C8.20914 12 10 13.7909 10 16C10 18.2091 8.20914 20 6 20C3.79086 20 2 18.2091 2 16C2 13.7909 3.79086 12 6 12ZM14.5 2C17.5376 2 20 4.46243 20 7.5C20 10.5376 17.5376 13 14.5 13C11.4624 13 9 10.5376 9 7.5C9 4.46243 11.4624 2 14.5 2Z",
65    ],
66  },
67  funnel: {
68    viewBox: "0 0 256 256",
69    paths: [
70      "M204,136a12,12,0,0,1-12,12H64a12,12,0,0,1,0-24H192A12,12,0,0,1,204,136Zm28-60H24a12,12,0,0,0,0,24H232a12,12,0,0,0,0-24Zm-80,96H104a12,12,0,0,0,0,24h48a12,12,0,0,0,0-24Z",
71    ],
72  },
73  check: {
74    viewBox: "0 0 16 16",
75    paths: [
76      "M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z",
77    ],
78  },
79} as const
80const WEB = Platform.OS === "web"
81const FONT = WEB ? "Arial" : Platform.OS === "ios" ? "Helvetica" : "sans-serif"
82const clamp = (n: number) => {
83  "worklet"
84  return Math.max(0, Math.min(1, n))
85}
86function disclosureCurve(t: number) {
87  "worklet"
88  const seconds = t * 0.7,
89    decay = 20.095464266064543 / 2
90  const angular = Math.sqrt(179.47897069718974 - decay * decay)
91  return (
92    1 -
93    Math.exp(-decay * seconds) *
94      (Math.cos(angular * seconds) +
95        (decay / angular) * Math.sin(angular * seconds))
96  )
97}
98function badgeCurve(t: number) {
99  "worklet"
100  const x = (15.389022460752644 / 2) * t * 1.2
101  return 1 - Math.exp(-x) * (1 + x)
102}
103const MORPH = {
104  duration: 700,
105  easing: disclosureCurve,
106  reduceMotion: ReduceMotion.System,
107} as const
108const BADGE = {
109  duration: 1200,
110  easing: badgeCurve,
111  reduceMotion: ReduceMotion.System,
112} as const
113const HOVER = {
114  duration: 150,
115  easing: Easing.bezier(0.4, 0, 0.2, 1),
116  reduceMotion: ReduceMotion.System,
117} as const
118type SpringState = {
119  current: number
120  toValue: number
121  velocity: number
122  origin: number
123  started: number
124  lastTimestamp: number
125  initialVelocity: number
126  callback?: AnimationCallback
127  onStart: (
128    a: SpringState,
129    value: number,
130    now: number,
131    previous?: SpringState
132  ) => void
133  onFrame: (a: SpringState, now: number) => boolean
134}
135function motionSpring(
136  target: number,
137  stiffness: number,
138  damping: number,
139  callback?: AnimationCallback,
140  delay = 0
141): number {
142  "worklet"
143  return defineAnimation<SpringState>(target, () => {
144    "worklet"
145    return {
146      current: target,
147      toValue: target,
148      velocity: 0,
149      origin: target,
150      started: 0,
151      lastTimestamp: 0,
152      initialVelocity: 0,
153      callback,
154      onStart(a, value, now, previous) {
155        a.current = a.origin = value
156        a.started = now + delay
157        a.lastTimestamp = now
158        a.initialVelocity = previous?.lastTimestamp ? previous.velocity : 0
159      },
160      onFrame(a, now) {
161        if (now < a.started) return false
162        const t = (now - a.started) / 1000,
163          decay = damping / 2
164        const angular = Math.sqrt(stiffness - decay * decay),
165          x = a.origin - a.toValue
166        const b = (a.initialVelocity + decay * x) / angular,
167          envelope = Math.exp(-decay * t)
168        const cos = Math.cos(angular * t),
169          sin = Math.sin(angular * t)
170        a.current = a.toValue + envelope * (x * cos + b * sin)
171        a.velocity =
172          envelope *
173          ((b * angular - decay * x) * cos - (x * angular + decay * b) * sin)
174        a.lastTimestamp = now
175        const small = Math.abs(a.origin - a.toValue) < 5
176        if (
177          Math.abs(a.velocity) <= (small ? 0.01 : 2) &&
178          Math.abs(a.current - a.toValue) <= (small ? 0.005 : 0.5)
179        ) {
180          a.current = a.toValue
181          a.lastTimestamp = a.velocity = 0
182          return true
183        }
184        return false
185      },
186    }
187  }) as unknown as number
188}
189export type FilterIconProps = { size: number; color: string }
190export type FilterItem = {
191  id: string
192  label: string
193  icon?: ComponentType<FilterIconProps>
194}
195export type FilterDisclosureColors = {
196  surface: string
197  border: string
198  label: string
199  icon: string
200  funnel: string
201  hover: string
202  ring: string
203  selected: string
204  check: string
205}
206export type FilterDisclosureProps = {
207  items?: FilterItem[]
208  defaultActiveId?: string
209  onChange?: (id: string) => void
210  theme?: "light" | "dark" | "system"
211  colors?: Partial<FilterDisclosureColors>
212  width?: number
213  radius?: number
214  buttonSize?: number
215  fontSize?: number
216  style?: StyleProp<ViewStyle>
217  testID?: string
218}
219const DEFAULT_ITEMS: FilterItem[] = [
220  { id: "tasks", label: "Tasks" },
221  { id: "events", label: "Events" },
222  { id: "reminders", label: "Reminders" },
223  { id: "appointments", label: "Appointment" },
224  { id: "meetings", label: "Mettings" },
225  { id: "celebrations", label: "Celebrations" },
226]
227const LIGHT: FilterDisclosureColors = {
228  surface: "#FEFEFE",
229  border: "#E5E5E9",
230  label: "#535257",
231  icon: "#AFAEB9",
232  funnel: "#272729",
233  hover: "#F6F5FA",
234  ring: "#ADADB2",
235  selected: "#31C051",
236  check: "#fff",
237}
238const DARK: FilterDisclosureColors = {
239  ...LIGHT,
240  surface: "#171717",
241  border: "#262626",
242  label: "#e5e5e5",
243  icon: "#737373",
244  funnel: "#f5f5f5",
245  hover: "rgba(38,38,38,0.6)",
246  ring: "#404040",
247}
248function Icon({ name, size, color }: FilterIconProps & { name: string }) {
249  const data = ICONS[name as keyof typeof ICONS] ?? ICONS.tasks
250  return (
251    <Svg width={size} height={size} viewBox={data.viewBox} pointerEvents="none">
252      {data.paths.map((d, i) => (
253        <Path key={i} d={d} fill={color} />
254      ))}
255    </Svg>
256  )
257}
258function ItemIcon({
259  item,
260  size,
261  color,
262}: FilterIconProps & { item: FilterItem | undefined }) {
263  const Custom = item?.icon
264  return Custom ? (
265    <Custom size={size} color={color} />
266  ) : (
267    <Icon name={item?.id ?? "tasks"} size={size} color={color} />
268  )
269}
270function Row({
271  item,
272  index,
273  selected,
274  colors,
275  fontSize,
276  onSelect,
277}: {
278  item: FilterItem
279  index: number
280  selected: boolean
281  colors: FilterDisclosureColors
282  fontSize: number
283  onSelect: () => void
284}) {
285  const y = useSharedValue(40),
286    scale = useSharedValue(1.1),
287    opacity = useSharedValue(0)
288  const press = useSharedValue(1),
289    hover = useSharedValue(0)
290  const checkScale = useSharedValue(selected ? 1 : 0),
291    checkOpacity = useSharedValue(selected ? 100 : 0)
292  const color = useSharedValue(selected ? 1 : 0)
293  useLayoutEffect(() => {
294    const delay = (3 + index) * 50
295    y.value = motionSpring(0, 240, 20, undefined, delay)
296    scale.value = motionSpring(1, 240, 20, undefined, delay)
297    opacity.value = motionSpring(100, 240, 20, undefined, delay)
298  }, [index, y, scale, opacity])
299  useLayoutEffect(() => {
300    checkScale.value = motionSpring(selected ? 1 : 0, 520, 30)
301    checkOpacity.value = motionSpring(selected ? 100 : 0, 520, 30)
302    color.value = withTiming(selected ? 1 : 0, MORPH)
303  }, [selected, checkScale, checkOpacity, color])
304  const animated = useAnimatedStyle(() => ({
305    opacity: clamp(opacity.value / 100),
306    transform: [{ translateY: y.value }, { scale: scale.value * press.value }],
307  }))
308  const background = useAnimatedStyle(() => ({
309    backgroundColor: interpolateColor(
310      hover.value,
311      [0, 1],
312      ["transparent", colors.hover]
313    ),
314  }))
315  const bubble = useAnimatedStyle(() => ({
316    backgroundColor: interpolateColor(
317      clamp(color.value),
318      [0, 1],
319      ["rgba(49,192,81,0)", colors.selected]
320    ),
321  }))
322  const mark = useAnimatedStyle(() => ({
323    opacity: clamp(checkOpacity.value / 100),
324    transform: [{ scale: checkScale.value }],
325  }))
326  return (
327    <Animated.View style={animated}>
328      <Pressable
329        accessibilityRole="radio"
330        accessibilityLabel={item.label}
331        accessibilityState={{ checked: selected }}
332        onPress={onSelect}
333        onHoverIn={() => {
334          hover.value = withTiming(1, HOVER)
335        }}
336        onHoverOut={() => {
337          hover.value = withTiming(0, HOVER)
338        }}
339        onPressIn={() => {
340          press.value = motionSpring(0.98, 240, 20, undefined, (3 + index) * 50)
341        }}
342        onPressOut={() => {
343          press.value = motionSpring(1, 240, 20, undefined, (3 + index) * 50)
344        }}
345      >
346        <Animated.View style={[styles.row, background]}>
347          <View style={styles.labelGroup}>
348            <ItemIcon item={item} size={24} color={colors.icon} />
349            <Text
350              numberOfLines={1}
351              style={{
352                fontFamily: FONT,
353                fontSize,
354                lineHeight: fontSize * 1.5,
355                letterSpacing: -fontSize * 0.025,
356                fontWeight: "700",
357                color: colors.label,
358              }}
359            >
360              {item.label}
361            </Text>
362          </View>
363          <Animated.View
364            style={[
365              styles.bubble,
366              bubble,
367              { borderColor: selected ? colors.selected : colors.ring },
368            ]}
369          >
370            <Animated.View style={mark}>
371              <Icon name="check" size={16} color={colors.check} />
372            </Animated.View>
373          </Animated.View>
374        </Animated.View>
375      </Pressable>
376    </Animated.View>
377  )
378}
379export function FilterDisclosure({
380  items = DEFAULT_ITEMS,
381  defaultActiveId = "reminders",
382  onChange,
383  theme = "system",
384  colors: overrides,
385  width = 300,
386  radius = 32,
387  buttonSize = 60,
388  fontSize = 18,
389  style,
390  testID,
391}: FilterDisclosureProps) {
392  const system = useColorScheme(),
393    dark = theme === "dark" || (theme === "system" && system === "dark")
394  const colors = { ...(dark ? DARK : LIGHT), ...overrides }
395  const [open, setOpen] = useState(false),
396    [active, setActive] = useState(defaultActiveId)
397  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
398  const rootRef = useRef<View>(null),
399    [border, setBorder] = useState(1.6)
400  const progress = useSharedValue(0),
401    fade = useSharedValue(1),
402    feedback = useSharedValue(1),
403    badge = useSharedValue(-30)
404  const mounted = useRef(false)
405  const { fontScale } = useWindowDimensions()
406  const rowHeight = Math.max(26, fontSize * 1.5 * fontScale) + 20
407  const panelHeight =
408    items.length * rowHeight +
409    Math.max(0, items.length - 1) * 4 +
410    16 +
411    border * 2
412  useEffect(
413    () => () => {
414      if (timer.current) clearTimeout(timer.current)
415    },
416    []
417  )
418  useLayoutEffect(() => {
419    if (WEB && rootRef.current) {
420      const node = rootRef.current as unknown as Element
421      const actual = parseFloat(window.getComputedStyle(node).borderTopWidth)
422      if (Number.isFinite(actual) && actual !== border) setBorder(actual)
423    }
424  }, [border])
425  useLayoutEffect(() => {
426    if (open) feedback.value = 1
427    progress.value = withTiming(open ? 1 : 0, MORPH)
428    if (mounted.current) {
429      fade.value = 0
430      fade.value = withTiming(1, MORPH)
431    }
432    mounted.current = true
433    if (!open) {
434      badge.value = -30
435      badge.value = withTiming(0, BADGE)
436    }
437  }, [open, progress, fade, badge, feedback])
438  const shape = useAnimatedStyle(() => {
439    const p = progress.value,
440      w = buttonSize + (width - buttonSize) * p,
441      h = buttonSize + (panelHeight - buttonSize) * p
442    return {
443      width: w,
444      height: h,
445      left: (width - w) / 2 - ((buttonSize - 12) / 2) * (1 - p),
446      top: (70 - h) / 2,
447      borderRadius: Math.min(radius, w / 2, h / 2),
448      transform: [{ scale: feedback.value }],
449    }
450  })
451  const content = useAnimatedStyle(() => ({
452    left:
453      (buttonSize + (width - buttonSize) * progress.value - width) / 2 - border,
454    top:
455      (buttonSize + (panelHeight - buttonSize) * progress.value - panelHeight) /
456        2 -
457      border,
458    transform: [
459      { scaleX: (buttonSize + (width - buttonSize) * progress.value) / width },
460      {
461        scaleY:
462          (buttonSize + (panelHeight - buttonSize) * progress.value) /
463          panelHeight,
464      },
465    ],
466    opacity: open ? clamp(fade.value) : 0,
467  }))
468  const funnel = useAnimatedStyle(() => ({
469    opacity: open ? 0 : clamp(fade.value),
470    transform: [
471      { translateX: ((buttonSize - 12) / 2) * progress.value },
472      {
473        scaleX:
474          (feedback.value *
475            (buttonSize + (width - buttonSize) * progress.value)) /
476          buttonSize,
477      },
478      {
479        scaleY:
480          (feedback.value *
481            (buttonSize + (panelHeight - buttonSize) * progress.value)) /
482          buttonSize,
483      },
484    ],
485  }))
486  const badgeStyle = useAnimatedStyle(() => ({
487    transform: [{ translateX: badge.value }],
488    opacity: open ? 0 : 0.8,
489  }))
490  const select = (id: string) => {
491    if (timer.current) clearTimeout(timer.current)
492    setActive(id)
493    onChange?.(id)
494    timer.current = setTimeout(() => {
495      timer.current = undefined
496      setOpen(false)
497    }, 220)
498  }
499  return (
500    <View
501      testID={testID}
502      style={[{ width, height: 70, overflow: "visible" }, style]}
503    >
504      <Animated.View
505        pointerEvents="none"
506        style={[
507          styles.badge,
508          {
509            left: width / 2 - 6,
510            top: (70 - buttonSize) / 2,
511            width: buttonSize,
512            height: buttonSize,
513            borderRadius: buttonSize / 2,
514            borderColor: colors.border,
515            backgroundColor: colors.surface,
516          },
517          badgeStyle,
518        ]}
519      >
520        <ItemIcon
521          item={items.find((item) => item.id === active)}
522          size={24}
523          color={colors.icon}
524        />
525      </Animated.View>
526      <Animated.View
527        ref={rootRef}
528        pointerEvents={open ? "auto" : "none"}
529        style={[
530          styles.surface,
531          {
532            borderColor: colors.border,
533            backgroundColor: colors.surface,
534            boxShadow:
535              dark && open
536                ? "0px 20px 50px rgba(0,0,0,.5)"
537                : open
538                  ? "0px 12px 40px rgba(0,0,0,.08)"
539                  : "0px 1px 2px rgba(0,0,0,.05)",
540          },
541          shape,
542        ]}
543      >
544        {open && (
545          <Animated.View
546            accessibilityRole="radiogroup"
547            style={[
548              {
549                position: "absolute",
550                width,
551                height: panelHeight,
552                padding: 8 + border,
553                gap: 4,
554                transformOrigin: "center",
555                zIndex: 20,
556              },
557              content,
558            ]}
559          >
560            {items.map((item, index) => (
561              <Row
562                key={item.id}
563                item={item}
564                index={index}
565                selected={active === item.id}
566                colors={colors}
567                fontSize={fontSize}
568                onSelect={() => select(item.id)}
569              />
570            ))}
571          </Animated.View>
572        )}
573      </Animated.View>
574      {!open && (
575        <Animated.View
576          style={[
577            {
578              position: "absolute",
579              width: buttonSize,
580              height: buttonSize,
581              left: width / 2 - buttonSize + 6,
582              top: (70 - buttonSize) / 2,
583              zIndex: 30,
584            },
585            funnel,
586          ]}
587        >
588          <Pressable
589            accessibilityRole="button"
590            accessibilityLabel="Open filters"
591            accessibilityState={{ expanded: open }}
592            onPress={() => setOpen(true)}
593            onHoverIn={() => {
594              feedback.value = withTiming(1.05, MORPH)
595            }}
596            onHoverOut={() => {
597              feedback.value = withTiming(1, MORPH)
598            }}
599            onPressIn={() => {
600              feedback.value = withTiming(0.95, MORPH)
601            }}
602            onPressOut={() => {
603              feedback.value = withTiming(1, MORPH)
604            }}
605            style={styles.funnel}
606          >
607            <Icon name="funnel" size={30} color={colors.funnel} />
608          </Pressable>
609        </Animated.View>
610      )}
611    </View>
612  )
613}
614const styles = StyleSheet.create({
615  surface: {
616    position: "absolute",
617    borderWidth: 1.6,
618    zIndex: 15,
619    overflow: "hidden",
620  },
621  badge: {
622    position: "absolute",
623    borderWidth: 1.6,
624    alignItems: "center",
625    justifyContent: "center",
626    zIndex: 10,
627    boxShadow: "0px 1px 2px rgba(0,0,0,.05)",
628  },
629  funnel: {
630    width: "100%",
631    height: "100%",
632    alignItems: "center",
633    justifyContent: "center",
634  },
635  row: {
636    flexDirection: "row",
637    justifyContent: "space-between",
638    alignItems: "center",
639    borderRadius: 16,
640    paddingHorizontal: 12,
641    paddingVertical: 10,
642  },
643  labelGroup: {
644    flexDirection: "row",
645    alignItems: "center",
646    gap: 28,
647    flexShrink: 1,
648  },
649  bubble: {
650    width: 26,
651    height: 26,
652    borderWidth: 3,
653    borderRadius: 13,
654    alignItems: "center",
655    justifyContent: "center",
656    flexShrink: 0,
657  },
658})
Give the gestures and motion a run on a real Android phone.
Back to Watermelon UI