react-native-zeed-ai

Zeed Story brings financial data to life with animated graphics. Our AI-driven animations transform complex financial data into visually appealing, easy-to-understand formats, enhancing the overall impact of your message.

Platforms Supported

• ✅ IOS
• ✅ Android

Installation

With yarn

yarn add react-native-zeed-ai

With npm

npm install --save react-native-zeed-ai

Install peer dependencies We rely on two peer dependencies, if you already have it in your app you can skip this step.

expo-av - used to manage the audio in the lottie react-native-webview - used to display the lottie

To install and use Expo modules, the easiest way to get up and running is with the install-expo-modules command. Or if you want to install it manually, please refer to Expo document.

npx install-expo-modules@latest

To install react-native-webview and expo-av:

expo install react-native-webview expo-av

Install Install pods

For iOS you need to run pod install to complete the installation. Within the ios library of your app, run the following

pod install

Usage

To use react-native-zeed-ai, you need to initialize it with an API key, wrap your application components with ZeedProvider, and then use the hooks and components provided by the package to generate and display story content. Install peer dependencies

Basic Setup

We rely on only two peer dependencies, if you already have it in your app you can skip this step. react-native-webview - used to display the lottie expo - to manage the audio inside the lottie

1. Initialize Zeed AI:

   Import and initialize Zeed with your API key at the entry point of your app. If you haven't the key, just contact the team to get one!

   import { Zeed } from 'react-native-zeed-ai';
   
   Zeed.init({
     apiKey: 'YOUR_API_KEY',
     lang: 'YOUR LANGUAGE',
     clientId: 'YOUR_CLIENT_ID',
     userId: 'YOUR_USER_ID',
   });

   | Language | Abbreviation | Supported | | -------- | ------------ | --------- | | English | 'en' | ✅ | | Spanish | 'es' | ✅ | | Arabic | 'ar' | ✅ |

2. Wrap your component tree with ZeedProvider:

   This allows child components to access Zeed functionalities.

   import { ZeedProvider } from 'react-native-zeed-ai';
   
   return <ZeedProvider>{/* Your app components go here */}</ZeedProvider>;

Generating Stories

Implement a button or any trigger in your components to generate and display stories based on a given symbol. The Zeed.getStoryCard function is used to generate a story card. It takes three parameters: finasset: The financial asset symbol (e.g., 'PDD', 'TSLA'). audio: A boolean indicating whether to include audio. Default is false. onPress: A callback function that executes when the card is pressed. Default is an empty function.

import React, { useState, useCallback } from 'react';
import { View, Button, Alert } from 'react-native';
import { useZeed } from 'react-native-zeed-ai';

const StoryGenerator = () => {
  const { prefetched, setPrefetched, setVisible, setEventTraits } = useZeed();
  Zeed.prefetchStory(prefetched, setPrefetched).catch(console.error);

  const generateStory = useCallback(
    async (symbol: string) => {
      try {
        setEventTraits({
          finasset: symbol,
        });
        setVisible(true);
      } catch (error) {
        console.error('Failed to generate story:', error);
      }
    },
    [setEventTraits, setVisible]
  );

  return (
    <>
      <Button title="Generate Story" onPress={() => generateStory('AMZN')} />
    </>
  );
};

Navigate to the story

Add your implemented component into your main app.

{
  /* Other components */
}
<View>
  <StoryGenerator />
</View>;
{
  /* Other components */
}

You can check the example folder for more details.

Prefetch stories

The prefetchStory method allows you to fetch and store story data for a predefined list of stocks or any other list you choose to define. This method is designed to be called perhaps on application load or just before entering a component that requires the story data. Here is how to use prefetchStory:

1. Get the the setter function from useZeed()

import { useZeed } from 'react-native-zeed-ai';

const { prefetched, setPrefetched } = useZeed();

2. Call the prefetchStory Method: You can call this method at an appropriate time in your application flow.

Zeed.prefetchStory(prefetched, setPrefetched).catch(console.error);

By default, prefetchStory uses a predefined list of popular stocks (AMZN, MSFT, TSLA, etc.). If you want to use a custom list, pass your list of assets as a second argument:

const customStockList = ['BABA', 'NFLX', 'SPOT'];
Zeed.prefetchStory(prefetched, setPrefetchedData, customStockList);

Change Language

You can easily change the story language with the following function:

Zeed.changeLang({ lang: 'es' });

Running the Example

You can try out the example project included in this repository:

# Clone the repository
git clone https://github.com/yourusername/react-native-zeed-ai.git

# Install dependencies
yarn

# Run the iOS example
yarn example ios

# Run the Android example
yarn example android