Contact Index

An alphabetical list with a letter rail down the right edge, like a phone's contacts. Names are grouped under letter headers. Tap or drag along the rail to jump to a letter and the list scrolls there; the letter you are on is highlighted and read out. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add contact-index

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/contact-index.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { ContactIndex } from "@/components/ui/contact-index";

export default function Example() {
  return (
    <ContactIndex
      items={[
        { id: "1", name: "Aaron" },
        { id: "2", name: "Maya" },
      ]}
      onSelect={(item) => console.log(item.name)}
    />
  );
}

Props