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.

Props

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

type Props = {
  configuration: {
    collectionId: string; // required
  };
  style?: ViewStyle;
  onDataLoadCompleted?: (event: DataLoadCompletedEvent) => void;
};

Notes

• configuration.collectionId is required.

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.