Settings
    Back

    Bold Statement

    by TypeWalls

    Installation

    npx vp0@latest add bold-statement

    Dependencies

    react-nativeexpo-linear-gradientreact-native-reanimated

    Details

    Resolution1290×2796Downloads3,800CategoryBottom Sheets
    Bold Statement

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