npm package: @moneylion/react-native-stories
Description: Stories for financial products within Engine by MoneyLion,
Author: MoneyLion
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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

```sh
yarn install @moneylion/react-native-stories
```

### Peer Dependencies
Ensure the following dependencies are installed in your project:

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

## Usage

```tsx
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)