@tamagui/react-native-web-lite/dist/esm/ImageBackground/index.js

React Native for Web

import { forwardRef } from "react";
import { StyleSheet } from "@tamagui/react-native-web-internals";
import Image from "../Image/index";
import View from "../View/index";
import { jsx, jsxs } from "react/jsx-runtime";
const emptyObject = {}, ImageBackground = forwardRef(
  (props, forwardedRef) => {
    const { children, style = emptyObject, imageStyle, imageRef, ...rest } = props, { height, width } = StyleSheet.flatten(style);
    return /* @__PURE__ */ jsxs(View, { ref: forwardedRef, style, children: [
      /* @__PURE__ */ jsx(
        Image,
        {
          ...rest,
          ref: imageRef,
          style: [
            {
              // Temporary Workaround:
              // Current (imperfect yet) implementation of <Image> overwrites width and height styles
              // (which is not quite correct), and these styles conflict with explicitly set styles
              // of <ImageBackground> and with our internal layout model here.
              // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
              // This workaround should be removed after implementing proper support of
              // intrinsic content size of the <Image>.
              width,
              height,
              zIndex: -1
            },
            StyleSheet.absoluteFill,
            imageStyle
          ]
        }
      ),
      children
    ] });
  }
);
ImageBackground.displayName = "ImageBackground";
var ImageBackground_default = ImageBackground;
export {
  ImageBackground_default as default
};
//# sourceMappingURL=index.js.map