Back
Peach Sorbet
by SoftTones
Installation
npx vp0@latest add peach-sorbet
Dependencies
react-nativeexpo-linear-gradientreact-native-reanimated
Details
Resolution1290×2796Downloads8,700CategoryLayouts
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 PeachSorbet = () => {
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