Dynamic Island

1import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
2import { Platform, View, type ViewStyle } from "react-native"
3import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming } from "react-native-reanimated"
4type Size = { width: number; height: number }
5const COMPACT = "__compact"
6const SHELL_SPRING = { duration: 800, dampingRatio: 0.8 }
7const CONTENT_SPRING = { duration: 800, dampingRatio: 0.65 }
8const EASE_OUT = Easing.bezier(0.16, 1, 0.3, 1)
9const IslandContext = createContext<{
10  view: string | null
11  maxWidth: number
12  report: (id: string, size: Size) => void
13} | null>(null)
14export interface DynamicIslandProps {
15  view?: string | null
16  activeView?: string | null
17  compact?: React.ReactNode
18  children?: React.ReactNode
19  compactWidth?: number
20  compactHeight?: number
21  maxWidth?: number
22  backgroundColor?: string
23  radius?: number
24  style?: ViewStyle
25  testID?: string
26}
27export function DynamicIsland({
28  view,
29  activeView,
30  compact,
31  children,
32  compactWidth = 126,
33  compactHeight = 37,
34  maxWidth = 360,
35  backgroundColor = "#111111",
36  radius = 32,
37  style,
38  testID,
39}: DynamicIslandProps) {
40  const selected = view === undefined ? activeView ?? null : view
41  const [sizes, setSizes] = useState<Record<string, Size>>({})
42  const width = useSharedValue(compactWidth)
43  const height = useSharedValue(compactHeight)
44  const reduced = useReducedMotion()
45  const report = useCallback((id: string, size: Size) => {
46    setSizes((previous) =>
47      previous[id]?.width === size.width && previous[id]?.height === size.height
48        ? previous
49        : { ...previous, [id]: size }
50    )
51  }, [])
52  const context = useMemo(() => ({ view: selected, maxWidth, report }), [selected, maxWidth, report])
53  useEffect(() => {
54    const size = sizes[selected ?? COMPACT]
55    const nextWidth = Math.min(maxWidth, size?.width ?? compactWidth)
56    const nextHeight = size?.height ?? compactHeight
57    width.set(reduced ? nextWidth : withSpring(nextWidth, SHELL_SPRING))
58    height.set(reduced ? nextHeight : withSpring(nextHeight, SHELL_SPRING))
59  }, [selected, sizes, compactWidth, compactHeight, maxWidth, reduced, width, height])
60  const shell = useAnimatedStyle(() => ({ width: width.get(), height: height.get() }))
61  return (
62    <IslandContext.Provider value={context}>
63      <Animated.View
64        testID={testID}
65        accessibilityRole="summary"
66        accessibilityLiveRegion="polite"
67        style={[
68          { backgroundColor, borderRadius: radius, overflow: "hidden", boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)" },
69          style,
70          shell,
71        ]}
72      >
73        <View style={{ position: "absolute", top: 0, left: 0, width: maxWidth }}>
74          {compact ? (
75            <IslandSlot id={COMPACT} active={selected === null} style={{
76              minWidth: compactWidth, minHeight: compactHeight,
77              paddingHorizontal: 16, paddingVertical: 6, gap: 8,
78            }}>
79              {compact}
80            </IslandSlot>
81          ) : null}
82          {children}
83        </View>
84      </Animated.View>
85    </IslandContext.Provider>
86  )
87}
88function IslandSlot({ id, active, children, style }: {
89  id: string
90  active: boolean
91  children: React.ReactNode
92  style?: ViewStyle
93}) {
94  const context = useContext(IslandContext)!
95  const reduced = useReducedMotion()
96  const progress = useSharedValue(active ? 1 : 0)
97  useEffect(() => {
98    progress.set(active
99      ? reduced ? withTiming(1, { duration: 150 }) : withSpring(1, CONTENT_SPRING)
100      : withTiming(0, { duration: reduced ? 100 : 80, easing: EASE_OUT }))
101  }, [active, reduced, progress])
102  const appearance = useAnimatedStyle(() => {
103    const value = progress.get()
104    const opacity = Math.max(0, Math.min(1, value))
105    return {
106      opacity,
107      transformOrigin: "top center",
108      transform: reduced ? [] : [
109        { translateY: -(active ? 8 : 6) * (1 - value) },
110        { scale: 0.9 + 0.1 * value },
111      ],
112      ...(Platform.OS === "web" ? { filter: `blur(${active && !reduced ? 5 * (1 - opacity) : 0}px)` } : {}),
113    }
114  })
115  return (
116    <Animated.View
117      pointerEvents={active ? "auto" : "none"}
118      aria-hidden={!active}
119      accessibilityElementsHidden={!active}
120      importantForAccessibility={active ? "auto" : "no-hide-descendants"}
121      onLayout={({ nativeEvent: { layout } }) => context.report(id, { width: layout.width, height: layout.height })}
122      style={[
123        {
124          position: "absolute", top: 0, left: 0, maxWidth: context.maxWidth,
125          flexDirection: "row", alignItems: "center", justifyContent: "center",
126          paddingHorizontal: 24, paddingVertical: 16,
127        },
128        style,
129        appearance,
130      ]}
131    >
132      {children}
133    </Animated.View>
134  )
135}
136export function DynamicIslandView({ id, children, width, style }: {
137  id: string
138  children: React.ReactNode
139  width?: number
140  style?: ViewStyle
141}) {
142  const context = useContext(IslandContext)
143  if (!context) throw new Error("DynamicIslandView must be used inside <DynamicIsland>")
144  return (
145    <IslandSlot id={id} active={context.view === id} style={{ ...(width === undefined ? {} : { width }), ...style }}>
146      {children}
147    </IslandSlot>
148  )
149}