react-native-ui-lib 7.46.2 → 7.46.3-snapshot.7330

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.46.2",
+  "version": "7.46.3-snapshot.7330",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/commons/modifiers.d.ts

@@ -111,6 +111,7 @@ export declare function extractModifierProps(props: Dictionary<any>): _.Dictiona
  */
 export declare function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]): _.Omit<_.Dictionary<any>, string>;
 export declare function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps?: string[]): _.Omit<_.Dictionary<any>, string>;
+export declare function getComponentName(componentDisplayName: string): any;
 export declare function getThemeProps<T extends object>(props?: T, context?: any, componentDisplayName?: string): T;
 export declare function generateModifiersStyle(options: ModifiersOptions | undefined, props: Dictionary<any>): ExtractedStyle;
 export declare function getAlteredModifiersOptions(currentProps: any, nextProps: any): AlteredOptions;

package/src/commons/modifiers.js

@@ -248,12 +248,15 @@ export function extractComponentProps(component, props, ignoreProps = []) {
   const componentProps = _flow(props => _pickBy(props, (_value, key) => _includes(Object.keys(componentPropTypes), key)), props => _omit(props, ignoreProps))(props);
   return componentProps;
 }
+export function getComponentName(componentDisplayName) {
+  //@ts-ignore
+  return componentDisplayName || this.displayName || this.constructor.displayName || this.constructor.name;
+}
 
 //@ts-ignore
 export function getThemeProps(props = this.props, context = this.context, componentDisplayName = '') {
-  const componentName =
   //@ts-ignore
-  componentDisplayName || this.displayName || this.constructor.displayName || this.constructor.name;
+  const componentName = getComponentName.call(this, componentDisplayName);
   let themeProps;
   if (_isFunction(ThemeManager.components[componentName])) {
     themeProps = ThemeManager.components[componentName](props, context);

package/src/components/button/button.api.json

@@ -161,6 +161,11 @@
       "name": "animateTo",
       "type": "ButtonAnimationDirection",
       "description": "the direction of the animation ('left' and 'right' will effect the button's own alignment)"
+    },
+    {
+      "name": "customBackground",
+      "type": "React.ReactElement",
+      "description": "Custom element to render as button background (takes precedence over backgroundColor)"
     }
   ],
   "snippet": [

package/src/components/button/index.d.ts

@@ -356,6 +356,9 @@ declare class Button extends PureComponent<Props, ButtonState> {
             verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
             includeFontPadding?: boolean | undefined;
         };
+        backgroundElement: {
+            overflow: "hidden";
+        };
     };
     componentDidUpdate(prevProps: Props): void;
     onLayout: (event: LayoutChangeEvent) => void;
@@ -407,6 +410,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
         left: number;
         right: number;
     };
+    renderCustomBackground(): React.JSX.Element | undefined;
     render(): React.JSX.Element;
 }
 export { Button };
@@ -440,6 +444,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }) | Omit<import("../touchableOpacity").TouchableOpacityProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
@@ -470,6 +475,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "ref"> | Omit<import("../touchableOpacity").TouchableOpacityProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
@@ -500,6 +506,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "ref"> | Omit<import("../touchableOpacity").TouchableOpacityProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
@@ -530,5 +537,6 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "ref">) & React.RefAttributes<{}>> & ComponentStatics<typeof Button>;
 export default _default;

package/src/components/button/index.js

@@ -4,6 +4,7 @@ import { Platform, StyleSheet, LayoutAnimation } from 'react-native';
 import { asBaseComponent, forwardRef, Constants } from "../../commons/new";
 import { Colors, Typography, BorderRadiuses } from "../../style";
 import TouchableOpacity from "../touchableOpacity";
+import View from "../view";
 import Text from "../text";
 import Icon from "../icon";
 import { ButtonSize, ButtonAnimationDirection, ButtonProps, DEFAULT_PROPS } from "./types";
@@ -358,6 +359,17 @@ class Button extends PureComponent {
       right: horizontalHitslop
     };
   }
+  renderCustomBackground() {
+    const {
+      customBackground
+    } = this.props;
+    if (customBackground) {
+      const borderRadiusStyle = this.getBorderRadiusStyle();
+      return <View absF style={[this.styles.backgroundElement, borderRadiusStyle]}>
+          {customBackground}
+        </View>;
+    }
+  }
   render() {
     const {
       onPress,
@@ -368,6 +380,7 @@ class Button extends PureComponent {
       modifiers,
       forwardedRef,
       hitSlop: hitSlopProp,
+      customBackground,
       ...others
     } = this.props;
     const shadowStyle = this.getShadowStyle();
@@ -375,13 +388,14 @@ class Button extends PureComponent {
       margins,
       paddings
     } = modifiers;
-    const backgroundColor = this.getBackgroundColor();
+    const backgroundColor = customBackground ? undefined : this.getBackgroundColor();
     const outlineStyle = this.getOutlineStyle();
     const containerSizeStyle = this.getContainerSizeStyle();
     const borderRadiusStyle = this.getBorderRadiusStyle();
     return <TouchableOpacity row centerV style={[this.styles.container, animateLayout && this.getAnimationDirectionStyle(), containerSizeStyle, this.isLink && this.styles.innerContainerLink, shadowStyle, margins, paddings, {
       backgroundColor
     }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} hitSlop={hitSlopProp ?? this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
+        {this.renderCustomBackground()}
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}
@@ -415,6 +429,9 @@ function createStyles() {
       backgroundColor: 'transparent',
       flexDirection: 'row',
       ...Typography.text70
+    },
+    backgroundElement: {
+      overflow: 'hidden'
     }
   });
 }

package/src/components/button/types.d.ts

@@ -138,6 +138,10 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
     animateTo?: ButtonAnimationDirectionProp;
+    /**
+     * Custom element to render as button background (takes precedence over backgroundColor)
+     */
+    customBackground?: React.ReactElement;
 };
 export type ButtonState = {
     size?: number;

package/src/incubator/gradient/BorderGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BorderGradientProps } from './types';
+declare const BorderGradient: (props: BorderGradientProps) => React.JSX.Element | null;
+export default BorderGradient;

package/src/incubator/gradient/BorderGradient.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import View from "../../components/view";
+import Spacings from "../../style/spacings";
+import Colors from "../../style/colors";
+import useAngleTransform from "./useAngleTransform";
+const BorderGradient = props => {
+  const {
+    colors,
+    borderWidth = Spacings.s1,
+    borderRadius,
+    children,
+    width,
+    height,
+    angle,
+    ...others
+  } = props;
+  const innerWidth = width ? width - borderWidth * 2 : undefined;
+  const innerHeight = height ? height - borderWidth * 2 : undefined;
+  const {
+    start,
+    end
+  } = useAngleTransform({
+    angle
+  });
+  if (!LinearGradient) {
+    return null;
+  }
+  return <View width={width} height={height}>
+      <LinearGradient colors={colors} start={start} end={end} style={{
+      borderRadius
+    }}>
+        <View bg-white width={innerWidth} height={innerHeight} style={{
+        margin: borderWidth,
+        borderRadius,
+        borderWidth: 0,
+        borderColor: Colors.transparent
+      }} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>;
+};
+export default BorderGradient;

package/src/incubator/gradient/CircleGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CircleGradientProps } from './types';
+declare const CircleGradient: (props: CircleGradientProps) => React.JSX.Element | null;
+export default CircleGradient;

package/src/incubator/gradient/CircleGradient.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import View from "../../components/view";
+import useAngleTransform from "./useAngleTransform";
+const CircleGradient = props => {
+  const {
+    colors,
+    radius,
+    angle,
+    children,
+    ...others
+  } = props;
+  const internalDiameter = radius ? radius * 2 : undefined;
+  const {
+    start,
+    end
+  } = useAngleTransform({
+    angle
+  });
+  if (!LinearGradient) {
+    return null;
+  }
+  return <View width={internalDiameter} height={internalDiameter} style={{
+    borderRadius: 999,
+    overflow: 'hidden'
+  }}>
+      <LinearGradient colors={colors} start={start} end={end}>
+        <View width={internalDiameter} height={internalDiameter} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>;
+};
+export default CircleGradient;

package/src/incubator/gradient/RectangleGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RectangleGradientProps } from './types';
+declare const RectangleGradient: (props: RectangleGradientProps) => React.JSX.Element | null;
+export default RectangleGradient;

package/src/incubator/gradient/RectangleGradient.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import View from "../../components/view";
+import useAngleTransform from "./useAngleTransform";
+const RectangleGradient = props => {
+  const {
+    colors,
+    width,
+    height,
+    angle,
+    children,
+    ...others
+  } = props;
+  const {
+    start,
+    end
+  } = useAngleTransform({
+    angle
+  });
+  if (!LinearGradient) {
+    return null;
+  }
+  return <View width={width} height={height}>
+      <LinearGradient colors={colors} start={start} end={end}>
+        <View width={width} height={height} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>;
+};
+export default RectangleGradient;

package/src/incubator/gradient/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { GradientProps } from './types';
+export { GradientProps };
+declare const Gradient: (props: GradientProps) => React.JSX.Element | null;
+export default Gradient;

package/src/incubator/gradient/index.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import { LogService } from "../../services";
+import { GradientProps } from "./types";
+import RectangleGradient from "./RectangleGradient";
+import CircleGradient from "./CircleGradient";
+import BorderGradient from "./BorderGradient";
+export { GradientProps };
+const Gradient = props => {
+  const {
+    type = 'rectangle',
+    ...others
+  } = props;
+  useEffect(() => {
+    if (LinearGradient === undefined) {
+      LogService.error(`RNUILib Gradient requires installing "react-native-linear-gradient" dependency`);
+    }
+  }, []);
+  switch (type) {
+    case 'rectangle':
+      return <RectangleGradient {...others} />;
+    case 'circle':
+      return <CircleGradient {...others} />;
+    case 'border':
+      return <BorderGradient {...others} />;
+    default:
+      return null;
+  }
+};
+export default Gradient;

package/src/incubator/gradient/types.d.ts

@@ -0,0 +1,26 @@
+import type { LinearGradientProps } from 'react-native-linear-gradient';
+type CommonGradientProps = Pick<LinearGradientProps, 'colors' | 'children'> & {
+    angle?: number;
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
+};
+export type GradientProps = ({
+    type: 'rectangle';
+} & RectangleGradientProps) | ({
+    type: 'circle';
+} & CircleGradientProps) | ({
+    type: 'border';
+} & BorderGradientProps);
+export type RectangleGradientProps = CommonGradientProps & {
+    width?: number;
+    height?: number;
+};
+export type CircleGradientProps = CommonGradientProps & {
+    radius: number;
+};
+export type BorderGradientProps = RectangleGradientProps & {
+    borderWidth?: number;
+    borderRadius?: number;
+};
+export {};

package/src/incubator/gradient/types.js

@@ -0,0 +1 @@
+export {};

package/src/incubator/gradient/useAngleTransform.d.ts

@@ -0,0 +1,27 @@
+declare function getStartEndFromAngle(angle?: number): {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export declare const _forTesting: {
+    getStartEndFromAngle: typeof getStartEndFromAngle;
+};
+export type AngleTransformProps = {
+    angle?: number;
+};
+declare const useAngleTransform: (props: AngleTransformProps) => {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export default useAngleTransform;

package/src/incubator/gradient/useAngleTransform.js

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+const EPSILON = 1e-12;
+function getStartEndFromAngle(angle = 0) {
+  // Normalize angle to [0, 360)
+  let a = angle % 360;
+  if (a < 0) {
+    a += 360;
+  }
+  const rad = a * Math.PI / 180;
+
+  // Direction vector where 0deg points up, 90deg right, etc.
+  const vx = Math.sin(rad);
+  const vy = -Math.cos(rad);
+
+  // Distance from center (0.5,0.5) to box edge along v
+  const denomX = Math.abs(vx) > EPSILON ? 0.5 / Math.abs(vx) : Number.POSITIVE_INFINITY;
+  const denomY = Math.abs(vy) > EPSILON ? 0.5 / Math.abs(vy) : Number.POSITIVE_INFINITY;
+  const t = Math.min(denomX, denomY);
+  const cx = 0.5;
+  const cy = 0.5;
+  const end = {
+    x: cx + vx * t,
+    y: cy + vy * t
+  };
+  const start = {
+    x: cx - vx * t,
+    y: cy - vy * t
+  };
+
+  // Quantize to avoid tiny floating errors for canonical angles (0, 45, 90, ...).
+  const quantize = v => {
+    if (Math.abs(v - 0) < EPSILON) {
+      return 0;
+    }
+    if (Math.abs(v - 0.5) < EPSILON) {
+      return 0.5;
+    }
+    if (Math.abs(v - 1) < EPSILON) {
+      return 1;
+    }
+    // Clamp just in case of tiny over/underflows
+    if (v < 0) {
+      return 0;
+    }
+    if (v > 1) {
+      return 1;
+    }
+    return v;
+  };
+  return {
+    start: {
+      x: quantize(start.x),
+      y: quantize(start.y)
+    },
+    end: {
+      x: quantize(end.x),
+      y: quantize(end.y)
+    }
+  };
+}
+export const _forTesting = {
+  getStartEndFromAngle
+}; // exporting private functions for testing only
+
+const useAngleTransform = props => {
+  const {
+    angle
+  } = props;
+  const startEnd = useMemo(() => getStartEndFromAngle(angle), [angle]);
+  return startEnd;
+};
+export default useAngleTransform;

package/src/incubator/index.d.ts

@@ -8,3 +8,4 @@ export { default as Slider, SliderRef, SliderProps } from './slider';
 export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from './dialog';
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from '../components/chipsInput';
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from '../components/WheelPicker';
+export { default as Gradient, GradientProps } from './gradient';

package/src/incubator/index.js

@@ -9,4 +9,5 @@ export { default as Slider, SliderRef, SliderProps } from "./slider";
 export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from "./dialog";
 // TODO: delete exports after fully removing from private
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from "../components/chipsInput";
-export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from "../components/WheelPicker";
+export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from "../components/WheelPicker";
+export { default as Gradient, GradientProps } from "./gradient";

package/src/optionalDependencies/LinearGradientPackage.d.ts

@@ -1,2 +1,2 @@
-declare let LinearGradientPackage: any;
+declare let LinearGradientPackage: typeof import('react-native-linear-gradient') | undefined;
 export default LinearGradientPackage;