33 lines
1016 B
TypeScript
33 lines
1016 B
TypeScript
import MaskedView from "@react-native-masked-view/masked-view";
|
|
import LinearGradient from "react-native-linear-gradient";
|
|
import { Text } from "react-native";
|
|
import { TextFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
|
|
import { isValidHexColors } from "../../../App/common/utilities/ValidateColors";
|
|
|
|
export const GradientText = ({
|
|
textFieldData,
|
|
colorsArray,
|
|
}: {
|
|
textFieldData: TextFieldData;
|
|
colorsArray?: string[];
|
|
}) => {
|
|
return (
|
|
<GradientMask colorsArray={colorsArray} textStyle={textFieldData.textStyle}>
|
|
{textFieldData.text}
|
|
</GradientMask>
|
|
);
|
|
};
|
|
|
|
export const GradientMask = (props: any) => {
|
|
return (
|
|
<MaskedView maskElement={<Text {...props} style={props.textStyle} />}>
|
|
<LinearGradient
|
|
colors={isValidHexColors(props.colorsArray)}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
>
|
|
<Text {...props} style={[props.textStyle, { opacity: 0 }]} />
|
|
</LinearGradient>
|
|
</MaskedView>
|
|
);
|
|
}; |