@moneylion/react-native-stories

A React Native package for displaying interactive stories with image and video support.

Features

• Supports both images and videos
• Handles error and loading states
• Tracks user progress
• Provides callbacks for custom analytics
• Allows additional configuration via analyticsProps

Installation

yarn install @moneylion/react-native-stories

Peer Dependencies

Ensure the following dependencies are installed in your project:

yarn install react-native-reanimated react-native-safe-area-context react-native-svg react-native-video

Usage

import {
  EngineStoriesProvider,
  useEngineStories,
  type StoryCallbackData,
  type StoryData,
} from '@moneylion/react-native-stories';
import { View, StyleSheet, Button } from 'react-native';

const Screen = () => {
  const { showStories } = useEngineStories();

  const data: StoryData[] = [
    {
      id: '1',
      type: 'video',
      url: 'https://stream.mux.com/AmGTepgecSa7R02nzhJZspUHI7jWyFBCSHBhNK4oEsDQ.m3u8',
      cta: 'Apply for card',
      ctaLink: 'https://www.moneylion.com',
    },
  ];

  const analyticsProps = {
    offer_id: 'avant_test_id',
    offer_name: 'Avant Test Offer',
    product_type: 'credit_card',
  };

  return (
    <View style={styles.container}>
      <Button
        title="Open Story"
        onPress={() => showStories('avant_test_id', data, analyticsProps)}
      />
    </View>
  );
};

export default function App() {
  const onView = (data: StoryCallbackData) => console.log('onView', data);
  const onClose = (data: StoryCallbackData) => console.log('onClose', data);
  const onNext = (data: StoryCallbackData) => console.log('onNext', data);
  const onPrev = (data: StoryCallbackData) => console.log('onPrev', data);
  const onEngage = (data: StoryCallbackData) => console.log('onEngage', data);

  return (
    <EngineStoriesProvider
      onView={onView}
      onClose={onClose}
      onNext={onNext}
      onPrev={onPrev}
      onEngage={onEngage}
    >
      <Screen />
    </EngineStoriesProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Props

EngineStoriesProvider

| Prop | Type | Description | |------------|---------------------------|-------------| | onView | (data: StoryCallbackData) => void | Called when a story is viewed | | onClose | (data: StoryCallbackData) => void | Called when the story is closed | | onNext | (data: StoryCallbackData) => void | Called when the user moves to the next story | | onPrev | (data: StoryCallbackData) => void | Called when the user moves to the previous story | | onEngage | (data: StoryCallbackData) => void | Called when the user interacts with a CTA |

useEngineStories

| Method | Description | |-------------|-------------| | showStories(id: string, data: StoryData[], analyticsProps?: AnalyticsProps) | Opens the story modal |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library