suiss/uim · React Native Component

Marker

A small inline label that marks a point in a list or feed, such as a date divider or a notice.

Marker is an open-source mobile component from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Marker (variants) on iOS in light mode

Marker is a row of secondary text with an optional icon. It has three variants: default for a plain row, separator for centered text with a line on each side, and border for a row with a bottom border.

Use separator for date dividers in a chat or feed, border for section headings, and default for short notices.

Installation

$ pnpm dlx @esuiss/uim@latest add marker

The CLI also adds what it builds on: Icon, Text.

Manual

  1. Install the dependencies:
npx expo install class-variance-authority cn

  1. Add the pieces it builds on: Icon, Text, and the primitives components/primitives/types.tsx, components/primitives/use-render.tsx.

  2. Copy the source into components/ui/marker.tsx:

uniwind/components/ui/marker.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import * as React from "react"
import { View, type ViewProps } from "react-native"
import type { RenderProp } from "@/components/primitives/types"
import { useRender } from "@/components/primitives/use-render"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

type MarkerVariant = "default" | "separator" | "border"

const MarkerContext = React.createContext<MarkerVariant>("default")

const markerVariants = cva("min-h-4 w-full flex-row items-center gap-2", {
  variants: {
    variant: {
  1. Update the import paths to match your project.

Usage

import { Marker, MarkerIcon, MarkerContent } from "@/components/ui/marker"
<View className="gap-8">
  <Marker>
    <MarkerIcon>
      <Icon as={InfoIcon} />
    </MarkerIcon>
    <MarkerContent>Messages are end-to-end encrypted.</MarkerContent>
  </Marker>
  <Marker variant="separator">
    <MarkerContent>Today</MarkerContent>
  </Marker>
  <Marker variant="border">
    <MarkerIcon>
      <Icon as={CalendarBlankIcon} />
    </MarkerIcon>
    <MarkerContent>Upcoming</MarkerContent>
  </Marker>
</View>

Put the text in MarkerContent and an Icon in MarkerIcon. Text and icons inside the marker pick up the secondary label color and size through context.

Pass a render element to Marker to render it as another component instead of a View.

API Reference

Marker

Row that sets the variant and the text and icon styles.

ExtendsViewProps
PropType
About
default, separator or border.
Type
"default""separator""border"
Default
"default"
About
Element to render in place of the default View.
Type
RenderProp<Record<string, unknown>, Record<string, never>>
Default
—

MarkerIcon

Fixed-size slot for an icon.

ExtendsViewProps

MarkerContent

Marker text, centered in the separator variant.

ExtendsReact.ComponentProps<typeof Text>

Accessibility

  • MarkerIcon and the separator lines are hidden from screen readers, so only the text is read.
  • If the icon carries meaning, include it in the text.

Notes

  • Text uses text-sm text-label-secondary and icons size-4.
  • Lines and the bottom border use bg-separator and border-separator.
  • Light and dark colors follow the system appearance.