feat: add shimmer style object

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/package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~4.0.0",
+    "@react-native-masked-view/masked-view": "0.3.2",
     "expo": "~52.0.25",
+    "expo-linear-gradient": "~14.0.2",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",

example/src/App.tsx

@@ -1,9 +1,18 @@
-import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import {
+  bounce,
+  ping,
+  pulse,
+  shimmer,
+  spin,
+} from 'react-native-css-animations';
+
+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';
 import Entypo from '@expo/vector-icons/Entypo';
 import EvilIcons from '@expo/vector-icons/EvilIcons';
-import { bounce, ping, pulse, spin } from 'react-native-css-animations';
+import MaskedView from '@react-native-masked-view/masked-view';
 
 export default function App() {
   return (
@@ -32,9 +41,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>
+
+      {(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]}>
+                <LinearGradient
+                  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>
   );
 }
@@ -116,4 +154,23 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderColor: '#e2e8f0',
   },
+  shimmerContainer: {
+    width: '100%',
+    height: 48,
+    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>
+  );
+}

yarn.lock

@@ -2906,6 +2906,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-masked-view/masked-view@npm:0.3.2":
+  version: 0.3.2
+  resolution: "@react-native-masked-view/masked-view@npm:0.3.2"
+  peerDependencies:
+    react: ">=16"
+    react-native: ">=0.57"
+  checksum: e35ab882148df3f9b71f04355d2fb1b24d6f2aaf29043f80758f398bdf905eed67734b36b072fa8b934923ff4e3d80ccb5e37d8376cb1825272078b96a21dadc
+  languageName: node
+  linkType: hard
+
 "@react-native/assets-registry@npm:0.76.6":
   version: 0.76.6
   resolution: "@react-native/assets-registry@npm:0.76.6"
@@ -6546,6 +6556,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-linear-gradient@npm:~14.0.2":
+  version: 14.0.2
+  resolution: "expo-linear-gradient@npm:14.0.2"
+  peerDependencies:
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 3f318f50fae44b1f2f90becf421a1c7c0c2822e0a381031fa6d893899173b7ecc6f0c4eddde699e6825fd091d5576cf5960ba81046aeaf0300f44de1147bb543
+  languageName: node
+  linkType: hard
+
 "expo-modules-autolinking@npm:2.0.5":
   version: 2.0.5
   resolution: "expo-modules-autolinking@npm:2.0.5"
@@ -11785,7 +11806,9 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.0
     "@expo/metro-runtime": ~4.0.0
+    "@react-native-masked-view/masked-view": 0.3.2
     expo: ~52.0.25
+    expo-linear-gradient: ~14.0.2
     expo-status-bar: ~2.0.1
     react: 18.3.1
     react-dom: 18.3.1