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-preview-story

v0.1.9

Published

React Native Story Component Which takes Stories array and show exact story view like infamous instagram

Downloads

149

Readme

React Native Preview Story

A React Native component to display stories similar to Instagram and Snapchat.

Images

| UI Mode | Component | Images | | ----------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------- | | Android | | | | iOS | | |

Installation

npm install react-native-preview-story

Features

1. Add Custom Component

You can add custom components in your story to make it more user-friendly.

2. Auto Pause Option While Loading

The library automatically pauses the component timer until the image is fully loaded.

3. Customizable Features

It's a TypeScript-built library, so you can customize each and every prop you need, from rendering the complete header to everything else.

Props

StoryView Component

The StoryView component is used to display a series of stories with various controls and customization options.

Props

  • visible (boolean): Determines if the StoryView is visible. (Mandatory)
  • stories (IStoryProp[]): Array of story objects to be displayed. (Mandatory)
  • imageStyle (any): Style for the story image.
  • containerStyle (any): Style for the container.
  • onComplete (() => void): Callback when all stories are viewed.
  • duration (number): Duration for each story in milliseconds. Default is 5000.
  • renderHeaderComponent ((props: IHeaderProps) => React.ReactNode | Element | null | any): Function to render a custom header component.
  • onChangePosition ((position: number) => void): Callback when the story position changes.
  • index (number): Initial index of the story to be displayed.
  • noPause (boolean): If true, the story will not pause on touch.
  • noControls (boolean): If true, the default controls will not be displayed.
  • noLoop (boolean): If changed will stop at last story, the default is false.
  • native Driver (boolean): Upto you to change native driver use case or not, default false.
  • onPressBack (()=>void): backhandler Press back value

Example

Here is an example of how to use the StoryView component in an app:

import React from 'react';
import { View, Text, Button, SafeAreaView, StatusBar } from 'react-native';
import StoryView from 'react-native-preview-story';
import styles from './styles';

const CustomHeader = ({ title }) => (
  <View style={{ padding: 10, backgroundColor: 'rgba(0,0,0,0.5)' }}>
    <Text style={{ color: 'white' }}>{title}</Text>
  </View>
);

export default function App() {
  const [visible, setVisible] = React.useState(true);

  return (
    <SafeAreaView style={styles.flex1}>
      <StatusBar />
      {visible ? (
        <StoryView
          stories={[
            {
              url: 'https://media.giphy.com/media/3o7TKz9b4v8l5ZjGxi/giphy.gif',
              type: 'image',
              id: 3,
              duration: 5,
            },
            {
              url: 'https://media.giphy.com/media/3o7TKz9b4v8l5ZjGxi/giphy.gif',
              type: 'image',
              id: 4,
              duration: 5,
            },
            {
              url: 'https://media.giphy.com/media/3o7TKz9b4v8l5ZjGxi/giphy.gif',
              type: 'image',
              id: 5,
              duration: 5,
            },
            {
              type: 'component',
              component: (
                <View>
                  <Text>Custom Component</Text>
                  <Button
                    title="Press Me"
                    onPress={() => console.log('Button Pressed')}
                  />
                </View>
              ),
              id: 1,
              duration: 5,
            },
          ]}
          visible
          renderHeaderComponent={() => (
            <CustomHeader title="My Custom Header" />
          )}
          onComplete={() => {
            setVisible(false);
            console.log('close');
          }}
          noControls
        />
      ) : (
        <Button title="Show Story" onPress={() => setVisible(true)} />
      )}
    </SafeAreaView>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library