Skip to content

Commit 4d0f2b2

Browse files
coadofacebook-github-bot
authored andcommitted
Align ImageStyle overflow prop type and compose function type (#51285)
Summary: Pull Request resolved: #51285 The `composeStyles` function should correctly determine the type of the input styles (`ViewStyle`, `ImageStyle`, `TextStyle`) base on the output type: ```ts const combinedStyle8: StyleProp<ImageStyle> = StyleSheet.compose( // ts-expect-error composeTextStyle, composeTextStyle, ); ``` This diff adds generic type checking for `compose` function and fixes `ImageStyle` overflow prop type which accepted `scroll` property (which wasn't previously accepted in manual types) and which enables type system to distinguish `ImageStyle` from `ViewStyle` and `TextStyle`: previous: ```ts overflow?: 'visible' | 'hidden' | 'scroll' ``` current: ```t overflow?: 'visible' | 'hidden' ``` Changelog: [Internal] Reviewed By: huntie Differential Revision: D74574293 fbshipit-source-id: 751a44f2d3cd43055d93031343995f16ef87b185
1 parent b817b1a commit 4d0f2b2

File tree

5 files changed

+16
-5
lines changed

5 files changed

+16
-5
lines changed

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1002,6 +1002,7 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
10021002
objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
10031003
tintColor?: ____ColorValue_Internal,
10041004
overlayColor?: string,
1005+
overflow?: 'visible' | 'hidden',
10051006
}>;
10061007

10071008
export type ____ImageStyle_Internal = $ReadOnly<{

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7518,6 +7518,7 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
75187518
objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\" | \\"none\\",
75197519
tintColor?: ____ColorValue_Internal,
75207520
overlayColor?: string,
7521+
overflow?: \\"visible\\" | \\"hidden\\",
75217522
}>;
75227523
export type ____ImageStyle_Internal = $ReadOnly<{
75237524
...____ImageStyle_InternalCore,

packages/react-native/src/private/styles/composeStyles.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,26 @@
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-
* @flow strict
87
* @format
98
*/
109

10+
import type {
11+
ImageStyle,
12+
TextStyle,
13+
ViewStyle,
14+
} from '../../../Libraries/StyleSheet/StyleSheet';
15+
import type {StyleProp} from '../../../Libraries/StyleSheet/StyleSheetTypes';
16+
1117
/**
1218
* Combines two styles such that `style2` will override any styles in `style1`.
1319
* If either style is null or undefined, the other one is returned without
1420
* allocating an array, saving allocations and enabling memoization.
1521
*/
16-
export default function composeStyles<T1, T2>(
17-
style1: ?T1,
18-
style2: ?T2,
19-
): ?(T1 | T2 | $ReadOnlyArray<T1 | T2>) {
22+
export default function composeStyles<
23+
T: ViewStyle | ImageStyle | TextStyle,
24+
U: T,
25+
V: T,
26+
>(style1: ?StyleProp<U>, style2: ?StyleProp<V>): ?StyleProp<T> {
2027
if (style1 == null) {
2128
return style2;
2229
}

packages/rn-tester/js/examples/Filter/FilterExample.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function StaticViewAndImage(props: Props): React.Node {
3434
<Text>Hello world!</Text>
3535
</View>
3636
</View>
37+
{/* $FlowFixMe - ImageStyle is not compatible with ViewStyle */}
3738
<Image
3839
source={props.imageSource ?? hotdog}
3940
style={[props.style, styles.commonImage]}

packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ function LayeredImage(props: Props) {
4848
<ImageBackground
4949
source={require('../../assets/rainbow.jpeg')}
5050
style={[styles.backdrop, {width: 200}]}>
51+
{/* $FlowFixMe - ImageStyle is not compatible with ViewStyle */}
5152
<Image
5253
source={require('../../assets/alpha-hotdog.png')}
5354
style={[styles.commonImage, props.style]}

0 commit comments

Comments
 (0)