|  | 
| 1 |  | -import { SafeAreaView, StyleSheet, Text, View } from 'react-native'; | 
|  | 1 | +import { | 
|  | 2 | +  bounce, | 
|  | 3 | +  ping, | 
|  | 4 | +  pulse, | 
|  | 5 | +  shimmer, | 
|  | 6 | +  spin, | 
|  | 7 | +} from 'react-native-css-animations'; | 
|  | 8 | + | 
|  | 9 | +import { Platform, SafeAreaView, StyleSheet, Text, View } from 'react-native'; | 
|  | 10 | +import { LinearGradient } from 'expo-linear-gradient'; | 
| 2 | 11 | import Animated from 'react-native-reanimated'; | 
| 3 | 12 | import Fontisto from '@expo/vector-icons/Fontisto'; | 
| 4 | 13 | import Entypo from '@expo/vector-icons/Entypo'; | 
| 5 | 14 | import EvilIcons from '@expo/vector-icons/EvilIcons'; | 
| 6 |  | -import { bounce, ping, pulse, spin } from 'react-native-css-animations'; | 
|  | 15 | +import MaskedView from '@react-native-masked-view/masked-view'; | 
| 7 | 16 | 
 | 
| 8 | 17 | export default function App() { | 
| 9 | 18 |   return ( | 
| @@ -32,9 +41,38 @@ export default function App() { | 
| 32 | 41 |       </View> | 
| 33 | 42 | 
 | 
| 34 | 43 |       <Text style={styles.label}>Bounce</Text> | 
|  | 44 | +      {/* Bounce animation ⬇️ */} | 
| 35 | 45 |       <Animated.View style={[styles.arrow, bounce]}> | 
| 36 | 46 |         <Entypo name="chevron-down" size={24} color="black" /> | 
| 37 | 47 |       </Animated.View> | 
|  | 48 | + | 
|  | 49 | +      {(Platform.OS === 'ios' || Platform.OS === 'android') && ( | 
|  | 50 | +        <> | 
|  | 51 | +          <Text style={styles.label}>Shimmer</Text> | 
|  | 52 | +          <View style={styles.shimmerContainer}> | 
|  | 53 | +            <MaskedView | 
|  | 54 | +              style={styles.mask} | 
|  | 55 | +              maskElement={ | 
|  | 56 | +                <View style={styles.skeletonContainer}> | 
|  | 57 | +                  <Animated.View style={styles.skeletonAvatar} /> | 
|  | 58 | +                  <Animated.View style={styles.skeletonText} /> | 
|  | 59 | +                </View> | 
|  | 60 | +              } | 
|  | 61 | +            > | 
|  | 62 | +              {/* Shimmer animation ⬇️ */} | 
|  | 63 | +              <Animated.View style={[styles.gradientContainer, shimmer]}> | 
|  | 64 | +                <LinearGradient | 
|  | 65 | +                  colors={['#e2e8f0', '#f8fafc', '#e2e8f0']} | 
|  | 66 | +                  locations={[0.46, 0.5, 0.54]} | 
|  | 67 | +                  start={{ x: 0, y: -5 }} | 
|  | 68 | +                  end={{ x: 1, y: 5 }} | 
|  | 69 | +                  style={styles.gradient} | 
|  | 70 | +                /> | 
|  | 71 | +              </Animated.View> | 
|  | 72 | +            </MaskedView> | 
|  | 73 | +          </View> | 
|  | 74 | +        </> | 
|  | 75 | +      )} | 
| 38 | 76 |     </SafeAreaView> | 
| 39 | 77 |   ); | 
| 40 | 78 | } | 
| @@ -116,4 +154,23 @@ const styles = StyleSheet.create({ | 
| 116 | 154 |     justifyContent: 'center', | 
| 117 | 155 |     borderColor: '#e2e8f0', | 
| 118 | 156 |   }, | 
|  | 157 | +  shimmerContainer: { | 
|  | 158 | +    width: '100%', | 
|  | 159 | +    height: 48, | 
|  | 160 | +    alignItems: 'center', | 
|  | 161 | +    justifyContent: 'center', | 
|  | 162 | +  }, | 
|  | 163 | +  mask: { | 
|  | 164 | +    height: 48, | 
|  | 165 | +    width: 210, | 
|  | 166 | +  }, | 
|  | 167 | +  gradientContainer: { | 
|  | 168 | +    flex: 1, | 
|  | 169 | +    width: '300%', | 
|  | 170 | +    marginHorizontal: '-100%', | 
|  | 171 | +  }, | 
|  | 172 | +  gradient: { | 
|  | 173 | +    flex: 1, | 
|  | 174 | +    width: '100%', | 
|  | 175 | +  }, | 
| 119 | 176 | }); | 
0 commit comments