> ## 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.

# Banners, Popups & Announcements

# Banners, Popups & Announcements

These three hooks provide remote-controlled UI elements that can be managed from the Stackfront dashboard.

## Banners

The `useBanners` hook returns carousel banner definitions for the home screen hero area.

```tsx theme={null}
import { useBanners } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function HomeBanners() {
  const banners = useBanners() ?? [];

  return (
    <FlashList
      data={banners.sort((a, b) => a.order - b.order)}
      horizontal
      renderItem={({ item }) => (
        <BannerCard
          imageUrl={item.mobileImageUrl ?? item.imageUrl}
          title={item.title}
          subtitle={item.subtitle}
          onPress={() => handleAction(item.actionPayload)}
        />
      )}
    />
  );
}
```

```ts theme={null}
function useBanners(): SdkBanner[]

// SdkBanner:
{
  id: string;
  title: string | null;
  subtitle: string | null;
  imageUrl: string;
  mobileImageUrl: string | null;
  actionPayload: Record<string, unknown> | null;
  order: number;
}
```

## Popups

The `usePopups` hook returns popup/overlay definitions triggered by user behavior (time delay, frequency).

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

function PopupHandler() {
  const popups = usePopups() ?? [];
  // Check trigger conditions, show appropriately
  return popups.map((popup) => (
    <PopupModal key={popup.id}>
      {popup.imageUrl && <Image source={{ uri: popup.imageUrl }} />}
      <Text>{popup.title}</Text>
      <Text>{popup.body}</Text>
      {popup.ctaLabel && <Button title={popup.ctaLabel} onPress={() => handleAction(popup.ctaActionPayload)} />}
      {popup.discountCode && <Text>Code: {popup.discountCode}</Text>}
    </PopupModal>
  ));
}
```

```ts theme={null}
function usePopups(): SdkPopup[]

// SdkPopup:
{
  id: string;
  type: string;
  title: string;
  body: string;
  imageUrl: string | null;
  ctaLabel: string | null;
  ctaActionPayload: Record<string, unknown> | null;
  dismissLabel: string;
  discountCode: string | null;
  triggerType: string;           // e.g. "time", "scroll", "exit"
  triggerDelaySeconds: number;    // delay before showing
  showFrequency: string;          // e.g. "once", "always", "daily"
}
```

## Announcements

The `useAnnouncements` hook returns announcement bar messages (a top banner strip).

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

function AnnouncementBar() {
  const announcements = useAnnouncements() ?? [];

  if (announcements.length === 0) return null;

  const bar = announcements.sort((a, b) => a.order - b.order)[0];

  return (
    <TouchableOpacity
      style={{ backgroundColor: bar.backgroundColor ?? '#000' }}
      onPress={() => handleAction(bar.actionPayload)}
    >
      <Text style={{ color: bar.textColor ?? '#fff' }}>
        {bar.message}
      </Text>
    </TouchableOpacity>
  );
}
```

```ts theme={null}
function useAnnouncements(): SdkAnnouncement[]

// SdkAnnouncement:
{
  id: string;
  message: string;
  backgroundColor: string | null;
  textColor: string | null;
  actionPayload: Record<string, unknown> | null;
  order: number;
}
```