Skip to content

Commit 1b45dc8

Browse files
feat: radial gradient js prop passing (#50268)
Summary: Adds JS changes for radial gradient. Previous PR - #50209 ## Changelog: [GENERAL] [ADDED] - Radial gradient <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #50268 Test Plan: - Added tests in `processBackgroundImage-test.js` in #50268 - Merge this, #50266 and #50269 and check examples in `RadialGradientExample.js` Reviewed By: NickGerleman Differential Revision: D71898524 Pulled By: jorge-cab fbshipit-source-id: 39bdf0f647ba19839b6e6deb09b30a1c337e6457
1 parent a240994 commit 1b45dc8

File tree

9 files changed

+1329
-266
lines changed

9 files changed

+1329
-266
lines changed

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ export type BlendMode =
368368
| 'luminosity';
369369

370370
export type GradientValue = {
371-
type: 'linearGradient';
371+
type: 'linear-gradient';
372372
// Angle or direction enums
373373
direction?: string | undefined;
374374
colorStops: ReadonlyArray<{

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

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -725,8 +725,8 @@ export type DropShadowValue = {
725725
color?: ____ColorValue_Internal,
726726
};
727727

728-
export type GradientValue = {
729-
type: 'linearGradient',
728+
type LinearGradientValue = {
729+
type: 'linear-gradient',
730730
// Angle or direction enums
731731
direction?: string,
732732
colorStops: $ReadOnlyArray<{
@@ -735,6 +735,50 @@ export type GradientValue = {
735735
}>,
736736
};
737737

738+
type RadialExtent =
739+
| 'closest-corner'
740+
| 'closest-side'
741+
| 'farthest-corner'
742+
| 'farthest-side';
743+
export type RadialGradientPosition =
744+
| {
745+
top: number | string,
746+
left: number | string,
747+
}
748+
| {
749+
top: number | string,
750+
right: number | string,
751+
}
752+
| {
753+
bottom: number | string,
754+
left: number | string,
755+
}
756+
| {
757+
bottom: number | string,
758+
right: number | string,
759+
};
760+
761+
export type RadialGradientShape = 'circle' | 'ellipse';
762+
export type RadialGradientSize =
763+
| RadialExtent
764+
| {
765+
x: string | number,
766+
y: string | number,
767+
};
768+
769+
type RadialGradientValue = {
770+
type: 'radial-gradient',
771+
shape: RadialGradientShape,
772+
size: RadialGradientSize,
773+
position: RadialGradientPosition,
774+
colorStops: $ReadOnlyArray<{
775+
color: ____ColorValue_Internal,
776+
positions?: $ReadOnlyArray<string>,
777+
}>,
778+
};
779+
780+
export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
781+
738782
export type BoxShadowValue = {
739783
offsetX: number | string,
740784
offsetY: number | string,
@@ -808,7 +852,7 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
808852
boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
809853
filter?: $ReadOnlyArray<FilterFunction> | string,
810854
mixBlendMode?: ____BlendMode_Internal,
811-
experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
855+
experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
812856
isolation?: 'auto' | 'isolate',
813857
}>;
814858

0 commit comments

Comments
 (0)