About The Project

There were many libraries for adding Stories feature to a react native app but most of them are not updated. We have created a library with most of the features which exist on Instagram/Whatsapp stories.

Top Features:

• Supports Images, Videos and Gifs.
• Linear gradient rings around the story circles which dissapear when user taps on it.
• A callback function is fired as soon as the user views all the stories (This will feature will be enhanced further in order to support tracking of each story viewed).
• Minimal props with JSON input.

Getting Started

Prerequisites

You need to install the following packages in order to make this work flawlessly.

$ npm install react-native-video react-native-reanimated react-native-gesture-handler
# --- or ---
$ yarn add react-native-video react-native-reanimated react-native-gesture-handler

Installation

• From NPM

  npm install @liquide/react-native-stories

• From Yarn

  yarn add @liquide/react-native-stories

Usage

import Stories from '@liquide/react-native-stories';

const data = [
  {
    title: "What is Liquide?",
    username: "What is Liquide",
    profile: "https://ik.imagekit.io/liquide/images/liquideAvatar.png",
    stories: [
      {
        id: 1,
        url: "https://ik.imagekit.io/liquide/videos/what-is-liquide-usered.mp4",
        type: "video",
        duration: 2,
        isReadMore: true,
        url_readmore: "https://github.com/liquide-life/react-native-stories",
      },
    ],
  },
  {
    title: "Connect Broker",
    username: "How to connect your broker",
    profile: "https://ik.imagekit.io/liquide/images/connectBroker.png",
    stories: [
      {
        id: 1,
        url: "https://ik.imagekit.io/liquide/tr:w-0/images/trusted-brokers.png",
        type: "image",
        duration: 2,
      },
    ],
  },
  {
    title: "Buy Trade Setup",
    username: "Buy trades",
    profile: "https://ik.imagekit.io/liquide/images/tradecardAvatar.png",
    stories: [
      {
        id: 1,
        url: "https://ik.imagekit.io/liquide/videos/how-to-buy-stocks-usered.mp4",
        type: "video",
        duration: 2,
      },
    ],
  },
  {
    title: "Ask LiMo",
    username: "How to ask LiMo",
    profile: "https://ik.imagekit.io/liquide/images/limoAvatar.png",
    stories: [
      {
        id: 1,
        url: "https://ik.imagekit.io/liquide/videos/what-is-limo-usered.mp4",
        type: "video",
        duration: 2,
      },
    ],
  },
];


const App = () => {
  return (
    <Stories data={data} />
  );
};