chore: use built-in linear-gradient() in example

Author: kacperkapusciak

example/package.json

@@ -12,7 +12,6 @@
     "@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

@@ -7,7 +7,6 @@ import {
 } 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';
@@ -60,15 +59,7 @@ export default function App() {
               }
             >
               {/* 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>
+              <Animated.View style={[styles.gradient, shimmer]} />
             </MaskedView>
           </View>
         </>
@@ -164,13 +155,13 @@ const styles = StyleSheet.create({
     height: 48,
     width: 210,
   },
-  gradientContainer: {
+  gradient: {
     flex: 1,
     width: '300%',
     marginHorizontal: '-100%',
-  },
-  gradient: {
-    flex: 1,
-    width: '100%',
+    [process.env.EXPO_OS === 'web'
+      ? 'backgroundImage'
+      : 'experimental_backgroundImage']:
+      'linear-gradient(100deg, #e2e8f0 46%, #f8fafc 50%, #e2e8f0 54%)',
   },
 });

yarn.lock

@@ -6542,17 +6542,6 @@ __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.7":
   version: 2.0.7
   resolution: "expo-modules-autolinking@npm:2.0.7"
@@ -11753,7 +11742,6 @@ __metadata:
     "@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