> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stackfront.digital/llms.txt
> Use this file to discover all available pages before exploring further.

# Wishlist

# Wishlist

The wishlist is persisted locally in AsyncStorage — no API calls are needed. Items are stored as `{ productId, addedAt }` pairs.

## Usage

```tsx theme={null}
import { useWishlist } from 'react-native-stackfront-sdk';

function WishlistButton({ productId }: { productId: string }) {
  const { isInWishlist, toggle } = useWishlist();
  const saved = isInWishlist(productId);

  return (
    <TouchableOpacity onPress={() => toggle(productId)}>
      <HeartIcon filled={saved} />
    </TouchableOpacity>
  );
}

function WishlistScreen() {
  const { items, remove } = useWishlist();

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <WishlistItemCard
          productId={item.productId}
          addedAt={item.addedAt}
          onRemove={() => remove(item.productId)}
        />
      )}
    />
  );
}
```

## Hook API

```ts theme={null}
function useWishlist(): {
  items: { productId: string; addedAt: string }[];
  isInWishlist: (productId: string) => boolean;
  toggle: (productId: string) => Promise<void>;
  add: (productId: string) => Promise<void>;
  remove: (productId: string) => Promise<void>;
}
```

## Service API

```ts theme={null}
const { wishlist } = useStackfront();

await wishlist.add(productId);
await wishlist.remove(productId);
await wishlist.toggle(productId);
wishlist.isInWishlist(productId);
wishlist.getItems();
```

## How It Works

* Initialized from AsyncStorage when `StackfrontProvider` mounts
* All mutations update in-memory state and persist to AsyncStorage
* `isInWishlist` is synchronous — no async check needed
* The wishlist is tied to the device, not the customer account