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

React Native for Web

import { forwardRef } from "react";
import { StyleSheet } from "@tamagui/react-native-web-internals";
import { Image } from "../Image/index.mjs";
import { View } from "../View/index.mjs";
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, ImageBackground_default as default };
//# sourceMappingURL=index.mjs.map