Settings
    Back

    Neon Pulse

    by PixelForge

    Installation

    npx vp0@latest add neon-pulse

    Dependencies

    react-nativeexpo-linear-gradientreact-native-reanimated

    Details

    Resolution1290×2796Downloads9,100CategoryButtons
    Neon Pulse

    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 NeonPulse = () => {
      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