expo-interface 0.1.1 → 0.3.0

package/src/menu/index.android.tsx

@@ -1,18 +1,21 @@
 import type {MenuItem, MenuProps} from './types';
 
 import {Fragment, useState} from 'react';
-import {DropdownMenu, DropdownMenuItem, HorizontalDivider, Icon, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {Box, DropdownMenu, DropdownMenuItem, HorizontalDivider, Icon, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {background, clip, Shapes, size as sizeModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {Button} from '../button';
 import {useColor} from '../theme';
 
 const ICON_SIZE = 20;
+const SWATCH_SIZE = 16;
 
 /**
  * Android anchors a Material 3 `DropdownMenu` to the kit's `Button`. Entries
- * are `DropdownMenuItem`s with an optional drawable leading icon; destructive
- * items use the theme danger color.
+ * are `DropdownMenuItem`s with an optional drawable leading icon (or a color
+ * dot), a trailing check when active; destructive items use the theme
+ * danger color.
  */
-export function Menu({label, icon, items, testID, ...button}: MenuProps) {
+export function Menu({label, icon, items, testID, trigger: _trigger, ...button}: MenuProps) {
   const [expanded, setExpanded] = useState(false);
   return (
     <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
@@ -30,7 +33,7 @@ export function Menu({label, icon, items, testID, ...button}: MenuProps) {
   );
 }
 
-/** Compose `DropdownMenu.Items` shared by `Menu` and `ContextMenu`. */
+/** Compose `DropdownMenu.Items` shared by `Menu`, `ContextMenu` and `Fab`. */
 export function MenuItems({items, onClose}: {items: MenuItem[]; onClose: () => void}) {
   const colors = useMaterialColors();
   const destructive = useColor('destructive');
@@ -39,24 +42,34 @@ export function MenuItems({items, onClose}: {items: MenuItem[]; onClose: () => v
     <DropdownMenu.Items>
       {items.map((item, index) => {
         const color = item.role === 'destructive' ? destructive : colors.onSurface;
+        const contentColor = item.disabled ? colors.onSurfaceVariant : color;
         return (
           <Fragment key={index}>
             {item.separator && index > 0 ? <HorizontalDivider color={separator}/> : null}
             <DropdownMenuItem
               enabled={!item.disabled}
-              elementColors={{textColor: color, leadingIconColor: color}}
+              elementColors={{textColor: color, leadingIconColor: color, trailingIconColor: color}}
               onClick={item.disabled ? undefined : () => {
                 onClose();
                 item.onPress?.();
               }}>
-              {item.icon?.drawable ? (
+              {item.swatch ? (
                 <DropdownMenuItem.LeadingIcon>
-                  <Icon source={item.icon.drawable} size={ICON_SIZE} tint={item.disabled ? colors.onSurfaceVariant : color}/>
+                  <Box modifiers={[sizeModifier(SWATCH_SIZE, SWATCH_SIZE), clip(Shapes.Circle), background(item.swatch)]}/>
+                </DropdownMenuItem.LeadingIcon>
+              ) : item.icon?.drawable ? (
+                <DropdownMenuItem.LeadingIcon>
+                  <Icon source={item.icon.drawable} size={ICON_SIZE} tint={contentColor}/>
                 </DropdownMenuItem.LeadingIcon>
               ) : null}
               <DropdownMenuItem.Text>
-                <Text color={item.disabled ? colors.onSurfaceVariant : color}>{item.label}</Text>
+                <Text color={contentColor}>{item.label}</Text>
               </DropdownMenuItem.Text>
+              {item.active ? (
+                <DropdownMenuItem.TrailingIcon>
+                  <Text color={contentColor}>✓</Text>
+                </DropdownMenuItem.TrailingIcon>
+              ) : null}
             </DropdownMenuItem>
           </Fragment>
         );

package/src/menu/index.ios.tsx

@@ -2,7 +2,7 @@ import type {MenuItem, MenuProps} from './types';
 import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
 
 import {Fragment} from 'react';
-import {Button, Divider, Menu as SwiftUIMenu} from '@expo/ui/swift-ui';
+import {Button, Divider, Menu as SwiftUIMenu, Toggle} from '@expo/ui/swift-ui';
 import {buttonBorderShape, buttonStyle, controlSize, disabled as disabledMod, labelStyle, tint} from '@expo/ui/swift-ui/modifiers';
 import {iosSymbol, swiftBorderShape, swiftControlSize} from '../button/shared';
 import {useColor} from '../theme';
@@ -16,7 +16,8 @@ const VARIANT_STYLE = {
 /**
  * iOS renders SwiftUI's `Menu`, styled with the same `buttonStyle` / `tint`
  * mapping as the kit's `Button` so the trigger matches. Entries are SwiftUI
- * `Button`s (with SF Symbol and `destructive` role) and `Divider`s.
+ * `Button`s (with SF Symbol and `destructive` role), checked `Toggle`s for
+ * active entries, and `Divider`s.
  */
 export function Menu({
   label,
@@ -26,15 +27,18 @@ export function Menu({
   size = 'medium',
   shape,
   color,
+  tone = 'accent',
   hideLabel,
   disabled,
   testID,
 }: MenuProps) {
   const themeTint = useColor('tint');
+  const themeLabel = useColor('label');
+  const accent = color ?? (variant === 'text' && tone === 'label' ? themeLabel : themeTint);
   const modifiers: ViewModifier[] = [
     buttonStyle(VARIANT_STYLE[variant]),
     controlSize(swiftControlSize(size)),
-    tint(color ?? themeTint),
+    tint(accent),
   ];
   if (shape) modifiers.push(buttonBorderShape(swiftBorderShape(shape)));
   if (hideLabel && icon) modifiers.push(labelStyle('iconOnly'));
@@ -51,20 +55,31 @@ export function Menu({
   );
 }
 
-/** SwiftUI menu entries shared by `Menu` and `ContextMenu`. */
+/** SwiftUI menu entries shared by `Menu`, `ContextMenu` and `Fab`. */
 export function MenuItems({items}: {items: MenuItem[]}) {
   return (
     <>
       {items.map((item, index) => (
         <Fragment key={index}>
           {item.separator && index > 0 ? <Divider/> : null}
-          <Button
-            label={item.label}
-            systemImage={item.icon ? iosSymbol(item.icon) : undefined}
-            role={item.role === 'destructive' ? 'destructive' : 'default'}
-            onPress={item.onPress}
-            modifiers={item.disabled ? [disabledMod(true)] : undefined}
-          />
+          {item.active ? (
+            // A checked toggle is how a SwiftUI menu shows the current state.
+            <Toggle
+              isOn
+              label={item.label}
+              systemImage={item.icon ? iosSymbol(item.icon) : undefined}
+              onIsOnChange={() => item.onPress?.()}
+              modifiers={item.disabled ? [disabledMod(true)] : undefined}
+            />
+          ) : (
+            <Button
+              label={item.label}
+              systemImage={item.icon ? iosSymbol(item.icon) : undefined}
+              role={item.role === 'destructive' ? 'destructive' : 'default'}
+              onPress={item.onPress}
+              modifiers={item.disabled ? [disabledMod(true)] : undefined}
+            />
+          )}
         </Fragment>
       ))}
     </>

package/src/menu/index.tsx

@@ -2,28 +2,44 @@ import './menu.css';
 import type {CSSProperties} from 'react';
 import type {MenuProps} from './types';
 import {useId, useRef} from 'react';
+import {SymbolView} from 'expo-symbols';
 import {Button} from '../button';
+import {SIZE_ICON} from '../button/shared';
 import {MenuList, menuIdent} from './list';
 
 /**
- * On web the trigger is the kit's `<button>` with a `popovertarget` pointing
- * at the entries' native `popover`, so opening, closing, light dismiss and
+ * On web the trigger is the kit's `<button>` (or, with `trigger="link"`, a
+ * text link like the tab bar's tabs) with a `popovertarget` pointing at the
+ * entries' native `popover`, so opening, closing, light dismiss and
  * `aria-expanded` are all handled by the browser. The wrapper carries the
  * `anchor-name` that CSS anchor positioning places the popup against.
  */
-export function Menu({label, icon, items, testID, ...button}: MenuProps) {
+export function Menu({label, icon, items, trigger = 'button', testID, ...button}: MenuProps) {
   const ident = menuIdent(useId());
   const anchor = `--${ident}`;
   const wrapper = useRef<HTMLSpanElement>(null);
   return (
     <span ref={wrapper} className="ui-menu" style={{anchorName: anchor} as CSSProperties}>
-      <Button
-        {...button}
-        label={label}
-        prefixIcon={icon}
-        popoverTarget={ident}
-        testID={testID}
-      />
+      {trigger === 'link' ? (
+        <button
+          type="button"
+          className="ui-menu__link"
+          disabled={button.disabled}
+          popoverTarget={ident}
+          data-testid={testID}
+          aria-label={button.hideLabel ? label : undefined}>
+          {icon ? <SymbolView name={icon.symbol} size={SIZE_ICON[button.size ?? 'medium']} tintColor="currentColor"/> : null}
+          {button.hideLabel ? null : <span>{label}</span>}
+        </button>
+      ) : (
+        <Button
+          {...button}
+          label={label}
+          prefixIcon={icon}
+          popoverTarget={ident}
+          testID={testID}
+        />
+      )}
       <MenuList id={ident} items={items} anchor={anchor} anchorRef={wrapper}/>
     </span>
   );

package/src/menu/list.tsx

@@ -27,17 +27,19 @@ interface MenuListProps {
   position?: {x: number; y: number} | null;
   /** Exposes the popover element so callers can `showPopover()` programmatically. */
   popoverRef?: React.RefObject<HTMLDivElement | null>;
+  /** Called when the popover closes (light dismiss, Escape, or a pick). */
+  onClose?: () => void;
 }
 
 /**
- * Web `role="menu"` popup shared by `Menu` and `ContextMenu`, rendered as a
- * native `popover="auto"` element. The browser handles the top layer, light
- * dismiss (outside click / Escape) and the trigger's `aria-expanded`; every
- * item carries `popovertargetaction="hide"` so picking one closes the menu
- * declaratively. Placement is CSS anchor positioning (see `menu.css`), with a
- * measured fallback for engines without it.
+ * Web `role="menu"` popup shared by `Menu`, `ContextMenu` and `Fab`, rendered
+ * as a native `popover="auto"` element. The browser handles the top layer,
+ * light dismiss (outside click / Escape) and the trigger's `aria-expanded`;
+ * every item carries `popovertargetaction="hide"` so picking one closes the
+ * menu declaratively. Placement is CSS anchor positioning (see `menu.css`),
+ * with a measured fallback for engines without it.
  */
-export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: MenuListProps) {
+export function MenuList({id, items, anchor, anchorRef, position, popoverRef, onClose}: MenuListProps) {
   const localRef = useRef<HTMLDivElement>(null);
   const ref = popoverRef ?? localRef;
   const anchored = !!anchor && !position;
@@ -51,7 +53,10 @@ export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: M
 
   const onToggle = (event: ToggleEvent<HTMLDivElement>) => {
     const popover = event.currentTarget;
-    if (event.newState !== 'open') return;
+    if (event.newState !== 'open') {
+      onClose?.();
+      return;
+    }
     // Fallback placement: below the trigger, right-aligned, kept on screen.
     if (anchored && !ANCHOR_SUPPORTED && anchorRef?.current) {
       const rect = anchorRef.current.getBoundingClientRect();
@@ -83,13 +88,23 @@ export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: M
           <button
             type="button"
             role="menuitem"
-            className={['ui-menu__item', item.role === 'destructive' && 'ui-menu__item--destructive'].filter(Boolean).join(' ')}
+            aria-current={item.active ? 'true' : undefined}
+            className={[
+              'ui-menu__item',
+              item.role === 'destructive' && 'ui-menu__item--destructive',
+              item.active && 'ui-menu__item--active',
+            ].filter(Boolean).join(' ')}
             disabled={item.disabled}
             popoverTarget={id}
             popoverTargetAction="hide"
             onClick={item.onPress}>
-            {item.icon ? <SymbolView name={item.icon.symbol} size={ICON_SIZE} tintColor="currentColor"/> : null}
+            {item.swatch ? (
+              <span className="ui-menu__swatch" style={{background: item.swatch}} aria-hidden="true"/>
+            ) : item.icon ? (
+              <SymbolView name={item.icon.symbol} size={ICON_SIZE} tintColor="currentColor"/>
+            ) : null}
             <span>{item.label}</span>
+            {item.active ? <span className="ui-menu__check" aria-hidden="true">✓</span> : null}
           </button>
         </div>
       ))}

package/src/menu/menu.css

@@ -9,6 +9,38 @@
   display: inline-flex;
 }
 
+/* The `link` trigger: a text link like the tab bar's tabs, in the tint. */
+.ui-menu__link {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-tint);
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ui-menu__link:hover:not(:disabled),
+.ui-menu__link:focus-visible {
+  opacity: 0.7;
+  outline: none;
+}
+
+.ui-menu__link:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .ui-menu__list {
   box-sizing: border-box;
   min-width: 200px;
@@ -72,6 +104,26 @@
   color: var(--color-destructive);
 }
 
+/* The current state: highlighted like a hover, with a tick at the trailing edge. */
+.ui-menu__item--active {
+  background: var(--color-background-selected);
+}
+
+.ui-menu__check {
+  margin-inline-start: auto;
+  padding-inline-start: 12px;
+  font-weight: 600;
+}
+
+/* A color dot in place of the icon, for a palette. */
+.ui-menu__swatch {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--color-separator);
+}
+
 .ui-menu__separator {
   height: 1px;
   margin: 6px 4px;

package/src/menu/types.ts

@@ -2,12 +2,24 @@ import type {ReactNode} from 'react';
 import type {IconToken} from '../icons';
 import type {ButtonProps} from '../button/types';
 
-/** One entry of a `Menu` / `ContextMenu`. */
+/** One entry of a `Menu` / `ContextMenu` / `Fab` menu. */
 export interface MenuItem {
   /** Item text. */
   label: string;
   /** Leading icon. */
   icon?: IconToken;
+  /**
+   * A color dot (`#rrggbb`) in place of the icon, for a palette. Drawn on
+   * Android and web; iOS menus render images monochrome, so the dot is not
+   * shown there.
+   */
+  swatch?: string;
+  /**
+   * The item is the current state (the block's kind, the sort order): a
+   * check mark. SwiftUI shows it as a checked `Toggle` item, Compose as a
+   * trailing check, the web popup as a tick.
+   */
+  active?: boolean;
   /**
    * `destructive` renders the item in the danger color.
    * @default 'default'
@@ -21,6 +33,9 @@ export interface MenuItem {
   onPress?: () => void;
 }
 
+/** How the web `Menu` trigger looks. */
+export type MenuTrigger = 'button' | 'link';
+
 /**
  * Cross-platform dropdown menu opened from a button.
  *
@@ -28,17 +43,30 @@ export interface MenuItem {
  * `DropdownMenu` on Android, and a `role="menu"` popup on web. The trigger
  * looks like the kit's `Button` and takes the same styling props.
  */
-export interface MenuProps extends Pick<ButtonProps, 'variant' | 'size' | 'shape' | 'color' | 'hideLabel' | 'disabled'> {
+export interface MenuProps extends Pick<ButtonProps, 'variant' | 'size' | 'shape' | 'color' | 'tone' | 'hideLabel' | 'disabled'> {
   /** Trigger text (kept for accessibility when `hideLabel` is set). */
   label: string;
   /** Trigger icon. */
   icon?: IconToken;
   /** Entries shown when the menu opens. */
   items: MenuItem[];
+  /**
+   * Web only: `button` renders the kit's button, `link` a text link like the
+   * tab bar's tabs (the icon and the label in the tint), for a menu that
+   * sits in a bar.
+   * @default 'button'
+   */
+  trigger?: MenuTrigger;
   /** Identifier used to locate the trigger in end-to-end tests. */
   testID?: string;
 }
 
+/** A point a `ContextMenu` opens at, in the coordinates of its content. */
+export interface MenuPoint {
+  x: number;
+  y: number;
+}
+
 /**
  * Cross-platform context menu attached to arbitrary content.
  *
@@ -55,6 +83,17 @@ export interface ContextMenuProps {
   onPress?: () => void;
   /** Disables the menu. */
   disabled?: boolean;
+  /**
+   * Opens the menu at this point whenever it changes, so a canvas can open
+   * it where it says it was asked for (a right click it received itself, a
+   * press on a block's grip). Relative to the content's top-left corner on
+   * Android and web (web also accepts viewport coordinates for content that
+   * fills it). iOS has no menu at a point: the long-press stays the only
+   * trigger there. Pair with `onDismiss` to clear it once the menu closes.
+   */
+  at?: MenuPoint | null;
+  /** Called when a menu opened by `at` (or a gesture) closes. */
+  onDismiss?: () => void;
   /** Identifier used to locate the trigger in end-to-end tests. */
   testID?: string;
 }

package/src/progress/progress.css

@@ -8,6 +8,15 @@
   -webkit-appearance: none;
 }
 
+/*
+ * With `appearance: none` Chromium lays the bar out as an inline-block on a
+ * line box, so the value only paints about half the track height. Flex
+ * stretches the bar (and its value) to the full 6px.
+ */
+.ui-progress::-webkit-meter-inner-element {
+  display: flex;
+}
+
 .ui-progress::-webkit-meter-bar {
   border: none;
   border-radius: 999px;

package/src/scheme.ts

@@ -0,0 +1,140 @@
+import type {ColorSchemeName} from 'react-native';
+import {useSyncExternalStore} from 'react';
+import {Appearance, Platform} from 'react-native';
+import {colors} from './theme';
+
+/** The scheme the app is drawn in. */
+export type ColorScheme = 'light' | 'dark';
+
+/** What an app asks for: the system's scheme, or one forced by the user. */
+export type ColorSchemeMode = 'system' | ColorScheme;
+
+/**
+ * `localStorage` key under which `setColorScheme` keeps a forced scheme on
+ * web, read back by `getThemeBootScript` before the bundle runs.
+ */
+export const SCHEME_STORAGE_KEY = 'expo-interface:scheme';
+
+type Listener = (preferences: {colorScheme: ColorSchemeName}) => void;
+
+/**
+ * Web: react-native-web's `Appearance` only mirrors the `prefers-color-scheme`
+ * media query and has no `setColorScheme`. Its two methods are replaced at
+ * load: `getColorScheme` answers the forced scheme while one is set, and the
+ * change listeners (what React Native's `useColorScheme`, `@expo/ui`'s `Host`
+ * and the kit's `useColorScheme` subscribe through) hear a forced change as
+ * well as a system one.
+ */
+let forced: ColorScheme | null = null;
+const listeners = new Set<Listener>();
+let system: Pick<typeof Appearance, 'getColorScheme' | 'addChangeListener'> | undefined;
+
+function patchAppearance() {
+  if (system) return;
+  const original = {
+    getColorScheme: Appearance.getColorScheme.bind(Appearance),
+    addChangeListener: Appearance.addChangeListener.bind(Appearance),
+  };
+  system = original;
+  Appearance.getColorScheme = () => forced ?? original.getColorScheme();
+  Appearance.addChangeListener = (listener: Listener) => {
+    listeners.add(listener);
+    // A system change is only news while the scheme follows the system.
+    const subscription = original.addChangeListener(preferences => {
+      if (!forced) listener(preferences);
+    });
+    return {
+      remove() {
+        listeners.delete(listener);
+        subscription.remove();
+      },
+    };
+  };
+}
+
+if (Platform.OS === 'web') patchAppearance();
+
+const subscribe = (onChange: () => void) => {
+  const subscription = Appearance.addChangeListener(onChange);
+  return () => subscription.remove();
+};
+
+const snapshot = (): ColorScheme => (Appearance.getColorScheme() === 'dark' ? 'dark' : 'light');
+
+/**
+ * The color scheme as an external store: `'light'` or `'dark'`, never
+ * unspecified. React Native's own `useColorScheme` re-subscribes on every
+ * render; on web, where the change is a `matchMedia` event, an ancestor that
+ * re-renders during that event (the router's screens do) makes the hook drop
+ * and re-add its listener mid-dispatch, and the event never reaches it. One
+ * stable subscription does not. Follows `setColorScheme` on every platform.
+ */
+export function useColorScheme(): ColorScheme {
+  return useSyncExternalStore(subscribe, snapshot, snapshot);
+}
+
+const toKebab = (token: string) => token.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`);
+
+/**
+ * Forces the color scheme, or follows the system again.
+ *
+ * - iOS and Android: `Appearance.setColorScheme`, so `useColorScheme`, the
+ *   kit's `useColor` and every native control follow.
+ * - Web: the palette of the forced scheme is written inline on the root
+ *   element as the `--color-*` variables (`tint`/`onTint` are left to
+ *   `AccentProvider`), `color-scheme` is set so form controls and scrollbars
+ *   follow, `data-theme` is set for `@expo/ui`'s own styles, the choice is
+ *   saved under `storageKey` for `getThemeBootScript`, and the `Appearance`
+ *   listeners hear the change.
+ */
+export function setColorScheme(mode: ColorSchemeMode, storageKey = SCHEME_STORAGE_KEY): void {
+  if (Platform.OS !== 'web') {
+    Appearance.setColorScheme(mode === 'system' ? 'unspecified' : mode);
+    return;
+  }
+  patchAppearance();
+  forced = mode === 'system' ? null : mode;
+  if (typeof document !== 'undefined') {
+    const root = document.documentElement;
+    for (const token of Object.keys(colors.light) as (keyof typeof colors.light)[]) {
+      if (token === 'tint' || token === 'onTint') continue;
+      const name = `--color-${toKebab(token)}`;
+      if (forced) root.style.setProperty(name, colors[forced][token]);
+      else root.style.removeProperty(name);
+    }
+    root.style.colorScheme = forced ?? '';
+    if (forced) root.dataset.theme = forced;
+    else delete root.dataset.theme;
+  }
+  try {
+    if (forced) localStorage.setItem(storageKey, forced);
+    else localStorage.removeItem(storageKey);
+  } catch {
+    // Storage may be unavailable (privacy mode, server render); the scheme still applies.
+  }
+  const colorScheme: ColorSchemeName = forced ?? system!.getColorScheme() ?? 'light';
+  for (const listener of listeners) listener({colorScheme});
+}
+
+/**
+ * The scheme forced by `setColorScheme` on web, or `'system'`. Natively the
+ * forced scheme is `Appearance`'s own and this always answers `'system'`.
+ */
+export function getColorSchemeMode(): ColorSchemeMode {
+  return forced ?? 'system';
+}
+
+/**
+ * Inline script for `+html.tsx`: before the bundle runs, applies a scheme
+ * saved by `setColorScheme` to the root element (`data-theme` and
+ * `color-scheme`), so the first paint of the static HTML is already in that
+ * scheme; `getThemeCSS` carries the matching `:root[data-theme]` palettes.
+ * A system scheme needs nothing: the variables switch on the media query.
+ *
+ * ```tsx
+ * <script dangerouslySetInnerHTML={{__html: getThemeBootScript()}}/>
+ * ```
+ */
+export function getThemeBootScript(storageKey = SCHEME_STORAGE_KEY): string {
+  return `(function(){try{var t=localStorage.getItem(${JSON.stringify(storageKey)});if(t==='light'||t==='dark'){document.documentElement.dataset.theme=t;document.documentElement.style.colorScheme=t;}}catch(e){}})();`;
+}

package/src/screen/header.tsx

@@ -21,6 +21,7 @@ export function ScreenHeader({title, onBack, trailing}: ScreenHeaderProps) {
         {onBack ? (
           <Pressable
             onPress={onBack}
+            role="button"
             accessibilityLabel="Go back"
             style={styles.back}>
             <SymbolView