npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-stories-view

v1.0.9

Published

A simple and fully customizable React Native component that implements a status/stories view like Whatsapp, Instagram

Downloads

1,615

Readme

React Native Stories View ⚡

npm version Platform - Android and IOS

A simple and fully customizable React Native components that provides a status/stories feature like Whatsapp, Instagram. For navigation across all the stories you can touch the left or right portion of the screen similar to what we see on Whatsapp or Instagram. The library works seemleslly across both Android as well as IOS platform developed with ❤️ in Typescript & React 🔥.

Feature's include :

  • Progress bar with custom duration & styling options.
  • Story Image view with custom styling options.
  • A fully customizable Header View, you can use default one or pass in your choice of component.
  • A fully customizable Footer View, you can use default one or pass in your choice of component.

Spread Your ❤️:

GitHub followers Twitter Follow

Demo

|IOS | Android | -------------------------|--------------------------| | | |

Screenshots

|Example One | Example Two | Example Three | Example Four | Example Five | |-------------------------|-------------------------|-------------------------|-------------------------|-------------------| | | | | | |

Installation

If using yarn:

yarn add react-native-stories-view

If using npm:

npm i react-native-stories-view

Usage

For example code, Click here

  • ProgressBar

This individual component can be used to display progressive bar with controlled duration, style & motion. To programatically enable or disable the progress pass boolean value to enableProgress & to change the position of progress use progressIndex prop along with duration prop to control the motion. On every change of propress position onChange function will be invoked for any customization.

<ProgressBar
   images={['','']}
   onChange={() => {}}
   progressIndex={0}
   enableProgress={true}
   duration={20} 
   barStyle={{
      barActiveColor: BAR_ACTIVE_COLOR,
      barInActiveColor: BAR_INACTIVE_COLOR,
      barWidth: 100, 
      barHeight: 4
   }}
/>
  • StoryContainer

This component provides you with entire functionality of Status/Stories feature along with flexible customization.

Basic Usage

This simply display's only the Progress Bar & the Story view images without any header or footer view. The container can be given style by providing containerStyle props.

import { StoryContainer } from 'react-native-stories-view';

<StoryContainer
   visible={true}
   enableProgress={true}
   images={images}
   duration={20}  
   onComplete={() => alert("onComplete")}
   containerStyle={{
       width: '100%',
       height: '100%',
   }}
/>

Header View

You can use the inbuilt header view which can display basic user details by simply providing userProfile props with specified parameters.

// User Information in header
<StoryContainer
   visible={true}
   enableProgress={true}
   images={images}
   duration={20} 
   onComplete={() => alert("onComplete")}
   userProfile={{
      userImage: PROFILE,
      userName: 'Yuvraj Pandey',
      userMessage: 'Work hard & success will follow !!',
      imageArrow: BACK,
      onImageClick: () => {
         console.log('lskndclksnc');
         Alert.alert('User profile image tapped');
      },
   }}
/>

However if you wish to add your own custom component, you can pass your own component in headerComponent prop and this will replace the header described above.

<StoryContainer
   visible={true}
   enableProgress={true}
   images={images}
   onComplete={() => alert("onComplete")}
   duration={20} 
   headerComponent={<View />}
/>

In case neither of the prop i.e userProfile or headerComponent is passed then header view will be not be displayed.

Footer View

The in built footer view provides you with a reply option where in you can accept user input for the status user just viewed. isShowReply boolean prop can be used to programaically show or hide the footer reply view. The onReplyTextChange & onReplyButtonClick function provides callback for the action performed by the user along with the progressIndex of the particular story currently viewed.

// Reply option in Footer
<StoryContainer
   visible={true}
   enableProgress={true}
   images={images}
   duration={20} 
   onComplete={() => alert("onComplete")}
   replyView={{
      isShowReply: true,
      onReplyTextChange: (textReply, progressIndex) => {
          console.log(`Text : ${textReply} , position : ${progressIndex}`);
      },
      onReplyButtonClick: (buttonType, progressIndex) => {
         switch (buttonType) {
            case 'send':
               console.log(`Send button tapped for position : ${progressIndex}`);
               break;

             case 'smiley':
               console.log(`Smiley button tapped for position : ${progressIndex}`);
               break;
          }
       },
   }}
/>

If you have your own custom component to use in Footer, simply pass your component in footerComponent prop as below which will replace the inbuilt Footer with your own custom style.

// Custom Footer component option
<StoryContainer
   visible={true}
   enableProgress={true}
   images={images}
   duration={20} 
   onComplete={() => alert("onComplete")}
   footerComponent={<View />}
/>

However if neither of the prop i.e replyView or footerComponent is passed then footer view will be not be displayed.

Documentation :

ProgressBar

| PropName | PropType | Purpose | Required | | :--------------------- | :--------------: | :--------------------------------------------- | :------------: | | images | Array<String> | Story images array to render count of bar | Mandatory | | progressIndex | number | Starts progress for a particular index item | Mandatory | | enableProgress | Boolean | Start/Stop the progress bar motion | Optional | | duration | Number | Control's the speed of progress bar | Optional | | barStyle | Object | Progress Bar style | Optional | | barActiveColor | String | Active progress color | Optional | | barInActiveColor | String | In Active progress color | Optional | | barWidth | number | Default 100, Always > 10 but < 100 | Optional | | barHeight | number | Default 7, Always > 4 but < 10 | Optional | | onChange | Function | Function executes after change in progressIndex | Optional |

Basic

| PropName | PropType | Purpose | Required | | :--------------------- | :--------------: | :--------------------------------------------- | :------------: | | visible | Boolean | Toggle visibility of Story Container | Mandatory | | enableProgress | Boolean | Enable/disable the top progress bar visibility | Optional | | images | Array<String> | Story Images | Mandatory | | duration | Number | Control's the speed of progress bar | Optional | | containerStyle | Object | Container style | Optional | | onComplete | Function | Function executes after all status is completed | Optional |

Header

| PropName | PropType | Purpose | Required | | :--------------------- | :--------------: | :--------------------------------------------- | :------------: | | userProfile | Object | Default user detail view | Optional | | userImage | String | Image URL | Optional | | userName | String | Display's user name | Optional | | userMessage | String | Display's user information | Optional | | imageArrow | String | Image Url | Optional | | onImageClick | Function | Function that executes imageArrow click event | Optional | | headerComponent | Component | Custom component | Optional |

Footer

| PropName | PropType | Purpose | Required | | :--------------------- | :--------------: | :--------------------------------------------- | :------------: | | replyView | Object | Default reply view with Input text | Optional | | isShowReply | Object | Toggle's the display of footer view | Mandatory | | onReplyTextChange | String | Callback for user entered text with posotion | Optional | | onReplyButtonClick | String | Callback for emoji & send click with posotion | Optional | | footerComponent | Component | Custom component | Optional |

About Me

Yuvraj Pandey

I am a passionate Engineer which likes to push himself on various fronts of technologies.

For more exciting updates follow me,