react-native-preview-story/lib/module/components/Header.js

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

"use strict";

import { View, Text, TouchableOpacity, Image, Animated } from 'react-native';
import React from 'react';
import styles from "../Styled.js";
import PlayImage from '../assets/play.png';
import PauseImage from '../assets/pause.png';
import CrossImage from '../assets/white-cross.png';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Header = ({
  storyName,
  stories,
  currentStoryIndex,
  pausePlay,
  isPaused,
  onComplete,
  getProgressBarWidth,
  playPause,
  close,
  storyNameText = {},
  headerStyle
}) => {
  const headerViewContainer = React.useMemo(() => {
    const style = {
      justifyContent: storyName ? 'space-between' : 'flex-end'
    };
    return [styles.headerViewContainer, style];
  }, [storyName]);
  return /*#__PURE__*/_jsxs(View, {
    style: styles.headerContainer,
    children: [/*#__PURE__*/_jsxs(View, {
      style: headerViewContainer,
      children: [storyName && /*#__PURE__*/_jsx(Text, {
        style: [styles.storyNameText, storyNameText],
        children: storyName
      }), /*#__PURE__*/_jsxs(View, {
        style: styles.buttonContainer,
        children: [playPause && /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: () => pausePlay(),
          children: /*#__PURE__*/_jsx(Image, {
            source: isPaused ? PlayImage : PauseImage,
            style: styles.icon
          })
        }), close && /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: onComplete,
          children: /*#__PURE__*/_jsx(Image, {
            source: CrossImage,
            style: styles.icon
          })
        })]
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: [styles.progressBarContainer, {
        backgroundColor: headerStyle?.containerBackground || 'transparent',
        height: headerStyle?.conatinerHeight || '100%'
      }],
      children: stories.map((story, index) => /*#__PURE__*/_jsx(View, {
        style: [styles.progressBarBackground, {
          backgroundColor: headerStyle?.progressBarBackground || 'rgba(255,255,255,0.5)',
          height: headerStyle?.progressBarHeight || 3,
          borderRadius: headerStyle?.cornerRadius || 10
        }],
        children: /*#__PURE__*/_jsx(Animated.View, {
          style: [styles.progressBar, {
            width: getProgressBarWidth(index, currentStoryIndex),
            height: headerStyle?.progressBarHeight || 3,
            backgroundColor: headerStyle?.progressColor || 'red',
            borderRadius: headerStyle?.cornerRadius || 10
          }]
        })
      }, story.id))
    })]
  });
};
export default Header;
//# sourceMappingURL=Header.js.map