feat: add customizable gradient props to Shimmer component (#1)

authored by: Alex Zamfir <alex.zamfir@callstack.com>

Author: alexz88dev

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.

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<Props> = ({ 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<View>(null);
   const [offset, setOffset] = useState(0);
@@ -39,9 +51,9 @@ export const Shimmer: React.FC<Props> = ({ style }) => {
     <View ref={shimmerRef} onLayout={measure} style={[styles.container, style]}>
       <Animated.View style={[gradientStyle, styles.gradientWrapper]}>
         <MyLinearGradient
-          colors={['transparent', '#FFFFFF30', 'transparent']}
-          start={{ x: 0, y: 0.5 }}
-          end={{ x: 1, y: 0.5 }}
+          colors={linearGradients}
+          start={gradientStart}
+          end={gradientEnd}
           style={StyleSheet.absoluteFill}
         />
       </Animated.View>