react-native-nitro-tracing 0.6.0

package/src/react/explorerModel.ts

@@ -0,0 +1,285 @@
+import type { MarkEvent, SpanEvent, TracePage } from '../types'
+
+export type ExplorerMode = 'traces' | 'spans' | 'marks'
+export type Sort =
+  'newest' | 'oldest' | 'longest' | 'shortest' | 'errors' | 'count' | 'name'
+export interface Query {
+  search: string
+  outcomes: string[]
+  sources: string[]
+  minDuration: string
+  from: string
+  to: string
+  correlation: string
+  sort: Sort
+}
+export const defaultQuery = (): Query => ({
+  search: '',
+  outcomes: [],
+  sources: [],
+  minDuration: '',
+  from: '',
+  to: '',
+  correlation: '',
+  sort: 'newest',
+})
+export type Event = SpanEvent | MarkEvent
+export interface Trace {
+  id: string
+  name: string
+  start: number
+  duration: number
+  errors: number
+  spans: SpanEvent[]
+  marks: MarkEvent[]
+  sources: string[]
+}
+const isSpan = (event: Event): event is SpanEvent => 'spanId' in event
+export const sourceOf = (event: Event): string =>
+  event.attributes.find((a) => a.key === 'source')?.value || 'unknown'
+const compareText = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
+const identity = (event: Event) =>
+  isSpan(event) ? event.spanId : `mark:${event.sequence}`
+const tie = (a: Event, b: Event) =>
+  compareText(identity(a), identity(b)) || a.sequence - b.sequence
+const chronological = (a: Event, b: Event) =>
+  a.timestampMs - b.timestampMs || tie(a, b)
+const durationOf = (event: Event) => (isSpan(event) ? event.durationMs : 0)
+const endOf = (event: Event) => event.timestampMs + durationOf(event)
+const numeric = (value: string): number | undefined =>
+  value.trim() && Number.isFinite(Number(value)) ? Number(value) : undefined
+const overlaps = (start: number, duration: number, query: Query) => {
+  const from = numeric(query.from)
+  const to = numeric(query.to)
+  return (
+    (from === undefined || start + duration >= from) &&
+    (to === undefined || start <= to)
+  )
+}
+export const matchesSearch = (event: Event, search: string) =>
+  !search ||
+  [
+    event.name,
+    event.correlationId,
+    isSpan(event) ? event.spanId : '',
+    ...event.attributes.flatMap((a) => [a.key, a.value]),
+  ].some((value) => value.toLowerCase().includes(search.toLowerCase()))
+
+/** A deterministic forest: missing parents are roots and cycles are cut once. */
+const forest = (spans: SpanEvent[]) => {
+  const sorted = [...spans].sort(chronological)
+  const byId = new Map(sorted.map((span) => [span.spanId, span]))
+  const children = new Map<SpanEvent, SpanEvent[]>()
+  const roots: SpanEvent[] = []
+  for (const span of sorted) {
+    const parent = byId.get(span.parentSpanId)
+    if (!parent || parent === span) roots.push(span)
+    else {
+      const siblings = children.get(parent) ?? []
+      siblings.push(span)
+      children.set(parent, siblings)
+    }
+  }
+  const visited = new Set<SpanEvent>()
+  const rows: Array<{
+    span: SpanEvent
+    depth: number
+    root: SpanEvent
+    parent?: SpanEvent
+    children: number
+  }> = []
+  const rowBySpan = new Map<SpanEvent, (typeof rows)[number]>()
+  for (const root of [...roots, ...sorted]) {
+    if (visited.has(root)) continue
+    const stack: Array<{ span: SpanEvent; depth: number; parent?: SpanEvent }> =
+      [{ span: root, depth: 0 }]
+    while (stack.length) {
+      const next = stack.pop()!
+      if (visited.has(next.span)) continue
+      visited.add(next.span)
+      const row = { ...next, root, children: 0 }
+      rows.push(row)
+      rowBySpan.set(next.span, row)
+      const descendants = children.get(next.span) ?? []
+      for (let i = descendants.length - 1; i >= 0; i--)
+        stack.push({
+          span: descendants[i],
+          depth: next.depth + 1,
+          parent: next.span,
+        })
+    }
+  }
+  for (let i = rows.length - 1; i >= 0; i--) {
+    const row = rows[i]
+    const parent = row.parent && rowBySpan.get(row.parent)
+    if (parent) parent.children += row.children + 1
+  }
+  return rows
+}
+
+export const buildTraces = (page: TracePage): Trace[] => {
+  const groups = new Map<string, { id: string; events: Event[] }>()
+  for (const event of [...page.spans, ...page.marks]) {
+    if (!event.correlationId) continue
+    const key = `correlation:${event.correlationId}`
+    const group = groups.get(key) ?? { id: key, events: [] }
+    group.events.push(event)
+    groups.set(key, group)
+  }
+  for (const row of forest(page.spans.filter((span) => !span.correlationId))) {
+    const key = `span:${row.root.spanId}`
+    const group = groups.get(key) ?? { id: key, events: [] }
+    group.events.push(row.span)
+    groups.set(key, group)
+  }
+  return [...groups.values()]
+    .map(({ id, events }) => {
+      events.sort(chronological)
+      const spans = events.filter(isSpan)
+      const start = events[0].timestampMs
+      const end = events.reduce(
+        (latest, event) => Math.max(latest, endOf(event)),
+        start
+      )
+      return {
+        id,
+        name: events[0].name,
+        start,
+        duration: end - start,
+        errors: spans.filter((s) => s.outcome === 'error').length,
+        spans,
+        marks: events.filter((e) => !isSpan(e)),
+        sources: [...new Set(events.map(sourceOf))].sort(compareText),
+      }
+    })
+    .sort((a, b) => b.start - a.start || compareText(a.id, b.id))
+}
+
+export const queryEvents = (events: Event[], query: Query): Event[] => {
+  const search = query.search.toLowerCase()
+  const minimum = numeric(query.minDuration)
+  return events
+    .filter(
+      (event) =>
+        matchesSearch(event, search) &&
+        (!query.correlation || event.correlationId === query.correlation) &&
+        (!query.sources.length || query.sources.includes(sourceOf(event))) &&
+        (!isSpan(event) ||
+          !query.outcomes.length ||
+          query.outcomes.includes(event.outcome)) &&
+        (!isSpan(event) ||
+          minimum === undefined ||
+          event.durationMs >= minimum) &&
+        overlaps(event.timestampMs, durationOf(event), query)
+    )
+    .sort((a, b) => {
+      let order = 0
+      switch (query.sort) {
+        case 'oldest':
+          order = a.timestampMs - b.timestampMs
+          break
+        case 'longest':
+          order = durationOf(b) - durationOf(a)
+          break
+        case 'shortest':
+          order = durationOf(a) - durationOf(b)
+          break
+        case 'name':
+          order = compareText(a.name, b.name)
+          break
+        case 'errors':
+          order =
+            Number(isSpan(b) && b.outcome === 'error') -
+            Number(isSpan(a) && a.outcome === 'error')
+          break
+        default:
+          order = b.timestampMs - a.timestampMs
+      }
+      return order || tie(a, b)
+    })
+}
+
+export const queryTraces = (traces: Trace[], query: Query): Trace[] => {
+  const search = query.search.toLowerCase()
+  const minimum = numeric(query.minDuration)
+  return traces
+    .filter((trace) => {
+      const events: Event[] = [...trace.spans, ...trace.marks]
+      return (
+        (!search || events.some((event) => matchesSearch(event, search))) &&
+        (!query.correlation ||
+          events.some((event) => event.correlationId === query.correlation)) &&
+        (!query.sources.length ||
+          trace.sources.some((source) => query.sources.includes(source))) &&
+        (!query.outcomes.length ||
+          query.outcomes.some((outcome) =>
+            outcome === 'error'
+              ? trace.errors > 0
+              : (outcome === 'success' || outcome === 'no-error') &&
+                trace.errors === 0
+          )) &&
+        (minimum === undefined || trace.duration >= minimum) &&
+        overlaps(trace.start, trace.duration, query)
+      )
+    })
+    .sort((a, b) => {
+      let order = 0
+      switch (query.sort) {
+        case 'oldest':
+          order = a.start - b.start
+          break
+        case 'longest':
+          order = b.duration - a.duration
+          break
+        case 'shortest':
+          order = a.duration - b.duration
+          break
+        case 'errors':
+          order = b.errors - a.errors
+          break
+        case 'count':
+          order = b.spans.length - a.spans.length
+          break
+        case 'name':
+          order = compareText(a.name, b.name)
+          break
+        default:
+          order = b.start - a.start
+      }
+      return order || compareText(a.id, b.id)
+    })
+}
+
+export const hierarchyRows = (spans: SpanEvent[], collapsed: Set<string>) => {
+  const rows = forest(spans)
+  const start = spans.reduce(
+    (min, span) => Math.min(min, span.timestampMs),
+    Infinity
+  )
+  const end = spans.reduce((max, span) => Math.max(max, endOf(span)), -Infinity)
+  const duration = Math.max(1, end - start)
+  let hiddenBelow = Infinity
+  return rows
+    .filter((row) => {
+      if (row.depth > hiddenBelow) return false
+      hiddenBelow = collapsed.has(row.span.spanId) ? row.depth : Infinity
+      return true
+    })
+    .map(({ span, depth, children }) => ({
+      span,
+      depth,
+      children,
+      offset: (span.timestampMs - start) / duration,
+      width: span.durationMs / duration,
+    }))
+}
+export const traceForSpan = (
+  traces: Trace[],
+  span: SpanEvent
+): Trace | undefined =>
+  traces.find((trace) =>
+    trace.spans.some(
+      (member) =>
+        member.spanId === span.spanId && member.sequence === span.sequence
+    )
+  )

package/src/react/labels.ts

@@ -0,0 +1,234 @@
+export const defaultLabels = {
+  applyFilters: 'Apply',
+  title: 'Performance',
+  searchMatch: 'Search match',
+  explore: 'Explore',
+  profiles: 'Profiles',
+  spans: 'Spans',
+  events: 'events',
+  actions: 'Actions',
+  tools: 'Tools',
+  back: 'Back',
+  done: 'Done',
+  details: 'Details',
+  cancel: 'Cancel',
+  filters: 'Filters',
+  sort: 'Sort',
+  reset: 'Reset',
+  exploreSearch: 'Search',
+  metricSearch: 'Search metrics',
+  newest: 'Newest',
+  oldest: 'Oldest',
+  longest: 'Longest',
+  shortest: 'Shortest',
+  errors: 'Most errors',
+  count: 'Most samples',
+  name: 'Name',
+  p95: 'Highest p95',
+  source: 'Source',
+  outcome: 'Outcome',
+  success: 'Success',
+  error: 'Error',
+  cancelled: 'Cancelled',
+  interrupted: 'Interrupted',
+  noErrors: 'No recorded errors',
+  minDuration: 'Minimum duration (ms)',
+  from: 'From (ms since recording)',
+  to: 'To (ms since recording)',
+  correlation: 'Exact correlation ID',
+  invalidRange: 'Enter nonnegative numbers, with From no later than To.',
+  resultCount: '{{matching}} / {{loaded}} matching',
+  traceRow: '{{spans}} spans · {{errors}} errors · {{source}}',
+  noResults:
+    'No matching events. Change filters or reset to see the retained recording.',
+  uncorrelated: 'Uncorrelated',
+  uncorrelatedHint:
+    '{{count}} uncorrelated events are also available in Spans and Marks.',
+  pauseUpdates: 'Freeze view',
+  resumeUpdates: 'Resume live view',
+  newEvents: '{{count}} new events',
+  detailFrozen:
+    'Detail is held steady while capture continues. Return to load newer events.',
+  expandAll: 'Expand all',
+  collapseAll: 'Collapse all',
+  missingParent: 'Parent is outside retained history.',
+  wholeTrace: 'Show entire trace',
+  similar: 'Find similar spans',
+  parent: 'Parent',
+  children: 'Children',
+  attributes: 'Search attributes',
+  evicted:
+    'This event is outside retained history. Showing the last inspected snapshot.',
+  all: 'All',
+  runtime: 'Runtime',
+  custom: 'Custom',
+  metricBrief: 'p95 {{p95}} · n={{count}}',
+  metricSortNotice:
+    'All retained traces. Numeric sorting compares raw values; check units when comparing series.',
+  exportAll: 'Recording JSON (stops recording)',
+  sharePerfetto: 'Perfetto trace',
+  replaceTitle: 'Replace current recording?',
+  replaceDescription:
+    'Start a new recording and discard the currently retained history. Export first to keep a copy.',
+  retainedScope:
+    'Counts and statistics cover retained history. Pause updates freezes this view, not recording or profiling.',
+  lostHistory: 'Lost {{what}}; this history is incomplete.',
+  lostSpans: '{{count}} spans',
+  lostMarks: '{{count}} marks',
+  lostMetrics: '{{count}} metric samples',
+  slowest: 'Slowest spans',
+  errorsOnly: 'Errors',
+  profileSeparate:
+    'CPU profiles are separate from trace JSON. Stop sampling to save and share the latest artifact.',
+  noProfiler: 'No CPU profiler is configured for this client.',
+
+  eyebrow: 'DEVELOPER TOOLS',
+  close: 'Close',
+  recording: 'Recording live',
+  stopped: 'Recording stopped',
+  counters:
+    '{{events}} events \u00b7 {{active}} active \u00b7 {{dropped}} dropped \u00b7 {{bytes}} bytes',
+  start: 'Start recording',
+  stop: 'Stop recording',
+  clear: 'Clear',
+  export: 'Stop & export',
+  retention: 'Bounded native history \u00b7 refreshes while open',
+  traces: 'Traces',
+  search: 'Search operation or correlation ID',
+  traceSummary:
+    '{{duration}} ms \u00b7 {{events}} events \u00b7 {{errors}} errors',
+  empty: 'No traces yet. Use the app to capture activity.',
+  waterfall: 'Span waterfall',
+  noSpans: 'No completed spans in this trace.',
+  spanDetails: 'Span {{id}} \u00b7 parent {{parent}} \u00b7 {{outcome}}',
+  metrics: 'Metrics',
+  operations: 'Operation outcomes',
+  operationsShort: 'Operations',
+  operationStats:
+    '{{count}} spans · {{errors}} errors · {{errorRate}} error rate · {{cancelled}} cancelled · {{interrupted}} interrupted',
+  metricsScope:
+    'All traces · app.ready.after_tracer_init measures tracer setup to app readiness, not TTI. duration: series are derived from completed spans. Statistics cover retained samples, not the whole session.',
+  emptyMetrics:
+    'No samples yet. Use the app or run the playground. App-ready timing appears after a fresh launch; TTI requires an explicit readiness definition.',
+  metricStats:
+    'Latest {{latest}} · median {{median}} · min {{min}} · max {{max}} · p95 {{p95}} · {{count}} samples',
+  marks: 'Marks',
+  playground: 'Instrumentation playground',
+  playgroundDescription:
+    'Check nested spans, concurrent operations with the same name, cancellation, repeated completion, errors and metrics.',
+  run: 'Run sample trace',
+  profiling: 'CPU profile',
+  profilingDescription:
+    'Capture a native profiler artifact alongside this recording.',
+  startProfile: 'Start CPU profile',
+  stopProfile: 'Stop CPU profile',
+  shareProfile: 'CPU profile',
+  shareArtifact: 'Share performance recording',
+  sharingUnavailable: 'File sharing is unavailable on this device.',
+  cacheUnavailable: 'The application cache is unavailable.',
+  truncated:
+    'Showing up to 100 traces, spans and marks, and 40 metric series. Search to narrow traces; export includes all retained events.',
+  overview: 'Summary',
+  tabs: 'Inspector views',
+  recordingSummary: 'Recording summary',
+  summary:
+    '{{traces}} traces · {{spans}} spans · {{marks}} marks · {{metrics}} metric samples loaded',
+  session: 'Session {{id}} · elapsed {{elapsed}} ms',
+  metricWindow:
+    'Showing {{displayed}} / {{retained}} loaded samples · {{start}}–{{end}} ms since recording start',
+  passed: 'PASS',
+  failed: 'FAIL',
+  scenarioResults: 'Scenario results',
+  scenarioNotice:
+    'Checks inspect retained native events; dropped or expired samples can fail a check.',
+  scenarioNested: 'Explicit parent hierarchy',
+  scenarioConcurrency: 'Overlapping spans with the same name',
+  scenarioCancelled: 'Cancelled outcome',
+  scenarioIdempotent: 'Repeated completion records once',
+  scenarioError: 'Error outcome',
+  scenarioMetrics: 'Native metric values',
+  openScenario: 'Open scenario trace',
+  timeline: 'Timeline',
+  issues: 'Issues: {{count}}',
+  noIssues: 'Nothing over budget in retained history.',
+  summaryScope:
+    'Issues compare retained events with local budgets, not production percentiles. Tap a topic to explore it.',
+  moreIssues: '{{count}} more in Explore',
+  issueValue: '{{value}} ms · budget {{budget}} ms',
+  notTracked: 'Not tracked',
+  quiet: 'No events yet',
+  topicStartup: 'Startup',
+  topicScreens: 'Screens',
+  topicNetwork: 'Network',
+  topicResponsiveness: 'Responsiveness',
+  topicErrors: 'Errors',
+  topicCustom: 'Custom spans',
+  headlineStartup: 'App ready {{value}} after tracer init',
+  headlineScreens: '{{count}} visits · p95 transition {{value}}',
+  headlineNetwork: '{{count}} requests · p95 {{value}}',
+  headlineResponsiveness: '{{count}} stalls over {{budget}} ms',
+  headlineErrors: '{{count}} errors',
+  headlineCustom: '{{count}} spans',
+  hintStartup: 'Call useAppReadyMetric(client, ready) from /react.',
+  hintScreens: 'Add createNavigationPlugin(navigationRef) from /plugins.',
+  hintNetwork: 'Add createNetworkPlugin() from /plugins.',
+  hintResponsiveness:
+    'Add createNativeMetricsPlugin(), Sentry frames, or runtimeMetrics: true.',
+  hintErrors: 'Add createErrorsPlugin() from /plugins.',
+  hintCustom: 'Use client.trace or native spans.',
+  issueSlowStartup: 'Slow startup',
+  issueSlowScreen: 'Slow screen',
+  issueSlowRequest: 'Slow request',
+  issueFailedRequest: 'Failed request',
+  issueStall: 'JS stall',
+  issueError: 'Error',
+  beforeNavigation: 'Before first screen',
+  liveAllActivity: 'All activity',
+  liveInspector: 'Inspector',
+  liveRequests: 'requests',
+  liveStalls: 'stalls',
+  liveErrors: 'errors',
+  liveEmpty:
+    'No activity on this screen yet. Use the app; events stream in here.',
+  topicResources: 'Resources',
+  headlineResources: 'CPU {{cpu}}% · {{memory}} MB',
+  hintResources: 'Add createNativeMetricsPlugin() from /plugins.',
+  issueUiStall: 'UI stall',
+  issueFrozenFrames: 'Frozen frames',
+  liveFlag: 'Flag',
+  liveShare: 'Share trace',
+  liveFlagged: 'Flagged',
+  share: 'Share',
+  more: 'More',
+  shareTitle: 'Share recording',
+  startNew: 'Start new recording',
+  frozen: 'Frozen',
+  topics: 'Topics',
+  sortBy: 'Sort: {{sort}}',
+  filter: 'Filter',
+  range: 'Range',
+  stat_latest: 'Latest',
+  stat_median: 'Median',
+  stat_p95: 'p95',
+  stat_min: 'Min',
+  stat_max: 'Max',
+  samples: 'Samples',
+  duration: 'Duration',
+  time: 'Time',
+  spanId: 'Span ID',
+  correlationId: 'Correlation ID',
+  attributeSearch: 'Search attributes',
+} as const
+export type InspectorLabels = { [K in keyof typeof defaultLabels]: string }
+export type InspectorLabelKey = keyof InspectorLabels
+export type InspectorTranslator = (
+  key: InspectorLabelKey,
+  values?: Record<string, unknown>
+) => string
+export const createTranslator =
+  (labels?: Partial<InspectorLabels>): InspectorTranslator =>
+  (key, values) =>
+    (labels?.[key] ?? defaultLabels[key]).replace(
+      /{{(\w+)}}/g,
+      (_, name: string) => String(values?.[name] ?? '')
+    )

package/src/react/native.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useState, type ReactNode } from 'react'
+import {
+  ActionSheetIOS,
+  Platform,
+  View,
+  type ColorValue,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { ActionSheet, type SheetOption } from './InspectorControls'
+
+/**
+ * Native building blocks with React Native fallbacks. Optional peers are required directly
+ * inside `try` so Metro treats them as optional; apps without them get the RN UI.
+ */
+type BottomTabs = typeof import('react-native-bottom-tabs').default
+type GlassModule = typeof import('expo-glass-effect')
+let NativeTabView: BottomTabs | undefined
+let glass: GlassModule | undefined
+try {
+  NativeTabView = require('react-native-bottom-tabs').default
+} catch {
+  NativeTabView = undefined
+}
+try {
+  glass = require('expo-glass-effect')
+} catch {
+  glass = undefined
+}
+const liquidGlass = (() => {
+  try {
+    return Platform.OS === 'ios' && !!glass?.isLiquidGlassAvailable()
+  } catch {
+    return false
+  }
+})()
+
+export interface MenuConfig {
+  title?: string
+  options: SheetOption[]
+  cancelLabel: string
+}
+/**
+ * `open(config)` shows a native action sheet on iOS (UIAlertController, Liquid Glass on
+ * iOS 26) and the RN sheet elsewhere; render `element` once in the calling component.
+ */
+export function useMenu() {
+  const [config, setConfig] = useState<MenuConfig>()
+  const open = useCallback((next: MenuConfig) => {
+    if (Platform.OS !== 'ios') return setConfig(next)
+    const enabled = next.options.filter((option) => !option.disabled)
+    const destructive = enabled.findIndex((option) => option.destructive)
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        title: next.title,
+        options: [
+          ...enabled.map(
+            (option) => `${option.selected ? '✓ ' : ''}${option.label}`
+          ),
+          next.cancelLabel,
+        ],
+        cancelButtonIndex: enabled.length,
+        destructiveButtonIndex: destructive >= 0 ? destructive : undefined,
+      },
+      (index) => enabled[index]?.onPress()
+    )
+  }, [])
+  const element = config ? (
+    <ActionSheet {...config} close={() => setConfig(undefined)} />
+  ) : null
+  return { open, element }
+}
+
+export interface NativeTab<K extends string> {
+  key: K
+  title: string
+  /** SF Symbol name for the native iOS tab bar. */
+  sfSymbol: string
+  badge?: string
+  render: () => ReactNode
+}
+/**
+ * Native tab bar (UITabBarController / Material) when react-native-bottom-tabs is
+ * installed; inactive screens are lazy and frozen so live ticks only render the visible tab.
+ */
+export function NativeTabs<K extends string>({
+  tabs,
+  value,
+  onChange,
+  tint,
+  fallback,
+}: {
+  tabs: NativeTab<K>[]
+  value: K
+  onChange: (key: K) => void
+  tint: ColorValue
+  fallback: (content: ReactNode) => ReactNode
+}) {
+  const index = Math.max(
+    0,
+    tabs.findIndex((tab) => tab.key === value)
+  )
+  // ponytail: iOS only. Android's Material tab bar needs a MaterialComponents app theme
+  // (crashes on AppCompat hosts) and image icons instead of SF Symbols.
+  if (!NativeTabView || Platform.OS !== 'ios')
+    return <>{fallback(tabs[index]?.render())}</>
+  return (
+    <NativeTabView
+      navigationState={{
+        index,
+        routes: tabs.map((tab) => ({
+          key: tab.key,
+          title: tab.title,
+          focusedIcon: { sfSymbol: tab.sfSymbol } as never,
+          badge: tab.badge,
+        })),
+      }}
+      onIndexChange={(next) => onChange(tabs[next].key)}
+      renderScene={({ route }) =>
+        tabs.find((tab) => tab.key === route.key)?.render() ?? null
+      }
+      getLazy={() => true}
+      getFreezeOnBlur={() => true}
+      getBadge={({ route }) => tabs.find((tab) => tab.key === route.key)?.badge}
+      minimizeBehavior="onScrollDown"
+      tabBarActiveTintColor={tint}
+      hapticFeedbackEnabled
+    />
+  )
+}
+
+/** Liquid Glass surface on iOS 26 (expo-glass-effect); a solid fallback elsewhere. */
+export function Glass({
+  style,
+  fallbackColor,
+  children,
+  interactive,
+}: {
+  style?: StyleProp<ViewStyle>
+  fallbackColor: ColorValue
+  children?: ReactNode
+  interactive?: boolean
+}) {
+  if (liquidGlass && glass) {
+    const { GlassView } = glass
+    return (
+      <GlassView
+        style={style}
+        glassEffectStyle="regular"
+        isInteractive={interactive}
+      >
+        {children}
+      </GlassView>
+    )
+  }
+  return (
+    <View style={[style, { backgroundColor: fallbackColor }]}>{children}</View>
+  )
+}