47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
/**
|
|
* Gradient Background Component
|
|
* Reusable gradient background with multiple presets
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { StyleSheet, ViewStyle } from 'react-native';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { theme } from '../styles/theme';
|
|
|
|
interface GradientBackgroundProps {
|
|
variant?: 'primary' | 'success' | 'warning' | 'danger' | 'purple' | 'ocean' | 'sunset' | 'dark';
|
|
colors?: string[];
|
|
style?: ViewStyle;
|
|
children?: React.ReactNode;
|
|
start?: { x: number; y: number };
|
|
end?: { x: number; y: number };
|
|
}
|
|
|
|
export function GradientBackground({
|
|
variant = 'primary',
|
|
colors,
|
|
style,
|
|
children,
|
|
start = { x: 0, y: 0 },
|
|
end = { x: 1, y: 1 },
|
|
}: GradientBackgroundProps) {
|
|
const gradientColors = (colors || theme.gradients[variant]) as readonly [string, string, ...string[]];
|
|
|
|
return (
|
|
<LinearGradient
|
|
colors={gradientColors}
|
|
start={start}
|
|
end={end}
|
|
style={[styles.gradient, style]}
|
|
>
|
|
{children}
|
|
</LinearGradient>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
gradient: {
|
|
flex: 1,
|
|
},
|
|
});
|