Rn-stories NPM

Vertial stories for React Native/Expo

Note: This library is under development. Suggestions and PRs are welcomed and appreciated!

Demo

Instagram npm.io

Modal npm.io

Install

yarn add rn-stories

Usage

Head to examples folder for more examples

import React from 'react';
import { SafeAreaView } from 'react-native';
import Stories from 'rn-stories';

const data = [
  {
    type: 'img',
    source:
      'https://images.unsplash.com/photo-1586039001882-5bd1bab0a9ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80',
    duration: 10000,
    action: { url: 'https://foundingbird.com', label: 'Go to Foundingbird' }
  },
  {
    type: 'video',
    source:
      'https://foundingbird-blog.cdn.prismic.io/foundingbird-blog/2dc27fe2-0552-48b0-9e4b-16044a28d039_daddariosa.mp4',
    duration: null,
    action: { url: 'https://google.com', label: 'Sign up' }
  },
  .....
];

export default function App() {
  const onStoryEnd = () => {
    console.log('Stories ended')
  }

  return (
    <SafeAreaView>
      <Stories stories={data} onStoryEnd={onStoryEnd} />
    </SafeAreaView>
  );
}

Props

Prop	Description	Type	Default	Required
`stories`	Array of `Story` or `NestedStory`	Array		Yes
`firstItem`	Index of a slide to be shown first (used in Instagram-like layout)	Number	0	No
`nestedStories`	If `true` story will have multiple children slides (used in Instagram-like layout)	Boolean	false	No
`bubbleIndicators`	If `true` the indicators will be rounded	Boolean	false	No
`headers`	HTTP header properties used to request the content	Object		No
`onStoryEnd`	Callback function to be called after nested story reaches end	Function		No
`onAllEnd`	Callback function to be called after the last story reaches end	Function		No

Types

Story

Prop	Description	Type	Default
`type`	Type of story	Enum `video` or `img`	Required
`source`	URL of video or img	String	Required
`duration`	Duration of how long an image slide should be shown in millisenconds	Number	Required for `img` only
`action`	Swipe up action	Array of `{label: string, url: string}`	Optional