Skip to main content

​
Wishlist

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

​
Usage

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

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

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