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

React Native for Web

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "react";
import { forwardRef } from "react";
import { StyleSheet } from "@tamagui/react-native-web-internals";
import Image from "../Image/index.native.js";
import View from "../View/index.native.js";
var emptyObject = {},
  ImageBackground = /* @__PURE__ */forwardRef(function (props, forwardedRef) {
    var {
        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.native.js.map