Marker

InstallationCopy Anchor Link

Marker ships with the library — install it once, then import:

import { Marker } from "@delacour/react-native-ui/marker";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add marker

UsageCopy Anchor Link

import { Icon } from "@/components/ui/icon";
import { IconMagnifyingGlass } from "@/lib/icons/central";
import { Marker } from "@/components/ui/marker";
import { View } from "react-native";

export default function Example() {
  return (
    <View className="flex-1 justify-center p-4">
      <Marker>
        <Marker.Icon>
          <Icon icon={IconMagnifyingGlass} />
        </Marker.Icon>
        <Marker.Content>Explored 4 files</Marker.Content>
      </Marker>
    </View>
  );
}

VariantsCopy Anchor Link

default is a bare row, border a hairline capsule for closing a section, separator a label ruled off to both edges for day breaks.

<Marker>Explored 4 files</Marker>
<Marker variant="border">Task complete</Marker>
<Marker variant="separator">Yesterday</Marker>

PressableCopy Anchor Link

With no onPress and no onLongPress a marker is a plain View, read as text; give it either and it becomes a Pressable announced as a button.

<Marker accessibilityHint="Shows the files" onPress={() => setIsOpen((open) => !open)}>
  <Marker.Icon>
    <Icon icon={IconMagnifyingGlass} />
  </Marker.Icon>
  <Marker.Content>Explored 4 files</Marker.Content>
</Marker>

RunningCopy Anchor Link

shimmer on Marker.Content says the step is still running: the text breathes, and the marker is announced busy.

<Marker>
  <Marker.Icon>
    <Icon icon={IconMagnifyingGlass} />
  </Marker.Icon>
  <Marker.Content shimmer={step.isRunning}>Searching files</Marker.Content>
</Marker>

DisabledCopy Anchor Link

isDisabled dims the marker. On a pressable one it also blocks the press and is announced.

<Marker isDisabled onPress={() => expand(step)}>
  <Marker.Icon>
    <Icon icon={IconMagnifyingGlass} />
  </Marker.Icon>
  <Marker.Content>Explored 4 files</Marker.Content>
</Marker>

AccessibilityCopy Anchor Link

• A static marker is one element with the text role; its words are read once.
• A pressable marker has the button role, and stays tappable while busy. Pass accessibilityHint to say what the press does.
• Marker.Icon is hidden from assistive technology, because the glyph restates the text.
• The separator rules are hidden too.
• While any Marker.Content inside shimmers, the marker is announced busy.

API ReferenceCopy Anchor Link

MarkerPropsCopy Anchor Link

feedback, haptic, hitSlop, pressedOpacity, pressedScale and accessibilityHint are accepted only alongside onPress or onLongPress. On a static marker there is nothing for them to press. See Pressable.

Marker.IconCopy Anchor Link

The leading glyph slot, hidden from assistive technology. Extends React Native's ViewProps.

Marker.ContentCopy Anchor Link

The marker's text. It extends Text's props.