@userflow-tech/react-native 0.1.0

package/src/surfaces/absoluteFill.ts

@@ -0,0 +1,24 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Local stand-in for `StyleSheet.absoluteFillObject`, which React Native
+ * removed in 0.86 (only `StyleSheet.absoluteFill` survives).
+ *
+ * Do not go back to either RN export:
+ *
+ * - `absoluteFillObject` is `undefined` on >=0.86, and spreading `undefined`
+ *   yields `{}` with no error. Every flow surface silently dropped out of the
+ *   overlay and laid out in normal flow below the host's navigator instead.
+ * - `absoluteFill` is a plain object on 0.81/0.86, but older releases in our
+ *   supported range (`react-native >=0.74`) registered it as a numeric style
+ *   ID, so spreading it collapses to `{}` the same way.
+ *
+ * A local literal is the only form that behaves identically across the range.
+ */
+export const ABSOLUTE_FILL: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};

package/src/surfaces/assets/png.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: number;
+  export default value;
+}

package/src/surfaces/parseBackdropOpacity.ts

@@ -0,0 +1,13 @@
+/**
+ * Clamp theme `backdropOpacity` (wire Decimal string or number) to [0, 1].
+ */
+export function parseBackdropOpacity(value: string | number | undefined): number {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return Math.min(1, Math.max(0, value));
+  }
+  if (typeof value === 'string') {
+    const parsed = Number.parseFloat(value);
+    if (Number.isFinite(parsed)) return Math.min(1, Math.max(0, parsed));
+  }
+  return 0.4;
+}

package/src/surfaces/progress.ts

@@ -0,0 +1,37 @@
+import type { FlowStepFragment, FlowVersionFragment } from '@userflow-tech/protocol';
+
+export interface StepProgress {
+  /** 0-based index among visible (non-HIDDEN) steps, or -1 if unknown. */
+  index: number;
+  total: number;
+  /** 0–1 fraction for a filled progress bar; 0 when total is 0. */
+  fraction: number;
+}
+
+/**
+ * Progress among visible steps (HIDDEN excluded), matching web FlowContent:
+ * fraction = (index + 1) / total when the current step is found.
+ */
+export function resolveStepProgress(
+  version: FlowVersionFragment,
+  currentStepId: string | null | undefined,
+): StepProgress {
+  const visible = version.steps.filter(
+    (step: FlowStepFragment) => String(step.appearance).toUpperCase() !== 'HIDDEN',
+  );
+  const total = visible.length;
+  if (total === 0 || !currentStepId) {
+    return { index: -1, total, fraction: 0 };
+  }
+
+  const index = visible.findIndex((step) => step.id === currentStepId);
+  if (index < 0) {
+    return { index: -1, total, fraction: 0 };
+  }
+
+  return {
+    index,
+    total,
+    fraction: (index + 1) / total,
+  };
+}

package/src/surfaces/resolveCloseButtonColor.ts

@@ -0,0 +1,23 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+import { foregroundAlpha } from '../content/themeColor';
+
+/** Mobile modal dismiss icon — lighter than body text (design spec / web secondary chrome). */
+export const CLOSE_BUTTON_FOREGROUND_ALPHA = 0.5;
+
+function readString(theme: ThemeFragment, key: string): string | undefined {
+  const value = theme[key];
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+/**
+ * Web close uses `toolbarForegroundColor` (defaults to `mainForegroundColor`).
+ * RN applies {@link CLOSE_BUTTON_FOREGROUND_ALPHA} so the × reads as a tertiary control.
+ */
+export function resolveCloseButtonColor(theme: ThemeFragment): string {
+  const base =
+    readString(theme, 'toolbarForegroundColor') ??
+    readString(theme, 'mainForegroundColor') ??
+    theme.fontColor;
+  return foregroundAlpha(base, CLOSE_BUTTON_FOREGROUND_ALPHA);
+}

package/src/surfaces/resolveModalLayout.ts

@@ -0,0 +1,85 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+import type { JustifyContent } from '../content/types';
+
+/** Screen margin around the modal card (mobile design spec: 24–32px). */
+export const MODAL_VIEWPORT_PADDING = 24;
+
+/** Matches web `FlowChrome` narrow breakpoint for modal layout. */
+export const MODAL_COMPACT_LAYOUT_MAX_WIDTH = 800;
+
+export type ModalButtonsAlign = JustifyContent;
+
+function readNumber(theme: ThemeFragment, key: string, fallback: number): number {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+
+function readString(theme: ThemeFragment, key: string, fallback: string): string {
+  const value = theme[key];
+  return typeof value === 'string' && value.length > 0 ? value : fallback;
+}
+
+/**
+ * Web: step `width` overrides `theme.modalWidth`; card is clamped to the viewport
+ * (`FlowChrome`, `VIEWPORT_PADDING`). RN uses {@link MODAL_VIEWPORT_PADDING}.
+ */
+export function resolveModalCardMaxWidth(
+  theme: ThemeFragment,
+  stepWidth: number | null | undefined,
+  windowWidth: number,
+): number {
+  const themeModalWidth = readNumber(theme, 'modalWidth', 520);
+  const desiredWidth = stepWidth ?? themeModalWidth;
+  const maxInViewport = Math.max(0, windowWidth - 2 * MODAL_VIEWPORT_PADDING);
+  return Math.min(desiredWidth, maxInViewport);
+}
+
+export function resolveModalCenterPadding(insets: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}): {
+  paddingTop: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingRight: number;
+} {
+  return {
+    paddingTop: Math.max(MODAL_VIEWPORT_PADDING, insets.top + 8),
+    paddingBottom: Math.max(MODAL_VIEWPORT_PADDING, insets.bottom + 8),
+    paddingLeft: Math.max(MODAL_VIEWPORT_PADDING, insets.left + 8),
+    paddingRight: Math.max(MODAL_VIEWPORT_PADDING, insets.right + 8),
+  };
+}
+
+/**
+ * Max card height so landscape modals stay inside the viewport (scroll inside the card).
+ */
+export function resolveModalCardMaxHeight(
+  windowHeight: number,
+  centerPadding: { paddingTop: number; paddingBottom: number },
+): number {
+  return Math.max(0, windowHeight - centerPadding.paddingTop - centerPadding.paddingBottom);
+}
+
+/**
+ * Mobile spec: centered buttons on narrow viewports; end-aligned on tablet/desktop.
+ * Explicit theme `buttonHorizontalAlign` wins (same keys as web `getThemeRootStyles`).
+ */
+export function resolveModalButtonsAlign(
+  theme: ThemeFragment,
+  windowWidth: number,
+): ModalButtonsAlign {
+  const align = readString(theme, 'buttonHorizontalAlign', 'default');
+  if (align === 'left') return 'start';
+  if (align === 'right') return 'end';
+  if (align === 'center') return 'center';
+  return windowWidth < MODAL_COMPACT_LAYOUT_MAX_WIDTH ? 'center' : 'end';
+}

package/src/surfaces/resolveTooltipLayout.ts

@@ -0,0 +1,73 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+import type { ViewStyle } from 'react-native';
+
+import type { JustifyContent } from '../content/types';
+
+import {
+  MODAL_COMPACT_LAYOUT_MAX_WIDTH,
+  MODAL_VIEWPORT_PADDING,
+  resolveModalCenterPadding,
+} from './resolveModalLayout';
+
+/** Screen margin for anchored tooltips (mobile design spec: 24px). */
+export const TOOLTIP_VIEWPORT_PADDING = MODAL_VIEWPORT_PADDING;
+
+function readString(theme: ThemeFragment, key: string, fallback: string): string {
+  const value = theme[key];
+  return typeof value === 'string' && value.length > 0 ? value : fallback;
+}
+
+function readNumber(theme: ThemeFragment, key: string, fallback: number): number {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+
+/**
+ * Web: step `width` overrides `theme.tooltipWidth`; card is clamped to the viewport
+ * (`FlowChrome`, `VIEWPORT_PADDING`).
+ */
+export function resolveTooltipCardMaxWidth(
+  theme: ThemeFragment,
+  stepWidth: number | null | undefined,
+  windowWidth: number,
+): number {
+  const themeTooltipWidth = readNumber(theme, 'tooltipWidth', 350);
+  const desiredWidth = stepWidth ?? themeTooltipWidth;
+  const maxInViewport = Math.max(0, windowWidth - 2 * TOOLTIP_VIEWPORT_PADDING);
+  return Math.min(desiredWidth, maxInViewport);
+}
+
+/** Mobile spec: nearly full-width card with screen margins on narrow viewports. */
+export function resolveTooltipCardLayout(
+  cardMaxWidth: number,
+  windowWidth: number,
+): Pick<ViewStyle, 'maxWidth' | 'width'> {
+  if (windowWidth < MODAL_COMPACT_LAYOUT_MAX_WIDTH) {
+    return { maxWidth: cardMaxWidth, width: cardMaxWidth };
+  }
+  return { maxWidth: cardMaxWidth };
+}
+
+export function resolveTooltipCenterPadding(insets: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}): ReturnType<typeof resolveModalCenterPadding> {
+  return resolveModalCenterPadding(insets);
+}
+
+/**
+ * Web `--userflow-buttons-bubble-justify-content` (bubble + tooltip): default is end.
+ */
+export function resolveTooltipButtonsAlign(theme: ThemeFragment): JustifyContent {
+  const align = readString(theme, 'buttonHorizontalAlign', 'default');
+  if (align === 'left') return 'start';
+  if (align === 'center') return 'center';
+  return 'end';
+}

package/src/surfaces/safeArea.ts

@@ -0,0 +1,48 @@
+export interface EdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+type UseSafeAreaInsetsFn = () => EdgeInsets;
+
+let cachedHook: UseSafeAreaInsetsFn | null | undefined;
+
+/**
+ * Resolve `useSafeAreaInsets` from the optional peer `react-native-safe-area-context`.
+ * Returns a zero-inset hook when the peer is not installed.
+ */
+function resolveUseSafeAreaInsets(): UseSafeAreaInsetsFn {
+  if (cachedHook !== undefined) return cachedHook ?? (() => ZERO_INSETS);
+
+  if (typeof require !== 'function') {
+    cachedHook = null;
+    return () => ZERO_INSETS;
+  }
+
+  try {
+    // Optional peer — Expo / React Navigation apps usually have it.
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const mod = require('react-native-safe-area-context') as {
+      useSafeAreaInsets?: UseSafeAreaInsetsFn;
+    };
+    cachedHook = typeof mod.useSafeAreaInsets === 'function' ? mod.useSafeAreaInsets : null;
+  } catch {
+    cachedHook = null;
+  }
+
+  return cachedHook ?? (() => ZERO_INSETS);
+}
+
+/** Safe-area insets with a zero fallback when the optional peer is missing. */
+export function useUserflowSafeAreaInsets(): EdgeInsets {
+  return resolveUseSafeAreaInsets()();
+}
+
+/** @internal */
+export function resetSafeAreaInsetsCacheForTests(): void {
+  cachedHook = undefined;
+}

package/src/surfaces/themeChrome.ts

@@ -0,0 +1,126 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+import type { ViewStyle } from 'react-native';
+
+export type BubbleChromeKind = 'modal' | 'tooltip';
+
+export interface BubbleChrome {
+  backgroundColor: string;
+  borderRadius: number;
+  borderWidth: number;
+  borderColor: string;
+  notchSize: number;
+  /** Inner content padding (modal: theme `modalPadding` or 32; tooltip/bubble 24). */
+  contentPadding: number;
+  /**
+   * Outer shell — shadow + overflow. Tooltips keep overflow visible so the
+   * notch can sit outside the card bounds.
+   */
+  cardStyle: ViewStyle;
+  /**
+   * Opaque fill layer (bg + radius + optional border). Tooltip surfaces render
+   * the notch behind this so the diamond joins the card without a seam.
+   */
+  fillStyle: ViewStyle;
+  /**
+   * Web `filter: drop-shadow(…)` as RN shadow props. Only paints on a layer
+   * without `overflow: 'hidden'` — iOS clips the shadow along with the content.
+   */
+  shadowStyle: ViewStyle;
+}
+
+function readNumber(theme: ThemeFragment, key: string, fallback: number): number {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+
+function readString(theme: ThemeFragment, key: string, fallback: string): string {
+  const value = theme[key];
+  return typeof value === 'string' && value.length > 0 ? value : fallback;
+}
+
+/**
+ * Web theme-driven card chrome (FlowChrome / flow-host / bubble-frame) as the
+ * interim RN visual baseline until mobile design specs land.
+ *
+ * Optional fields (`bubbleBorderRadius`, `tooltipNotchSize`, …) are read from
+ * the theme index signature so curated ThemeFragment stays small.
+ */
+export function resolveBubbleChrome(
+  theme: ThemeFragment,
+  kind: BubbleChromeKind = 'modal',
+): BubbleChrome {
+  const borderRadius = readNumber(theme, 'bubbleBorderRadius', 10);
+  const borderWidth = Math.max(0, readNumber(theme, 'bubbleBorderWidth', 0));
+  const borderColor = readString(theme, 'bubbleBorderColor', 'transparent');
+  // Web default tooltipNotchSize is 10.
+  const notchSize = Math.max(0, readNumber(theme, 'tooltipNotchSize', 10));
+  const contentPadding =
+    kind === 'tooltip' ? 24 : Math.max(0, readNumber(theme, 'modalPadding', 32));
+
+  // Web often leaves `backgroundColor` empty and paints via `mainBackgroundColor`.
+  // An empty string makes RN cards fully transparent (missing-target UI looks broken).
+  const backgroundColor =
+    readString(theme, 'backgroundColor', '') ||
+    readString(theme, 'mainBackgroundColor', '') ||
+    '#ffffff';
+
+  // Skip zero-width borders — RN can still paint a hairline when width is 0.
+  const borderStyle: ViewStyle =
+    borderWidth > 0
+      ? {
+          borderWidth,
+          borderColor,
+        }
+      : {};
+
+  // Approximate web `bubble-drop-shadow()` / Safari fallback in flow-host.styl:
+  // drop-shadow(0 2px 9px rgba(0,0,0,0.18)).
+  const shadowStyle: ViewStyle = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 9,
+    elevation: 8,
+  };
+
+  const fillStyle: ViewStyle = {
+    backgroundColor,
+    borderRadius,
+    ...borderStyle,
+    overflow: 'hidden',
+  };
+
+  const cardStyle: ViewStyle = {
+    // Modal: shadow shell only — ModalSurface wraps content in `fillStyle` so
+    // iOS does not clip the shadow (same idea as web drop-shadow on outline).
+    // Tooltip: transparent shell; TooltipBubble owns the shared shadow.
+    ...(kind === 'modal'
+      ? {
+          ...shadowStyle,
+          borderRadius,
+          backgroundColor: 'transparent',
+          overflow: 'visible',
+        }
+      : {
+          backgroundColor: 'transparent',
+          overflow: 'visible',
+        }),
+  };
+
+  return {
+    backgroundColor,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    notchSize,
+    contentPadding,
+    cardStyle,
+    fillStyle,
+    shadowStyle,
+  };
+}

package/src/surfaces/tooltip/TooltipBubble.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { ABSOLUTE_FILL } from '../absoluteFill';
+import type { BubbleChrome } from '../themeChrome';
+
+import { TooltipNotch } from './TooltipNotch';
+import type { NotchPosition } from './computeTooltipPosition';
+
+export interface TooltipBubbleProps {
+  chrome: BubbleChrome;
+  notchPosition: NotchPosition;
+  style?: StyleProp<ViewStyle>;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Tooltip chrome shell: diamond notch + card fill sharing one shadow family.
+ *
+ * Web draws card and notch as a single silhouette under `filter: drop-shadow`.
+ * RN has no silhouette filter, so the card uses a dedicated shadow layer and
+ * `elevation` on the fill (Android). The notch itself is not shadowed — a
+ * second blurred shadow on the rotated square leaves a gray band at the pointer
+ * base when it points up into the anchor. An inset fill diamond on top erases
+ * that seam (and bordered stroke gaps) without clipping the outer tip.
+ */
+export function TooltipBubble({
+  chrome,
+  notchPosition,
+  style,
+  onLayout,
+  children,
+}: TooltipBubbleProps): React.ReactElement {
+  const showNotch = chrome.notchSize > 0;
+  const bordered = chrome.borderWidth > 0;
+  // Web paints the notch with border color when bordered, otherwise the card
+  // fill. Never use literal `transparent` — that hides the pointer entirely.
+  const notchColor =
+    bordered && chrome.borderColor !== 'transparent' ? chrome.borderColor : chrome.backgroundColor;
+  // Android draws by elevation, so every layer above the card shadow has to be
+  // raised with it or the opaque shadow layer paints over the card body.
+  const elevation = chrome.shadowStyle.elevation ?? 0;
+  const notchProps = {
+    notchSize: chrome.notchSize,
+    ...(notchPosition.top !== undefined ? { top: notchPosition.top } : {}),
+    ...(notchPosition.bottom !== undefined ? { bottom: notchPosition.bottom } : {}),
+    ...(notchPosition.left !== undefined ? { left: notchPosition.left } : {}),
+    ...(notchPosition.right !== undefined ? { right: notchPosition.right } : {}),
+  };
+
+  return (
+    <View
+      testID="userflow-tooltip-card"
+      accessibilityViewIsModal
+      pointerEvents="auto"
+      onLayout={onLayout}
+      style={[styles.shell, style]}
+    >
+      {/* iOS-only: Android gets the same shadow from the fill's elevation. */}
+      <View
+        pointerEvents="none"
+        style={[
+          styles.cardShadow,
+          chrome.shadowStyle,
+          {
+            elevation: 0,
+            borderRadius: chrome.borderRadius,
+            backgroundColor: chrome.backgroundColor,
+          },
+        ]}
+      />
+
+      {showNotch ? (
+        <TooltipNotch {...notchProps} notchColor={notchColor} style={styles.notchLayer} />
+      ) : null}
+
+      <View style={[chrome.fillStyle, styles.fill, { elevation }]}>{children}</View>
+
+      {/* Inset fill diamond above the card body: hides the notch shadow/base seam
+          where the pointer meets the card (especially visible on upward pointers).
+          Bordered themes use borderWidth; borderless themes still need ≥1px overlap. */}
+      {showNotch ? (
+        <TooltipNotch
+          {...notchProps}
+          notchColor={chrome.backgroundColor}
+          inset={Math.max(chrome.borderWidth, 1)}
+          style={[styles.notchSeamCover, { elevation }]}
+          testID="userflow-tooltip-notch-seam"
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  shell: {
+    position: 'relative',
+    backgroundColor: 'transparent',
+    overflow: 'visible',
+    maxHeight: '80%',
+    flexShrink: 1,
+  },
+  cardShadow: {
+    ...ABSOLUTE_FILL,
+    zIndex: 0,
+  },
+  notchLayer: {
+    zIndex: 1,
+  },
+  fill: {
+    zIndex: 2,
+  },
+  notchSeamCover: {
+    zIndex: 3,
+  },
+});

package/src/surfaces/tooltip/TooltipCutout.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+
+import { ABSOLUTE_FILL } from '../absoluteFill';
+
+export interface HighlightRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export interface TooltipCutoutProps {
+  targetRect: HighlightRect;
+  backdropColor: string;
+  backdropOpacity: number;
+  /**
+   * When true, a transparent capture layer covers only the highlight hole so
+   * the tooltip target cannot be pressed. Dim bands stay visual-only either way.
+   */
+  targetBlocked: boolean;
+}
+
+/**
+ * Four-block dimmed cutout around the padded target (web tooltip backdrop).
+ *
+ * Dim bands use `pointerEvents="none"` so touches reach the app — React Native
+ * cannot block taps while allowing scroll the way web's `mousedown`-only
+ * swallow does. When `targetBlocked`, only the hole (target) is covered with a
+ * transparent `pointerEvents="auto"` layer.
+ *
+ * MVP note: each block uses its own translucent opacity. That matches non-overlapping
+ * tiles well, but can look slightly uneven vs web’s single shadow-hole when other
+ * translucent overlays stack. Acceptable for Phase 3; a single masked layer can come later.
+ */
+export function TooltipCutout({
+  targetRect,
+  backdropColor,
+  backdropOpacity,
+  targetBlocked,
+}: TooltipCutoutProps): React.ReactElement {
+  const { width: sw, height: sh } = Dimensions.get('window');
+  const { top, left, width, height } = targetRect;
+  const right = left + width;
+  const bottom = top + height;
+  const blockStyle = { backgroundColor: backdropColor, opacity: backdropOpacity };
+
+  return (
+    <View style={ABSOLUTE_FILL} pointerEvents="box-none" testID="userflow-tooltip-cutout">
+      <View
+        pointerEvents="none"
+        testID="userflow-tooltip-cutout-top"
+        style={[styles.block, blockStyle, { top: 0, left: 0, width: sw, height: Math.max(0, top) }]}
+      />
+      <View
+        pointerEvents="none"
+        testID="userflow-tooltip-cutout-left"
+        style={[
+          styles.block,
+          blockStyle,
+          { top: Math.max(0, top), left: 0, width: Math.max(0, left), height: Math.max(0, height) },
+        ]}
+      />
+      <View
+        pointerEvents="none"
+        testID="userflow-tooltip-cutout-right"
+        style={[
+          styles.block,
+          blockStyle,
+          {
+            top: Math.max(0, top),
+            left: Math.max(0, right),
+            width: Math.max(0, sw - right),
+            height: Math.max(0, height),
+          },
+        ]}
+      />
+      <View
+        pointerEvents="none"
+        testID="userflow-tooltip-cutout-bottom"
+        style={[
+          styles.block,
+          blockStyle,
+          { top: Math.max(0, bottom), left: 0, width: sw, height: Math.max(0, sh - bottom) },
+        ]}
+      />
+      {targetBlocked ? (
+        <View
+          pointerEvents="auto"
+          testID="userflow-tooltip-target-block"
+          style={[
+            styles.block,
+            {
+              top,
+              left,
+              width: Math.max(0, width),
+              height: Math.max(0, height),
+            },
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  block: {
+    position: 'absolute',
+  },
+});