Skip to content

Commit 3f4d1fc

Browse files
retyuiretyui
committed
chore: Convert ImageBackground to function component
1 parent c4b92cf commit 3f4d1fc

3 files changed

Lines changed: 63 additions & 70 deletions

File tree

‎packages/react-native/Libraries/Image/ImageBackground.js‎

Lines changed: 50 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
* @format
99
*/
1010

11-
import type {HostInstance} from '../../src/private/types/HostInstance';
1211
import type {ImageBackgroundProps} from './ImageProps';
1312

1413
import View from '../Components/View/View';
@@ -53,68 +52,58 @@ export type {ImageBackgroundProps} from './ImageProps';
5352
* @see https://reactnative.dev/docs/imagebackground
5453
* @deprecated
5554
*/
56-
class ImageBackground extends React.Component<ImageBackgroundProps> {
57-
setNativeProps(props: {...}) {
58-
// Work-around flow
59-
const viewRef = this._viewRef;
60-
if (viewRef) {
61-
viewRef.setNativeProps(props);
62-
}
63-
}
6455

65-
_viewRef: ?React.ElementRef<typeof View> = null;
66-
67-
_captureRef = (ref: null | HostInstance) => {
68-
this._viewRef = ref;
69-
};
70-
71-
render(): React.Node {
72-
const {
73-
children,
74-
style,
75-
imageStyle,
76-
imageRef,
77-
importantForAccessibility,
78-
...props
79-
} = this.props;
80-
81-
// $FlowFixMe[underconstrained-implicit-instantiation]
82-
const flattenedStyle = flattenStyle(style);
83-
return (
84-
<View
85-
accessibilityIgnoresInvertColors={true}
56+
const ImageBackground: component(
57+
ref?: React.RefSetter<React.ElementRef<typeof View>>,
58+
...props: ImageBackgroundProps
59+
) = ({
60+
ref,
61+
children,
62+
style,
63+
imageStyle,
64+
imageRef,
65+
importantForAccessibility,
66+
...props
67+
}: {
68+
ref?: React.RefSetter<React.ElementRef<typeof View>>,
69+
...ImageBackgroundProps,
70+
}): React.Node => {
71+
// $FlowFixMe[underconstrained-implicit-instantiation]
72+
const flattenedStyle = flattenStyle(style);
73+
return (
74+
<View
75+
accessibilityIgnoresInvertColors={true}
76+
importantForAccessibility={importantForAccessibility}
77+
style={style}
78+
ref={ref}>
79+
{/* $FlowFixMe[incompatible-use] */}
80+
<Image
81+
{...props}
8682
importantForAccessibility={importantForAccessibility}
87-
style={style}
88-
ref={this._captureRef}>
89-
{/* $FlowFixMe[incompatible-use] */}
90-
<Image
91-
{...props}
92-
importantForAccessibility={importantForAccessibility}
93-
style={[
94-
StyleSheet.absoluteFill,
95-
{
96-
// Temporary Workaround:
97-
// Current (imperfect yet) implementation of <Image> overwrites width and height styles
98-
// (which is not quite correct), and these styles conflict with explicitly set styles
99-
// of <ImageBackground> and with our internal layout model here.
100-
// So, we have to proxy/reapply these styles explicitly for actual <Image> component.
101-
// This workaround should be removed after implementing proper support of
102-
// intrinsic content size of the <Image>.
103-
// $FlowFixMe[prop-missing]
104-
width: flattenedStyle?.width,
105-
// $FlowFixMe[prop-missing]
106-
height: flattenedStyle?.height,
107-
},
108-
imageStyle,
109-
]}
110-
ref={imageRef}
111-
/>
112-
{children}
113-
</View>
114-
);
115-
}
116-
}
83+
style={[
84+
StyleSheet.absoluteFill,
85+
{
86+
// Temporary Workaround:
87+
// Current (imperfect yet) implementation of <Image> overwrites width and height styles
88+
// (which is not quite correct), and these styles conflict with explicitly set styles
89+
// of <ImageBackground> and with our internal layout model here.
90+
// So, we have to proxy/reapply these styles explicitly for actual <Image> component.
91+
// This workaround should be removed after implementing proper support of
92+
// intrinsic content size of the <Image>.
93+
// $FlowFixMe[prop-missing]
94+
width: flattenedStyle?.width,
95+
// $FlowFixMe[prop-missing]
96+
height: flattenedStyle?.height,
97+
},
98+
imageStyle,
99+
]}
100+
ref={imageRef}
101+
/>
102+
{children}
103+
</View>
104+
);
105+
};
117106

118-
export type ImageBackgroundInstance = ImageBackground;
107+
ImageBackground.displayName = 'ImageBackground';
119108

120109
export default ImageBackground;

‎packages/react-native/ReactNativeApi.d.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*
7-
* @generated SignedSource<<c43c7ab238b80e42e8e8f17f2ff5cb47>>
7+
* @generated SignedSource<<d7b37ee14e26431e5006542162907f01>>
88
*
99
* This file was generated by scripts/js-api/build-types/index.js.
1010
*/
@@ -244,6 +244,12 @@ declare const I18nManager: {
244244
swapLeftAndRightInRTL: (flipStyles: boolean) => void
245245
}
246246
declare const Image: ImageType
247+
declare const ImageBackground: typeof ImageBackground_default
248+
declare const ImageBackground_default: (
249+
props: ImageBackgroundProps & {
250+
ref?: React.Ref<React.ComponentRef<typeof View>>
251+
},
252+
) => React.ReactNode
247253
declare const InputAccessoryView: typeof InputAccessoryView_default
248254
declare const InputAccessoryView_default: React.ComponentType<InputAccessoryViewProps>
249255
declare const Keyboard: typeof Keyboard_default
@@ -2384,11 +2390,7 @@ declare interface ILogBox {
23842390
}
23852391
declare type Image = typeof Image
23862392
declare type ImageAndroid = AbstractImageAndroid & ImageComponentStaticsAndroid
2387-
declare class ImageBackground extends React.Component<ImageBackgroundProps> {
2388-
render(): React.ReactNode
2389-
setNativeProps(props: {}): void
2390-
}
2391-
declare type ImageBackgroundInstance = ImageBackground
2393+
declare type ImageBackground = typeof ImageBackground
23922394
declare interface ImageBackgroundProps extends Readonly<
23932395
Omit<ImageProps, "children" | "style">
23942396
> {
@@ -5780,8 +5782,7 @@ export {
57805782
IOSKeyboardEvent, // e67bfe3a
57815783
IgnorePattern, // ec6f6ece
57825784
Image, // fba54a35
5783-
ImageBackground, // 1543bae2
5784-
ImageBackgroundInstance, // 610d9eed
5785+
ImageBackground, // ce615745
57855786
ImageBackgroundProps, // ceb153c3
57865787
ImageErrorEvent, // 978933f4
57875788
ImageInstance, // 9a100753

‎packages/react-native/index.js.flow‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,10 @@ export type {
6161
ImageURISource,
6262
} from './Libraries/Image/ImageSource';
6363
export {default as Image} from './Libraries/Image/Image';
64-
export type {ImageBackgroundInstance} from './Libraries/Image/ImageBackground';
64+
/**
65+
* `ImageBackgroundInstance` deprecated please use ViewInstance instead.
66+
*/
67+
export type {ViewInstance as ImageBackgroundInstance} from './Libraries/Components/View/View';
6568
export {default as ImageBackground} from './Libraries/Image/ImageBackground';
6669
export type {ImageResizeMode} from './Libraries/Image/ImageResizeMode';
6770

0 commit comments

Comments
 (0)