EmojiGrid#

The headless recycled glyph grid — a native <list> recycler in flow layout, so only the on-screen cells exist regardless of how many emoji you feed it. One of the parts EmojiPicker is assembled from, for when you want a custom layout.

Import#

import { EmojiGrid } from '@sigx/lynx-emoji';

Basic usage#

EmojiGrid takes a flat array of EmojiDatum and renders them as a tappable recycler. Because flex / percent heights on the native list resolve to zero, class and style land on a self-measuring wrapper that pins the list to a concrete px height — first paint is one frame after mount. onPick fires on tap; onPickTone fires on long-press of a tonal emoji (one that has uniform skin-tone variants).

import { EmojiGrid, enData } from '@sigx/lynx-emoji';

function AllEmoji({ onPick }: { onPick: (glyph: string) => void }) {
    return (
        <view style={{ height: '320px' }}>
            <EmojiGrid
                emojis={enData.emojis}
                columns={8}
                cellSize={26}
                onPick={(datum) => onPick(datum.e)}
            />
        </view>
    );
}

Driving it from a context#

EmojiGrid is one of the parts EmojiPicker composes. To build a custom surface, wire it against a context from createEmojiContext (or one read from an EmojiProvider via useEmojiContext). The skinTone store gives you the sticky grid-wide tone, and recents.push records a pick — here a recents strip:

import { EmojiGrid, createEmojiContext, enData } from '@sigx/lynx-emoji';

function RecentStrip() {
    const ctx = createEmojiContext(enData, { recentsCap: 16 });
    const tone = ctx.skinTone.state.tone;

    return (
        <EmojiGrid
            emojis={ctx.recents.recents}
            tone={tone}
            columns={8}
            cellSize={26}
            onPick={(datum) => ctx.recents.push(datum)}
        />
    );
}

The tone prop selects which skin-tone variant a cell renders; glyphForTone(datum, tone) is what resolves it internally, falling back to the base glyph for non-tonal emoji. Long-press a tonal emoji and onPickTone fires with that datum so you can open a SkinTonePopover.

Custom cells#

Pass renderCell to replace a cell's content (it renders inside the cell's Pressable), and cellClass to theme each cell:

import { EmojiGrid, enData } from '@sigx/lynx-emoji';
import { Text } from '@sigx/lynx-heroui';

function LabeledGrid() {
    return (
        <view style={{ height: '320px' }}>
            <EmojiGrid
                emojis={enData.emojis}
                cellClass="emoji-cell"
                renderCell={(datum, glyph) => <Text>{glyph}</Text>}
                onPick={(datum) => console.log(datum.n)}
            />
        </view>
    );
}

Props#

SkinTone, EmojiDatum and EmojiRenderCell are documented in the API reference.

Events#

See also#

• EmojiPicker — the full picker that composes this grid.
• API reference — EmojiGridProps, typed.
• Usage — composing the headless parts.