Skip to content

Commit 50dbe85

Browse files
blazejkustrablazejkustra
authored
Merge pull request #11 from blazejkustra/glitter
feat: add Glitter component with animated sparkle effects and integrate into navigation
2 parents c862ccd + 9c6cd36 commit 50dbe85

File tree

8 files changed

+585
-0
lines changed

8 files changed

+585
-0
lines changed

‎example/assets/components/glitter.png‎

8.32 KB
Loading

‎example/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import CampfireStaticScreen from './screens/Campfire/CampfireStaticScreen';
1717
import CalicoSwirlStaticScreen from './screens/CalicoSwirl/CalicoSwirlStaticScreen';
1818
import DesertStaticScreen from './screens/Desert/DesertStaticScreen';
1919
import HoloStaticScreen from './screens/Holo/HoloStaticScreen';
20+
import GlitterStaticScreen from './screens/Glitter/GlitterStaticScreen';
2021
import type { RootStackParamList } from './types';
2122

2223
const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -77,6 +78,7 @@ export default function App() {
7778
/>
7879
<Stack.Screen name="DesertStatic" component={DesertStaticScreen} />
7980
<Stack.Screen name="HoloStatic" component={HoloStaticScreen} />
81+
<Stack.Screen name="GlitterStatic" component={GlitterStaticScreen} />
8082
</Stack.Navigator>
8183
</NavigationContainer>
8284
);

‎example/src/screens/Glitter/GlitterStaticScreen.tsx‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import {
2+
View,
3+
Text,
4+
StyleSheet,
5+
StatusBar,
6+
Image,
7+
ScrollView,
8+
Dimensions,
9+
type ImageSourcePropType,
10+
} from 'react-native';
11+
import { Glitter } from 'react-native-backgrounds';
12+
import { Header } from '../../components/Header';
13+
14+
const { width } = Dimensions.get('window');
15+
const CARD_WIDTH = width - 80;
16+
17+
type GlitterConfig = {
18+
id: string;
19+
name: string;
20+
scale: number;
21+
speed: number;
22+
intensity: number;
23+
density: number;
24+
colorA: string;
25+
colorB: string;
26+
image?: ImageSourcePropType;
27+
};
28+
29+
const GLITTER_PRESETS: GlitterConfig[] = [
30+
{
31+
id: 'default',
32+
name: 'Classic Sparkle',
33+
scale: 60,
34+
speed: 1,
35+
intensity: 2.0,
36+
density: 0.1,
37+
colorA: '#ffffff',
38+
colorB: '#ffffff',
39+
image: require('../../../assets/charizard.png'),
40+
},
41+
{
42+
id: 'golden',
43+
name: 'Golden Shimmer',
44+
scale: 100,
45+
speed: 2,
46+
intensity: 4.0,
47+
density: 0.1,
48+
colorA: '#ffd700',
49+
colorB: '#ffed4e',
50+
},
51+
{
52+
id: 'rainbow',
53+
name: 'Rainbow Sparkle',
54+
scale: 60,
55+
speed: 1,
56+
intensity: 6.0,
57+
density: 0.05,
58+
colorA: '#ff00ff',
59+
colorB: '#00ffff',
60+
},
61+
{
62+
id: 'subtle',
63+
name: 'Subtle Dust',
64+
scale: 80,
65+
speed: 1,
66+
intensity: 2.5,
67+
density: 0.3,
68+
colorA: '#ffffff',
69+
colorB: '#cccccc',
70+
},
71+
{
72+
id: 'ice',
73+
name: 'Ice Crystals',
74+
scale: 70,
75+
speed: 1,
76+
intensity: 5.5,
77+
density: 0.2,
78+
colorA: '#00ffff',
79+
colorB: '#b0e0e6',
80+
},
81+
];
82+
83+
export default function GlitterStaticScreen() {
84+
return (
85+
<View style={styles.container}>
86+
<StatusBar barStyle="light-content" backgroundColor="#000" />
87+
88+
<Header title="Glitter" subtitle="Animated sparkle effect" />
89+
90+
<ScrollView
91+
style={styles.scrollView}
92+
contentContainerStyle={styles.scrollContent}
93+
showsVerticalScrollIndicator={false}
94+
>
95+
{GLITTER_PRESETS.map((preset) => (
96+
<View key={preset.id} style={styles.card}>
97+
<View style={styles.gradientContainer}>
98+
{preset.image && (
99+
<Image
100+
source={preset.image}
101+
style={styles.backgroundImage}
102+
resizeMode="cover"
103+
/>
104+
)}
105+
<Glitter
106+
scale={preset.scale}
107+
speed={preset.speed}
108+
intensity={preset.intensity}
109+
density={preset.density}
110+
colorA={preset.colorA}
111+
colorB={preset.colorB}
112+
style={styles.gradient}
113+
/>
114+
</View>
115+
<View style={styles.cardInfo}>
116+
<Text style={styles.cardTitle}>{preset.name}</Text>
117+
<View style={styles.detailsGrid}>
118+
<View style={styles.detailItem}>
119+
<Text style={styles.detailLabel}>Scale:</Text>
120+
<Text style={styles.detailValue}>{preset.scale}</Text>
121+
</View>
122+
<View style={styles.detailItem}>
123+
<Text style={styles.detailLabel}>Speed:</Text>
124+
<Text style={styles.detailValue}>{preset.speed}</Text>
125+
</View>
126+
<View style={styles.detailItem}>
127+
<Text style={styles.detailLabel}>Intensity:</Text>
128+
<Text style={styles.detailValue}>{preset.intensity}</Text>
129+
</View>
130+
<View style={styles.detailItem}>
131+
<Text style={styles.detailLabel}>Density:</Text>
132+
<Text style={styles.detailValue}>{preset.density}</Text>
133+
</View>
134+
</View>
135+
</View>
136+
</View>
137+
))}
138+
</ScrollView>
139+
</View>
140+
);
141+
}
142+
143+
const styles = StyleSheet.create({
144+
container: {
145+
flex: 1,
146+
backgroundColor: '#000',
147+
},
148+
scrollView: {
149+
flex: 1,
150+
},
151+
scrollContent: {
152+
padding: 20,
153+
paddingBottom: 40,
154+
},
155+
card: {
156+
width: CARD_WIDTH,
157+
alignSelf: 'center',
158+
backgroundColor: '#111',
159+
borderRadius: 20,
160+
padding: 16,
161+
marginBottom: 24,
162+
borderWidth: 1,
163+
borderColor: '#252525',
164+
shadowColor: '#000',
165+
shadowOffset: {
166+
width: 0,
167+
height: 4,
168+
},
169+
shadowOpacity: 0.4,
170+
shadowRadius: 12,
171+
elevation: 6,
172+
},
173+
gradientContainer: {
174+
width: '100%',
175+
maxWidth: 300,
176+
height: 400,
177+
borderRadius: 14,
178+
overflow: 'hidden',
179+
marginBottom: 16,
180+
position: 'relative',
181+
alignSelf: 'center',
182+
},
183+
backgroundImage: {
184+
position: 'absolute',
185+
width: '100%',
186+
height: '100%',
187+
},
188+
gradient: {
189+
position: 'absolute',
190+
width: '100%',
191+
height: '100%',
192+
},
193+
cardInfo: {
194+
paddingHorizontal: 4,
195+
},
196+
cardTitle: {
197+
fontSize: 20,
198+
fontWeight: '700',
199+
color: '#fff',
200+
marginBottom: 12,
201+
letterSpacing: -0.3,
202+
},
203+
detailsGrid: {
204+
flexDirection: 'row',
205+
flexWrap: 'wrap',
206+
gap: 12,
207+
marginBottom: 8,
208+
},
209+
detailItem: {
210+
flex: 1,
211+
minWidth: '45%',
212+
},
213+
detailLabel: {
214+
fontSize: 12,
215+
color: '#666',
216+
marginBottom: 4,
217+
fontWeight: '600',
218+
textTransform: 'uppercase',
219+
letterSpacing: 0.5,
220+
},
221+
detailValue: {
222+
fontSize: 14,
223+
color: '#aaa',
224+
fontWeight: '500',
225+
},
226+
});

‎example/src/screens/HomeScreen.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,14 @@ const EXAMPLE_CATEGORIES: ExampleCategory[] = [
8383
color: '#ff00ff',
8484
image: require('../../assets/components/holo.png'),
8585
},
86+
{
87+
id: 'glitter',
88+
title: 'Glitter',
89+
description: 'Animated sparkle effect with scrolling noise',
90+
screen: 'GlitterStatic',
91+
color: '#ffffff',
92+
image: require('../../assets/components/glitter.png'),
93+
},
8694
];
8795

8896
export default function HomeScreen() {

‎example/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export type RootStackParamList = {
1616
CalicoSwirlStatic: undefined;
1717
DesertStatic: undefined;
1818
HoloStatic: undefined;
19+
GlitterStatic: undefined;
1920
};
2021

2122
export type HomeScreenNavigationProp =

0 commit comments

Comments
 (0)