Skip to main content

​
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. 
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)}
        />
      )}
    />
  );
}

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). 
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>
  ));
}

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). 
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>
  );
}

function useAnnouncements(): SdkAnnouncement[]

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