Skip to content

Commit 2d17792

Browse files
blazejkustrablazejkustra
authored
Merge pull request #7 from blazejkustra/campfire
Add Campfire component
2 parents 94e15cb + 54d0324 commit 2d17792

File tree

8 files changed

+702
-1
lines changed

8 files changed

+702
-1
lines changed

‎example/assets/components/campfire.png‎

27.5 KB
Loading

‎example/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import LinearGradientStaticScreen from './screens/LinearGradient/LinearGradientS
1313
import IridescenceStaticScreen from './screens/Iridescence/IridescenceStaticScreen';
1414
import LiquidChromeStaticScreen from './screens/LiquidChrome/LiquidChromeStaticScreen';
1515
import SilkStaticScreen from './screens/Silk/SilkStaticScreen';
16+
import CampfireStaticScreen from './screens/Campfire/CampfireStaticScreen';
1617
import type { RootStackParamList } from './types';
1718

1819
const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -66,6 +67,7 @@ export default function App() {
6667
component={LiquidChromeStaticScreen}
6768
/>
6869
<Stack.Screen name="SilkStatic" component={SilkStaticScreen} />
70+
<Stack.Screen name="CampfireStatic" component={CampfireStaticScreen} />
6971
</Stack.Navigator>
7072
</NavigationContainer>
7173
);

‎example/src/screens/Campfire/CampfireStaticScreen.tsx‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import {
2+
View,
3+
Text,
4+
StyleSheet,
5+
ScrollView,
6+
StatusBar,
7+
Dimensions,
8+
} from 'react-native';
9+
import { Campfire } from 'react-native-backgrounds';
10+
import { Header } from '../../components/Header';
11+
12+
const { width } = Dimensions.get('window');
13+
const CARD_WIDTH = width - 80;
14+
15+
type CampfireConfig = {
16+
id: string;
17+
name: string;
18+
color: string;
19+
speed: number;
20+
sparkSize: number;
21+
fireIntensity: number;
22+
smokeIntensity: number;
23+
};
24+
25+
const CAMPFIRE_PRESETS: CampfireConfig[] = [
26+
{
27+
id: 'classic',
28+
name: 'Classic Campfire',
29+
color: '#ffffff',
30+
speed: 1.0,
31+
sparkSize: 1.0,
32+
fireIntensity: 1.0,
33+
smokeIntensity: 1.0,
34+
},
35+
{
36+
id: 'intense',
37+
name: 'Intense Blaze',
38+
color: '#ffffff',
39+
speed: 1.5,
40+
sparkSize: 1.2,
41+
fireIntensity: 1.5,
42+
smokeIntensity: 0.8,
43+
},
44+
{
45+
id: 'gentle',
46+
name: 'Gentle Embers',
47+
color: '#ffffff',
48+
speed: 0.6,
49+
sparkSize: 0.8,
50+
fireIntensity: 0.7,
51+
smokeIntensity: 1.2,
52+
},
53+
{
54+
id: 'blue',
55+
name: 'Blue Flames',
56+
color: '#6699ff',
57+
speed: 1.0,
58+
sparkSize: 1.0,
59+
fireIntensity: 1.2,
60+
smokeIntensity: 0.6,
61+
},
62+
{
63+
id: 'green',
64+
name: 'Mystical Green',
65+
color: '#66ff99',
66+
speed: 0.8,
67+
sparkSize: 1.3,
68+
fireIntensity: 1.1,
69+
smokeIntensity: 1.5,
70+
},
71+
{
72+
id: 'purple',
73+
name: 'Purple Magic',
74+
color: '#cc66ff',
75+
speed: 1.2,
76+
sparkSize: 1.5,
77+
fireIntensity: 1.3,
78+
smokeIntensity: 1.0,
79+
},
80+
{
81+
id: 'volcano',
82+
name: 'Volcanic Eruption',
83+
color: '#ff8800',
84+
speed: 2.0,
85+
sparkSize: 1.8,
86+
fireIntensity: 2.0,
87+
smokeIntensity: 1.5,
88+
},
89+
];
90+
91+
export default function CampfireStaticScreen() {
92+
return (
93+
<View style={styles.container}>
94+
<StatusBar barStyle="light-content" backgroundColor="#000" />
95+
96+
<Header title="Campfire" subtitle="Fire with drifting sparks and smoke" />
97+
98+
<ScrollView
99+
style={styles.scrollView}
100+
contentContainerStyle={styles.scrollContent}
101+
showsVerticalScrollIndicator={false}
102+
>
103+
{CAMPFIRE_PRESETS.map((preset) => (
104+
<View key={preset.id} style={styles.card}>
105+
<View style={styles.gradientContainer}>
106+
<Campfire
107+
color={preset.color}
108+
speed={preset.speed}
109+
sparkSize={preset.sparkSize}
110+
fireIntensity={preset.fireIntensity}
111+
smokeIntensity={preset.smokeIntensity}
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}>Color:</Text>
120+
<Text style={styles.detailValue}>{preset.color}</Text>
121+
</View>
122+
<View style={styles.detailItem}>
123+
<Text style={styles.detailLabel}>Speed:</Text>
124+
<Text style={styles.detailValue}>{preset.speed}x</Text>
125+
</View>
126+
<View style={styles.detailItem}>
127+
<Text style={styles.detailLabel}>Spark Size:</Text>
128+
<Text style={styles.detailValue}>{preset.sparkSize}</Text>
129+
</View>
130+
<View style={styles.detailItem}>
131+
<Text style={styles.detailLabel}>Fire:</Text>
132+
<Text style={styles.detailValue}>{preset.fireIntensity}</Text>
133+
</View>
134+
<View style={styles.detailItem}>
135+
<Text style={styles.detailLabel}>Smoke:</Text>
136+
<Text style={styles.detailValue}>
137+
{preset.smokeIntensity}
138+
</Text>
139+
</View>
140+
</View>
141+
</View>
142+
</View>
143+
))}
144+
</ScrollView>
145+
</View>
146+
);
147+
}
148+
149+
const styles = StyleSheet.create({
150+
container: {
151+
flex: 1,
152+
backgroundColor: '#000',
153+
},
154+
scrollView: {
155+
flex: 1,
156+
},
157+
scrollContent: {
158+
padding: 20,
159+
paddingBottom: 40,
160+
},
161+
card: {
162+
width: CARD_WIDTH,
163+
alignSelf: 'center',
164+
backgroundColor: '#111',
165+
borderRadius: 20,
166+
padding: 16,
167+
marginBottom: 24,
168+
borderWidth: 1,
169+
borderColor: '#252525',
170+
shadowColor: '#000',
171+
shadowOffset: {
172+
width: 0,
173+
height: 4,
174+
},
175+
shadowOpacity: 0.4,
176+
shadowRadius: 12,
177+
elevation: 6,
178+
},
179+
gradientContainer: {
180+
width: '100%',
181+
height: 220,
182+
borderRadius: 14,
183+
overflow: 'hidden',
184+
marginBottom: 16,
185+
},
186+
gradient: {
187+
width: '100%',
188+
height: '100%',
189+
},
190+
cardInfo: {
191+
paddingHorizontal: 4,
192+
},
193+
cardTitle: {
194+
fontSize: 20,
195+
fontWeight: '700',
196+
color: '#fff',
197+
marginBottom: 12,
198+
letterSpacing: -0.3,
199+
},
200+
detailsGrid: {
201+
flexDirection: 'row',
202+
flexWrap: 'wrap',
203+
gap: 12,
204+
marginBottom: 8,
205+
},
206+
detailItem: {
207+
flex: 1,
208+
minWidth: '45%',
209+
},
210+
detailLabel: {
211+
fontSize: 12,
212+
color: '#666',
213+
marginBottom: 4,
214+
fontWeight: '600',
215+
textTransform: 'uppercase',
216+
letterSpacing: 0.5,
217+
},
218+
detailValue: {
219+
fontSize: 14,
220+
color: '#aaa',
221+
fontWeight: '500',
222+
},
223+
});

‎example/src/screens/HomeScreen.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ const EXAMPLE_CATEGORIES: ExampleCategory[] = [
3535
color: '#7B7481',
3636
image: require('../../assets/components/silk.png'),
3737
},
38+
{
39+
id: 'campfire',
40+
title: 'Campfire',
41+
description: 'Fire with drifting sparks and smoke',
42+
screen: 'CampfireStatic',
43+
color: '#ff9933',
44+
image: require('../../assets/components/campfire.png'),
45+
},
3846
{
3947
id: 'circular-gradient',
4048
title: 'Circular Gradient',

‎example/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type RootStackParamList = {
1212
IridescenceStatic: undefined;
1313
LiquidChromeStatic: undefined;
1414
SilkStatic: undefined;
15+
CampfireStatic: undefined;
1516
};
1617

1718
export type HomeScreenNavigationProp =

0 commit comments

Comments
 (0)