react-native-gallery-preview/lib/module/components/DefaultHeader/DefaultHeader.js

<div> <img align="right" height="720" src="example.gif"> </div>

"use strict";

import React, { memo } from "react";
import { SafeAreaView, Text } from "react-native";
import { TouchableOpacity } from "react-native";
import { StyleSheet } from "react-native";
import { View } from "react-native";
import Animated, { FadeIn } from "react-native-reanimated";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const DefaultHeader = /*#__PURE__*/memo(({
  onClose,
  currentImageIndex,
  imagesLength,
  isFocused,
  containerBackgroundColor = "#000",
  textColor = "#fff"
}) => {
  if (!isFocused) {
    return null;
  }
  return /*#__PURE__*/_jsx(Animated.View, {
    entering: FadeIn,
    style: [styles.container, {
      backgroundColor: containerBackgroundColor
    }],
    children: /*#__PURE__*/_jsx(SafeAreaView, {
      style: styles.safeArea,
      children: /*#__PURE__*/_jsxs(View, {
        style: styles.wrapper,
        children: [/*#__PURE__*/_jsx(View, {
          style: styles.closeButtonWrapper,
          children: /*#__PURE__*/_jsx(TouchableOpacity, {
            onPress: onClose,
            style: styles.closeButton,
            children: /*#__PURE__*/_jsx(Text, {
              style: [styles.closeButtonIcon, {
                color: textColor
              }],
              children: "X"
            })
          })
        }), /*#__PURE__*/_jsx(View, {
          style: styles.titleWrapper,
          children: /*#__PURE__*/_jsxs(Text, {
            style: [styles.title, {
              color: textColor
            }],
            children: [currentImageIndex + 1, "/", imagesLength]
          })
        }), /*#__PURE__*/_jsx(View, {
          style: styles.right
        })]
      })
    })
  });
});
const styles = StyleSheet.create({
  container: {
    width: "100%",
    top: 0,
    position: "absolute"
  },
  safeArea: {
    flex: 1
  },
  wrapper: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    height: 54
  },
  titleWrapper: {
    flex: 3
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    letterSpacing: 2
  },
  closeButtonWrapper: {
    flex: 1,
    paddingLeft: 16
  },
  closeButton: {
    width: 28,
    height: 28,
    borderRadius: 25,
    justifyContent: "center",
    alignItems: "center"
  },
  closeButtonIcon: {
    fontSize: 20,
    fontWeight: "bold"
  },
  right: {
    flex: 1
  }
});
//# sourceMappingURL=DefaultHeader.js.map