Settings
    Back

    Cool Purple

    by ColorCraft

    Installation

    npx vp0@latest add cool-purple

    Dependencies

    react-nativeexpo-linear-gradientreact-native-reanimated

    Details

    Resolution1290×2796Downloads9,300CategoryModals
    Cool Purple

    Usage

    Copy the code above and drop it into your React Native or Expo app. Install the dependencies if you don't have them yet.

    Code

    import React from 'react';
    import { View, StyleSheet, Dimensions } from 'react-native';
    import { LinearGradient } from 'expo-linear-gradient';
    import Animated, {
      useAnimatedStyle,
      withRepeat,
      withTiming,
    } from 'react-native-reanimated';
    
    const { width, height } = Dimensions.get('window');
    
    export const CoolPurple = () => {
      const animatedStyle = useAnimatedStyle(() => ({
        opacity: withRepeat(withTiming(0.8, { duration: 3000 }), -1, true),
      }));
    
      return (
        <View style={styles.container}>
          <LinearGradient
            colors={['#667eea', '#764ba2']}
            style={StyleSheet.absoluteFill}
          />
          <Animated.View style={[styles.overlay, animatedStyle]} />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: { flex: 1, width, height },
      overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(255,255,255,0.05)',
      },
    });

    Dependencies

    react-nativeexpo-linear-gradientreact-native-reanimated

    More like this