Settings
    Back

    Peach Sorbet

    by SoftTones

    Installation

    npx vp0@latest add peach-sorbet

    Dependencies

    react-nativeexpo-linear-gradientreact-native-reanimated

    Details

    Resolution1290×2796Downloads8,700CategoryLayouts
    Peach Sorbet

    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

    More like this