Vertial stories for React Native/Expo

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

Demo

Instagram

Modal

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

Nested Story

Often used when building Instagram-like stories where each story has children slides. nestedStories prop must be set to true when using this.

Prop	Description	Type	Default
children	Array of Story	Array	Optional

Todo

• Get rid of react-native-eva-icons and use a sinlge icon
• Add a Close button/icon
• Multiple stories
• Add an option to pass custom Footer
• Add an option to pass custom Indicators
• Add an option to change Indicators' style and look
• Make a separate package that uses react-native-video