feat: finish off shimmer

Author: kacperkapusciak

README.md

@@ -1,6 +1,5 @@
 <img width="1100" alt="header" src="https://github.com/user-attachments/assets/cbf6ecfa-8a0f-4841-8fc0-982aa04e618e" />
 
-
 Ready-to-use CSS Animation presets for [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)
 
 > [!TIP]
@@ -75,12 +74,36 @@ function App() {
 }
 ```
 
+### Shimmer
+
+Add `shimmer` style object to an `Animated` component to make it animate from left to right indefinitely. Great for shimmer loading effect.
+
+<img src="https://github.com/user-attachments/assets/81e75ed0-b7ec-4f56-a06a-c593a626cb39" alt="Shimmer animation demo" align="right" width="275" />
+
+> [!NOTE]
+> While the `shimmer` style object supports both iOS, Android, and the Web, the example video on the right uses `@react-native-masked-view/masked-view` and `expo-linear-gradient`, and thus doesn't work on the Web.
+
+```jsx
+import { shimmer } from 'react-native-css-animations';
+import Animated from 'react-native-reanimated';
+
+function App() {
+  return <Animated.View style={[styles.gradient, shimmer]} />;
+}
+```
+
 ## Alternative API
 
 The following animations are also available in a form of React Native components.
 
 ```jsx
-import { Spin, Ping, Pulse, Bounce } from 'react-native-css-animations';
+import {
+  Spin,
+  Ping,
+  Pulse,
+  Bounce,
+  Shimmer,
+} from 'react-native-css-animations';
 
 function App() {
   return (
@@ -91,6 +114,29 @@ function App() {
 }
 ```
 
+## Customizing animation presets
+
+You can customize the animation style objects by overriding the styles like so:
+
+```diff
+import { shimmer } from 'react-native-css-animations';
+import Animated from 'react-native-reanimated';
+
+function App() {
+  return <Animated.View
+    style={[
+      styles.gradient,
+      shimmer,
++      {
++        animationName: {
++          to: { transform: [{ translateX: '100%' }] },
++        },
++      },
+    ]}
+  >
+}
+```
+
 ## Credits
 
 - The examples and animations were adopted from [Tailwind CSS](https://tailwindcss.com/docs/animation).

example/src/App.tsx

@@ -1,6 +1,12 @@
-import { bounce, ping, pulse, spin } from 'react-native-css-animations';
+import {
+  bounce,
+  ping,
+  pulse,
+  shimmer,
+  spin,
+} from 'react-native-css-animations';
 
-import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { Platform, SafeAreaView, StyleSheet, Text, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated from 'react-native-reanimated';
 import Fontisto from '@expo/vector-icons/Fontisto';
@@ -10,15 +16,6 @@ import MaskedView from '@react-native-masked-view/masked-view';
 
 const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 
-const shimmer = {
-  from: {
-    transform: [{ translateX: '-25%' }],
-  },
-  to: {
-    transform: [{ translateX: '25%' }],
-  },
-};
-
 export default function App() {
   return (
     <SafeAreaView style={styles.container}>
@@ -46,45 +43,38 @@ export default function App() {
       </View>
 
       <Text style={styles.label}>Bounce</Text>
+      {/* Bounce animation ⬇️ */}
       <Animated.View style={[styles.arrow, bounce]}>
         <Entypo name="chevron-down" size={24} color="black" />
       </Animated.View>
 
-      <Text style={styles.label}>Skimmer</Text>
-      <View style={styles.shimmerContainer}>
-        <MaskedView
-          style={{ height: 48, width: 48 + 12 + 150 }}
-          maskElement={
-            <View style={styles.skeletonContainer}>
-              <Animated.View style={styles.skeletonAvatar} />
-              <Animated.View style={styles.skeletonText} />
-            </View>
-          }
-        >
-          <Animated.View
-            style={{
-              flex: 1,
-              width: '300%',
-              marginHorizontal: '-100%',
-              animationName: shimmer,
-              animationDuration: '1s',
-              animationIterationCount: 'infinite',
-              animationTimingFunction: 'linear',
-            }}
-          >
-            <AnimatedLinearGradient
-              colors={['#e2e8f0', '#f8fafc', '#e2e8f0']}
-              locations={[0.46, 0.5, 0.54]}
-              start={{ x: 0, y: -5 }}
-              end={{ x: 1, y: 5 }}
-              style={{
-                flex: 1,
-                width: '100%',
-              }}
-            />
-          </Animated.View>
-        </MaskedView>
-      </View>
+      {(Platform.OS === 'ios' || Platform.OS === 'android') && (
+        <>
+          <Text style={styles.label}>Shimmer</Text>
+          <View style={styles.shimmerContainer}>
+            <MaskedView
+              style={styles.mask}
+              maskElement={
+                <View style={styles.skeletonContainer}>
+                  <Animated.View style={styles.skeletonAvatar} />
+                  <Animated.View style={styles.skeletonText} />
+                </View>
+              }
+            >
+              {/* Shimmer animation ⬇️ */}
+              <Animated.View style={[styles.gradientContainer, shimmer]}>
+                <AnimatedLinearGradient
+                  colors={['#e2e8f0', '#f8fafc', '#e2e8f0']}
+                  locations={[0.46, 0.5, 0.54]}
+                  start={{ x: 0, y: -5 }}
+                  end={{ x: 1, y: 5 }}
+                  style={styles.gradient}
+                />
+              </Animated.View>
+            </MaskedView>
+          </View>
+        </>
+      )}
     </SafeAreaView>
   );
 }
@@ -172,4 +162,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  mask: {
+    height: 48,
+    width: 210,
+  },
+  gradientContainer: {
+    flex: 1,
+    width: '300%',
+    marginHorizontal: '-100%',
+  },
+  gradient: {
+    flex: 1,
+    width: '100%',
+  },
 });

src/index.tsx

@@ -123,3 +123,29 @@ export function Bounce({
     </Animated.View>
   );
 }
+
+export const shimmer: CSSStyleDeclaration = {
+  animationName: {
+    from: {
+      transform: [{ translateX: '-25%' }],
+    },
+    to: {
+      transform: [{ translateX: '25%' }],
+    },
+  },
+  animationDuration: '1s',
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'linear',
+};
+
+export function Shimmer({
+  style,
+  children,
+  ...rest
+}: React.PropsWithChildren<CSSAnimationProps>): JSX.Element {
+  return (
+    <Animated.View style={[shimmer, style]} {...rest}>
+      {children}
+    </Animated.View>
+  );
+}