Back
Bold Statement
by TypeWalls
Installation
npx vp0@latest add bold-statement
Dependencies
react-nativeexpo-linear-gradientreact-native-reanimated
Details
Resolution1290×2796Downloads3,800CategoryBottom 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 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