60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import LinearGradient from "react-native-linear-gradient";
|
|
import { isValidHexColors } from "../utilities/ValidateColors";
|
|
import { Orientation } from "../constants/StringConstant";
|
|
import { ViewStyle } from "react-native";
|
|
|
|
export const NaviLinearGradient = ({
|
|
gradientColors,
|
|
defaultColors,
|
|
children,
|
|
orientation,
|
|
style,
|
|
}: {
|
|
gradientColors?: string[];
|
|
defaultColors?: string[];
|
|
children?: React.ReactNode;
|
|
orientation?: string;
|
|
style?: ViewStyle;
|
|
}) => {
|
|
let startValue;
|
|
switch (orientation) {
|
|
case Orientation.VERTICAL:
|
|
startValue = { x: 0.5, y: 0 };
|
|
break;
|
|
case Orientation.HORIZONTAL:
|
|
startValue = { x: 0, y: 0.5 };
|
|
break;
|
|
case Orientation.DIAGONAL:
|
|
startValue = { x: 0, y: 0 };
|
|
break;
|
|
default:
|
|
startValue = { x: 0.5, y: 0 };
|
|
break;
|
|
}
|
|
let endValue;
|
|
switch (orientation) {
|
|
case Orientation.VERTICAL:
|
|
endValue = { x: 0.5, y: 1 };
|
|
break;
|
|
case Orientation.HORIZONTAL:
|
|
endValue = { x: 1, y: 0.5 };
|
|
break;
|
|
case Orientation.DIAGONAL:
|
|
endValue = { x: 1, y: 1 };
|
|
break;
|
|
default:
|
|
endValue = { x: 0.5, y: 1 };
|
|
break;
|
|
}
|
|
return (
|
|
<LinearGradient
|
|
colors={isValidHexColors(gradientColors, defaultColors)}
|
|
start={startValue}
|
|
end={endValue}
|
|
style={style}
|
|
>
|
|
{children}
|
|
</LinearGradient>
|
|
);
|
|
};
|