/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @flow strict-local * @format */ import type {HostInstance} from '../Renderer/shims/ReactNativeTypes'; import type {ImageBackgroundProps} from './ImageProps'; import View from '../Components/View/View'; import flattenStyle from '../StyleSheet/flattenStyle'; import StyleSheet from '../StyleSheet/StyleSheet'; import Image from './Image'; import * as React from 'react'; /** * Very simple drop-in replacement for which supports nesting views. * * ```ReactNativeWebPlayer * import React, { Component } from 'react'; * import { AppRegistry, View, ImageBackground, Text } from 'react-native'; * * class DisplayAnImageBackground extends Component { * render() { * return ( * * React * * ); * } * } * * // App registration and rendering * AppRegistry.registerComponent('DisplayAnImageBackground', () => DisplayAnImageBackground); * ``` */ class ImageBackground extends React.Component { setNativeProps(props: {...}) { // Work-around flow const viewRef = this._viewRef; if (viewRef) { viewRef.setNativeProps(props); } } _viewRef: ?React.ElementRef = null; _captureRef = (ref: null | HostInstance) => { this._viewRef = ref; }; render(): React.Node { const { children, style, imageStyle, imageRef, importantForAccessibility, ...props } = this.props; // $FlowFixMe[underconstrained-implicit-instantiation] const flattenedStyle = flattenStyle(style); return ( {/* $FlowFixMe[incompatible-use] */} overwrites width and height styles // (which is not quite correct), and these styles conflict with explicitly set styles // of and with our internal layout model here. // So, we have to proxy/reapply these styles explicitly for actual component. // This workaround should be removed after implementing proper support of // intrinsic content size of the . // $FlowFixMe[prop-missing] width: flattenedStyle?.width, // $FlowFixMe[prop-missing] height: flattenedStyle?.height, }, imageStyle, ]} ref={imageRef} /> {children} ); } } module.exports = ImageBackground;