Card Component

The StorytellerCardView renders a single, adaptive Storyteller card for a given clips collection. It automatically measures its content and updates its height accordingly.

Initialize the SDK before mounting the card. A newly mounted card begins loading from its configuration; use onDataLoadCompleted for success and error handling. It starts at zero height until native content measurements arrive.

Props

import type { StyleProp, ViewStyle } from 'react-native';
import type { DataLoadCompletedEvent, StorytellerAnalyticsContext } from '@getstoryteller/react-native-storyteller-sdk';

type Props = {
  configuration: {
    collectionId: string; // required
    context?: StorytellerAnalyticsContext; // string key/value analytics context
  };
  style?: StyleProp<ViewStyle>;
  onDataLoadCompleted?: (event: DataLoadCompletedEvent) => void;
};

Notes

• configuration.collectionId is required.
• configuration.context adds string key/value analytics context to this card.
• onDataLoadCompleted receives success, error and dataCount. iOS reports 1 on successful card loading and 0 on failure; do not interpret this as the number of items in the collection.
• Card does not expose onDataLoadStarted; show initial loading UI from your own mount state if needed.
• The card updates its height when the displayed content changes, including after a card action changes the ordering within its collection.
• Changing collectionId starts a new card instance; the previous collection’s measured height is not reused.

Fonts from the CMS

A Card's heading, subheading and button title fonts, and their OpenType font features such as ss02, are configured in the CMS rather than in your app's theme. Your app only needs to bundle the fonts the CMS refers to:

• Android: add each font to android/app/src/main/res/font/ using the exact resource name the CMS returns, for example knockout_67.otf for knockout_67. Fonts placed only in android/app/src/main/assets/fonts/ are not used for Card fonts from the CMS.
• iOS: register the font in your app as usual. The font name configured in the CMS must match the registered font name.

If the requested font can't be found, the Card uses your theme font without the font features. Font features only apply when the bundled font supports them.

Methods

StorytellerCardView exposes an imperative API via a ref:

• reloadData() — Reloads the card’s data.

Usage

import React, { useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import {
  StorytellerCardView,
  type StorytellerCardViewInterface,
  type DataLoadCompletedEvent,
} from '@getstoryteller/react-native-storyteller-sdk';

export default function CardExample() {
  const cardRef = useRef<StorytellerCardViewInterface>(null);

  const handleDataLoadCompleted = (event: DataLoadCompletedEvent) => {
    if (event.success) {
      console.log('Card loaded. Items:', event.dataCount);
    } else {
      console.warn('Card load error:', event.error);
    }
  };

  const refresh = () => cardRef.current?.reloadData();

  return (
    <View style={styles.container}>
      <StorytellerCardView
        ref={cardRef}
        configuration={{ collectionId: 'your-collection-id' }}
        style={styles.card}
        onDataLoadCompleted={handleDataLoadCompleted}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  card: { width: '100%' },
});

Tips

• Ensure the parent layout allows the card to expand vertically; the component sets its own height based on content.
• Call reloadData() when you know content or configuration has changed.