ak-app-pick

Animated grid → hero app-icon / brand-variant picker for React Native + Expo, built with Reanimated springs: fly-out preview, retract-to-slot, cross-row swaps, neighbor push, and safe-area-aware chrome.

Install

npm install ak-app-pick \
  react-native-svg \
  react-native-reanimated \
  react-native-safe-area-context \
  @expo/vector-icons

That's it. No Metro config changes. No TypeScript path setup.

Quickstart (3 steps)

1. Define your rows in JSON — primaryColor required, secondary/tertiary optional:

import { buildTeamsFromJsonRows } from 'ak-app-pick';

const teams = buildTeamsFromJsonRows([
  { id: 'brand', label: 'My Brand', primaryColor: '#004C54', secondaryColor: '#A5ACAF' },
  { id: 'alt',   label: 'Alt',      primaryColor: '#FF6B00' },
]);

2. Point it at your icon — paste the d="…" from your SVG:

import { createThemedPathRenderer } from 'ak-app-pick';

const renderVariant = createThemedPathRenderer({
  pathD: 'M12 2C6.48 2 2 6.48 ...',  // ← your SVG path d string
  viewBox: '0 0 64 64',
  boardSize: 64,
});

3. Drop in the component:

import { AppIconPickerExperience } from 'ak-app-pick';

<AppIconPickerExperience
  layout="embedded"
  teams={teams}
  renderVariant={renderVariant}
  committedSelectionId={selectedId}
  onCommit={setSelectedId}
/>

Full walkthrough → GETTING_STARTED.md
JSON schema + custom icon options → CONFIGURATION.md

How tiles are generated

Each JSON row auto-generates up to 6 tiles:

| # | Background | Icon mark | |---|-----------|-----------| | 1 | #000 black | primaryColor | | 2 | #fff white | primaryColor | | 3 | primaryColor | secondaryColor (if given) | | 4 | secondaryColor | primaryColor (if given) | | 5 | primaryColor | tertiaryColor (if given) | | 6 | tertiaryColor | primaryColor (if given) |

What you supply vs what the package does

| You supply | Package handles | |-----------|-----------------| | teams array (JSON or hand-built) | Grid layout, scroll, paging | | renderVariant(variant, w, h) → JSX | Fly-out hero animation | | committedSelectionId + onCommit | Retract-to-slot, cross-swap | | (optional) expo-haptics installed | Neighbor push, safe area |

Peer dependencies

| Package | Required | |---------|----------| | react, react-native | yes | | react-native-reanimated ≥ 3 | yes | | react-native-safe-area-context | yes | | @expo/vector-icons | yes | | react-native-svg | yes (for outline helper) | | expo-haptics | optional |

License

MIT — see LICENSE.