diff --git a/README.md b/README.md index d174476..954bc4f 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,17 @@ export default function App() { } ``` +## Props + +#### `Shimmer` Component + +| Prop | Type | Default | Description | +|-------------------|------------------------------------|----------------------------------------------|----------------------------------------------------| +| `style` | `ViewStyle` or `ViewStyle[]` | `undefined` | Custom styles for the Shimmer container. | +| `linearGradients` | `string[]` | `['transparent', '#FFFFFF30', 'transparent']` | Array of colors for the linear gradient animation. | +| `gradientStart` | `{ x: number; y: number }` | `{ x: 0, y: 0.5 }` | Start coordinates for the linear gradient. | +| `gradientEnd` | `{ x: number; y: number }` | `{ x: 1, y: 0.5 }` | End coordinates for the linear gradient. | + ## Contributing See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. diff --git a/src/Shimmer.tsx b/src/Shimmer.tsx index 9020594..9f816af 100644 --- a/src/Shimmer.tsx +++ b/src/Shimmer.tsx @@ -4,11 +4,23 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated'; import { ShimmerContext } from './ShimmerContext'; import { MyLinearGradient } from './LinearGradient'; +const DEFAULT_LINEAR_GRADIENTS = ['transparent', '#FFFFFF30', 'transparent']; +const DEFAULT_GRADIENT_START = { x: 0, y: 0.5 }; +const DEFAULT_GRADIENT_END = { x: 1, y: 0.5 }; + interface Props { style?: ViewStyle | ViewStyle[]; + linearGradients?: string[]; + gradientStart?: { x: number; y: number }; + gradientEnd?: { x: number; y: number }; } -export const Shimmer: React.FC = ({ style }) => { +export const Shimmer = ({ + style, + linearGradients = DEFAULT_LINEAR_GRADIENTS, + gradientStart = DEFAULT_GRADIENT_START, + gradientEnd = DEFAULT_GRADIENT_END, +}: Props): React.ReactNode => { const shimmer = useContext(ShimmerContext); const shimmerRef = React.useRef(null); const [offset, setOffset] = useState(0); @@ -39,9 +51,9 @@ export const Shimmer: React.FC = ({ style }) => {