react-native-border/lib/module/index.js

Easily create stylish, image-based borders in React Native components

"use strict";

import { View, Image, Dimensions, StyleSheet } from 'react-native';

// Define type for rotation degrees

// Define props for the BorderBox component
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const BorderBox = ({
  icon,
  iconWidth = 14,
  iconHeight = 16,
  containerStyle = {},
  children,
  horizontalPadding = 100,
  verticalPadding = 800,
  rotationDegrees = {
    top: '0deg',
    bottom: '180deg',
    left: '-90deg',
    right: '90deg'
  }
}) => {
  const screenWidth = Dimensions.get('window').width - horizontalPadding;
  const screenHeight = Dimensions.get('window').height - verticalPadding;
  const horizontalCount = Math.floor(screenWidth / iconWidth);
  const verticalCount = Math.floor(screenHeight / iconHeight);
  const renderIconsRow = (angle = '0deg') => Array.from({
    length: horizontalCount
  }).map((_, index) => /*#__PURE__*/_jsx(Image, {
    style: {
      height: iconHeight,
      width: iconWidth,
      transform: [{
        rotate: angle
      }]
    },
    source: icon,
    resizeMode: "contain"
  }, index));
  const renderIconsColumn = (angle = '90deg') => Array.from({
    length: verticalCount
  }).map((_, index) => /*#__PURE__*/_jsx(Image, {
    style: {
      height: iconHeight,
      width: iconWidth,
      transform: [{
        rotate: angle
      }]
    },
    source: icon,
    resizeMode: "contain"
  }, index));
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: [styles.container, {
        height: screenHeight,
        width: screenWidth
      }, containerStyle],
      children: [/*#__PURE__*/_jsx(View, {
        style: {
          flexDirection: 'row',
          width: screenWidth
        },
        children: renderIconsRow(rotationDegrees.top || '0deg')
      }), /*#__PURE__*/_jsxs(View, {
        style: {
          flexDirection: 'row',
          width: screenWidth,
          justifyContent: 'space-between',
          flex: 1
        },
        children: [/*#__PURE__*/_jsx(View, {
          children: renderIconsColumn(rotationDegrees.left || '-90deg')
        }), /*#__PURE__*/_jsx(View, {
          style: [styles.content, {
            flex: 1
          }],
          children: children
        }), /*#__PURE__*/_jsx(View, {
          children: renderIconsColumn(rotationDegrees.right || '90deg')
        })]
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: {
        flexDirection: 'row',
        width: screenWidth
      },
      children: renderIconsRow(rotationDegrees.bottom || '180deg')
    })]
  });
};
const styles = StyleSheet.create({
  container: {
    marginTop: 75
  },
  content: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});
export default BorderBox;
//# sourceMappingURL=index.js.map