subtracks/app/components/GradientBackground.tsx
2021-07-08 12:21:44 +09:00

32 lines
889 B
TypeScript

import React from 'react'
import { useWindowDimensions, ViewStyle } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import colorStyles from '@app/styles/colors'
const GradientBackground: React.FC<{
height?: number | string
width?: number | string
position?: 'relative' | 'absolute'
style?: ViewStyle
colors?: string[]
locations?: number[]
}> = ({ height, width, position, style, colors, locations, children }) => {
const layout = useWindowDimensions()
return (
<LinearGradient
colors={colors || [colorStyles.gradient.high, colorStyles.gradient.low]}
locations={locations || [0.01, 0.7]}
style={{
...style,
width: width || '100%',
height: height || layout.height,
position: position || 'absolute',
}}>
{children}
</LinearGradient>
)
}
export default GradientBackground