import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AnimatedGlow, { PresetConfig } from 'react-native-animated-glow';
// 1. Define your preset object
const myCustomGlow: PresetConfig = {
cornerRadius: 70,
outlineWidth: 0,
borderColor: 'white',
animationSpeed: 1,
randomness: 0.001,
outerGlowColors: ['#f82fc6', '#5a4ff9', '#ff923e'],
outerGlowOpacity: 0.5,
outerGlowDotSize: 50,
outerGlowNumberOfOrbs: 40,
outerGlowInset: 9,
outerGlowSpeedMultiplier: 1,
outerGlowScaleAmplitude: 0,
outerGlowScaleFrequency: 2.5,
innerGlowColors: ['#bd2e99', '#00c2ff', '#ff7032', '#ff8352'],
innerGlowOpacity: 1,
innerGlowDotSize: 30,
innerGlowNumberOfOrbs: 60,
innerGlowInset: 9,
innerGlowSpeedMultiplier: 1,
innerGlowScaleAmplitude: 0,
innerGlowScaleFrequency: 2.5,
};
// 2. Use it in your component
export default function MyGlowingComponent() {
return (
<AnimatedGlow {...myCustomGlow}>
<View style={[styles.box, { borderRadius: 70 }]}>
<Text style={[styles.boxText, { color: myCustomGlow.borderColor }]}>myCustomGlow</Text>
</View>
</AnimatedGlow>
);
}
const styles = StyleSheet.create({
box: {
paddingVertical: 20,
paddingHorizontal: 40,
backgroundColor: '#222',
},
boxText: {
fontWeight: 'bold',
fontSize: 16,
},
});