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