Back
Retro Script
by VintageType
Installation
npx vp0@latest add retro-script
Dependencies
react-nativeexpo-linear-gradientreact-native-reanimated
Details
Resolution1290×2796Downloads5,100CategoryBottom Sheets
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