Settings
    Back

    Retro Script

    by VintageType

    Installation

    npx vp0@latest add retro-script

    Dependencies

    react-nativeexpo-linear-gradientreact-native-reanimated

    Details

    Resolution1290×2796Downloads5,100CategoryBottom Sheets
    Retro Script

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