Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 1x 1x 3x 3x 3x 1x | /**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type { ImageProps } from '../Image';
import type { ViewProps } from '../View';
import * as React from 'react';
import { forwardRef } from 'react';
import Image from '../Image';
import StyleSheet from '../StyleSheet';
import View from '../View';
type ImageBackgroundProps = {
...ImageProps,
imageRef?: any,
imageStyle?: $PropertyType<ImageProps, 'style'>,
style?: $PropertyType<ViewProps, 'style'>
};
const emptyObject = {};
/**
* Very simple drop-in replacement for <Image> which supports nesting views.
*/
const ImageBackground: React.AbstractComponent<
ImageBackgroundProps,
React.ElementRef<typeof View>
> = forwardRef((props, forwardedRef) => {
const { children, style = emptyObject, imageStyle, imageRef, ...rest } = props;
const { height, width } = StyleSheet.flatten(style);
return (
<View ref={forwardedRef} style={style}>
<Image
{...rest}
ref={imageRef}
style={[
StyleSheet.absoluteFill,
{
// 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
},
imageStyle
]}
/>
{children}
</View>
);
});
ImageBackground.displayName = 'ImageBackground';
export default ImageBackground;
|