[RNMobile] Allow to display radial-gradient

packages/block-library/src/button/color-background.native.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { LinearGradient, colorsUtils } from '@wordpress/components';
+import { Gradient, colorsUtils } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -24,7 +24,7 @@ function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
 	return (
 		<View style={ wrapperStyles }>
 			{ isGradient( backgroundColor ) && (
-				<LinearGradient
+				<Gradient
 					gradientValue={ backgroundColor }
 					angleCenter={ { x: 0.5, y: 0.5 } }
 					style={ [

packages/block-library/src/button/edit.native.js

@@ -189,6 +189,7 @@ class ButtonEdit extends Component {
 		}
 		return (
 			getColorAndStyleProps( attributes ).style?.backgroundColor ||
+			getColorAndStyleProps( attributes ).style?.background ||
 			// We still need the `backgroundColor.color` to support colors from the color pallete (not custom ones)
 			backgroundColor.color ||
 			styles.defaultButton.backgroundColor

packages/block-library/src/cover/edit.native.js

@@ -20,7 +20,7 @@ import {
 	RangeControl,
 	ToolbarButton,
 	ToolbarGroup,
-	LinearGradient,
+	Gradient,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -324,7 +324,7 @@ const Cover = ( {
 
 			<View pointerEvents="none" style={ overlayStyles }>
 				{ gradientValue && (
-					<LinearGradient
+					<Gradient
 						gradientValue={ gradientValue }
 						style={ styles.background }
 					/>

packages/components/src/color-indicator/index.native.js

@@ -6,7 +6,7 @@ import { View, Animated } from 'react-native';
  * WordPress dependencies
  */
 import { Icon, check } from '@wordpress/icons';
-import { LinearGradient } from '@wordpress/components';
+import { Gradient } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -39,21 +39,21 @@ function ColorIndicator( {
 
 	if ( isGradient( color ) ) {
 		return (
-			<LinearGradient
+			<Gradient
 				style={ [ styles.circleOption, style ] }
 				gradientValue={ color }
 			>
 				<View style={ outlineStyle } />
 				{ isSelected && <SelectedIcon opacity={ opacity } /> }
-			</LinearGradient>
+			</Gradient>
 		);
 	} else if ( withCustomPicker ) {
 		return (
 			<View style={ [ styles.circleOption, style ] }>
 				<View style={ outlineStyle } />
 				{ color.map( ( gradientValue ) => {
 					return (
-						<LinearGradient
+						<Gradient
 							gradientValue={ gradientValue }
 							style={ [ styles.circleOption, styles.absolute ] }
 							key={ gradientValue }

packages/components/src/index.native.js

@@ -62,7 +62,7 @@ export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint';
-export { default as LinearGradient } from './mobile/linear-gradient';
+export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 
 // Utils

packages/components/src/mobile/color-settings/index.native.js

@@ -37,7 +37,8 @@ function ColorSettings( {
 	const [ isCustomScreen, setIsCustomScreen ] = useState( false );
 
 	const { segments, subsheets, isGradient } = colorsUtils;
-	const selectedSegmentIndex = isGradient( currentValue ) ? 1 : 0;
+	const isGradientColor = isGradient( currentValue );
+	const selectedSegmentIndex = isGradientColor ? 1 : 0;
 
 	const [ currentSegment, setCurrentSegment ] = useState(
 		segments[ selectedSegmentIndex ]
@@ -150,7 +151,7 @@ function ColorSettings( {
 						}
 						setColor={ setColor }
 						activeColor={ currentValue }
-						isGradientColor={ isGradient( currentValue ) }
+						isGradientColor={ isGradientColor }
 						onNavigationBack={ () => {
 							onCustomScreenToggle( false );
 						} }
@@ -172,7 +173,7 @@ function ColorSettings( {
 					<ColorPalette
 						setColor={ setColor }
 						activeColor={ currentValue }
-						isGradientColor={ isGradient( currentValue ) }
+						isGradientColor={ isGradientColor }
 						currentSegment={ currentSegment }
 						isCustomScreen={ isCustomScreen }
 						onCustomPress={ () => {

packages/components/src/mobile/color-settings/utils.native.js

@@ -1,8 +1,23 @@
+const gradients = {
+	linear: 'linear',
+	radial: 'radial',
+};
+
+const getGradientType = ( color ) => {
+	if ( color.includes( 'radial-gradient' ) ) {
+		return gradients.radial;
+	} else if ( color.includes( 'linear-gradient' ) ) {
+		return gradients.linear;
+	}
+	return false;
+};
 export const colorsUtils = {
 	subsheets: {
 		settings: 'Settings',
 		color: 'Color',
 	},
 	segments: [ 'Solid', 'Gradient' ],
-	isGradient: ( color ) => color?.includes( 'linear-gradient' ),
+	gradients,
+	getGradientType,
+	isGradient: ( color ) => !! getGradientType( color ),
 };

packages/components/src/mobile/gradient/index.native.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { View, Platform } from 'react-native';
+import RNLinearGradient from 'react-native-linear-gradient';
+/**
+ * WordPress dependencies
+ */
+import { colorsUtils } from '@wordpress/components';
+import { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';
+import { useResizeObserver } from '@wordpress/compose';
+
+function Gradient( {
+	gradientValue,
+	style,
+	angleCenter = { x: 0.5, y: 0.5 },
+	...otherProps
+} ) {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const { width = 0, height = 0 } = sizes || {};
+	const { isGradient, getGradientType, gradients } = colorsUtils;
+
+	if ( ! gradientValue || ! isGradient( gradientValue ) ) {
+		return null;
+	}
+
+	const isLinearGradient =
+		getGradientType( gradientValue ) === gradients.linear;
+
+	const matchColorGroup = /(rgba|rgb|#)(.+?)[\%]/g;
+	const matchDeg = /(\d.+)deg/g;
+
+	const colorGroup = gradientValue
+		.match( matchColorGroup )
+		.map( ( color ) => color.split( ' ' ) );
+
+	const colors = colorGroup.map( ( color ) => color[ 0 ] );
+	const locations = colorGroup.map(
+		( location ) => Number( location[ 1 ].replace( '%', '' ) ) / 100
+	);
+
+	const angle =
+		isLinearGradient && Number( matchDeg.exec( gradientValue )[ 1 ] );
+
+	if ( isLinearGradient ) {
+		return (
+			<RNLinearGradient
+				colors={ colors }
+				useAngle={ true }
+				angle={ angle }
+				locations={ locations }
+				angleCenter={ angleCenter }
+				style={ style }
+				{ ...otherProps }
+			/>
+		);
+	}
+
+	return (
+		<View style={ [ style, { overflow: 'hidden' } ] }>
+			{ resizeObserver }
+			<SVG>
+				<Defs>
+					<RadialGradient
+						//eslint-disable-next-line no-restricted-syntax
+						id="radialGradient"
+						gradientUnits="userSpaceOnUse"
+						rx="70%"
+						ry="70%"
+						cy={ Platform.OS === 'android' ? width / 2 : '50%' }
+					>
+						{ colorGroup.map( ( group ) => {
+							return (
+								<Stop
+									offset={ group[ 1 ] }
+									stopColor={ group[ 0 ] }
+									stopOpacity="1"
+									key={ group[ 0 ] }
+								/>
+							);
+						} ) }
+					</RadialGradient>
+				</Defs>
+				<Rect
+					height={ height }
+					width={ width }
+					fill="url(#radialGradient)"
+				/>
+			</SVG>
+		</View>
+	);
+}
+
+export default Gradient;