Skip to content

Commit aacaf91

Browse files
TomAttertonTomAtterton
committed
chore: clean up
- Fix types - Clean up exports - Update readme
1 parent 0ebe4df commit aacaf91

File tree

10 files changed

+156
-157
lines changed

10 files changed

+156
-157
lines changed

‎.github/workflows/ci.yml

+11-11
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@ jobs:
2626
- name: Typecheck files
2727
run: yarn typecheck
2828

29-
test:
30-
runs-on: ubuntu-latest
31-
steps:
32-
- name: Checkout
33-
uses: actions/checkout@v3
34-
35-
- name: Setup
36-
uses: ./.github/actions/setup
37-
38-
- name: Run unit tests
39-
run: yarn test --maxWorkers=2 --coverage
29+
# test:
30+
# runs-on: ubuntu-latest
31+
# steps:
32+
# - name: Checkout
33+
# uses: actions/checkout@v3
34+
#
35+
# - name: Setup
36+
# uses: ./.github/actions/setup
37+
#
38+
# - name: Run unit tests
39+
# run: yarn test --maxWorkers=2 --coverage
4040

4141
build-library:
4242
runs-on: ubuntu-latest

‎README.md

+17-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
12
# react-native-snowfall 🌨️
23

3-
An animated snowy background using Reanimated and Skia Atlas.
4+
5+
`react-native-snowfall` is a library that provides an animated snowy background for your React Native applications. It utilizes the Reanimated and Skia Atlas libraries to create a smooth and efficient snow effect.
6+
47

58
![npm](https://img.shields.io/npm/v/react-native-snowfall)
69
![GitHub issues](https://img.shields.io/github/issues/tomatterton/react-native-snowfall)
@@ -9,30 +12,36 @@ An animated snowy background using Reanimated and Skia Atlas.
912

1013
## Installation ❄️
1114

15+
16+
**yarn**
1217
```sh
13-
npm install react-native-snowfall
18+
yarn add react-native-snowfall
1419
```
1520

1621
### Peer Dependencies 🔗
1722

1823
This library relies on the following peer dependencies. Make sure they are installed in your project:
1924

2025
```sh
21-
npm install react-native-reanimated @shopify/react-native-skia
26+
yarn add react-native-reanimated @shopify/react-native-skia
2227
```
2328

29+
## Demo 💫
30+
31+
![Demo GIF](./assets/demo.gif)
32+
2433
## Usage 🎨
2534

2635
```jsx
2736
import React from 'react';
2837
import { View } from 'react-native';
29-
import { SnowFall } from 'react-native-snowfall';
38+
import { Snowfall } from 'react-native-snowfall';
3039

3140
const App = () => {
3241
return (
3342
<View style={{ flex: 1 }}>
3443
{/* Add the SnowFall component */}
35-
<SnowFall />
44+
<Snowfall />
3645
{/* Rest of your app components */}
3746
</View>
3847
);
@@ -43,17 +52,17 @@ export default App;
4352

4453
### Customization ✨
4554

46-
You can customize the snowfall effect by passing props to the `SnowFall` component:
55+
You can customize the snowfall effect by passing props to the `Snowfall` component:
4756

4857
```jsx
4958
import React from 'react';
5059
import { View } from 'react-native';
51-
import { SnowFall } from 'react-native-snowfall';
60+
import { Snowfall } from 'react-native-snowfall';
5261

5362
const App = () => {
5463
return (
5564
<View style={{ flex: 1 }}>
56-
<SnowFall
65+
<Snowfall
5766
count={100}
5867
duration={15000}
5968
minSize={5}

‎assets/demo.gif

7.98 MB
Loading

‎example/src/background.png ‎example/assets/background.png

File renamed without changes.

‎example/src/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { ImageBackground, StyleSheet, View } from 'react-native';
2-
import { SnowFall } from 'react-native-snowfall';
2+
import { Snowfall } from 'react-native-snowfall';
33

44
export default function App() {
55
return (
66
<View style={styles.container}>
77
<ImageBackground
8-
source={require('./background.png')}
8+
source={require('../assets/background.png')}
99
resizeMode="cover"
1010
style={StyleSheet.absoluteFill}
1111
/>
12-
<SnowFall />
12+
<Snowfall />
1313
</View>
1414
);
1515
}

‎package.json

+2-13
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
11
{
22
"name": "react-native-snowfall",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "An animated snowy background using reanimated and Skia Atlas",
55
"source": "./src/index.tsx",
66
"main": "./lib/commonjs/index.js",
77
"module": "./lib/module/index.js",
8-
"exports": {
9-
".": {
10-
"import": {
11-
"types": "./lib/typescript/module/src/index.d.ts",
12-
"default": "./lib/module/index.js"
13-
},
14-
"require": {
15-
"types": "./lib/typescript/commonjs/src/index.d.ts",
16-
"default": "./lib/commonjs/index.js"
17-
}
18-
}
19-
},
8+
"types": "./lib/typescript/module/src/index.d.ts",
209
"files": [
2110
"src",
2211
"lib",

‎src/Snowfall.tsx

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { useMemo, useEffect } from 'react';
2+
import { useWindowDimensions, StyleSheet, Platform } from 'react-native';
3+
import {
4+
Canvas,
5+
Skia,
6+
Atlas,
7+
useRSXformBuffer,
8+
useImage,
9+
} from '@shopify/react-native-skia';
10+
import {
11+
useSharedValue,
12+
interpolate,
13+
cancelAnimation,
14+
} from 'react-native-reanimated';
15+
import { useFrameCallback } from 'react-native-reanimated';
16+
import { createParticle } from './helpers';
17+
import type { SnowfallProps } from './types';
18+
19+
const isAndroid = Platform.OS === 'android';
20+
21+
const Snowfall = ({
22+
count = 70,
23+
duration = 10000,
24+
minSize = 10,
25+
maxSize = 20,
26+
imageScale = 0.7,
27+
imagePath = require('./snowflake.png'),
28+
customImage,
29+
}: SnowfallProps) => {
30+
const metronome = useSharedValue(0);
31+
32+
const { width: screenWidth, height: screenHeight } = useWindowDimensions();
33+
34+
useFrameCallback((frameInfo) => {
35+
const { timeSincePreviousFrame } = frameInfo;
36+
if (timeSincePreviousFrame != null) {
37+
metronome.value += timeSincePreviousFrame;
38+
if (metronome.value > duration) {
39+
metronome.value = metronome.value % duration;
40+
}
41+
}
42+
}, true);
43+
44+
const particles = useMemo(() => {
45+
return Array.from({ length: count }).map(() =>
46+
createParticle({ duration, minSize, maxSize })
47+
);
48+
}, [count, duration, minSize, maxSize]);
49+
50+
const snowflakeImage = useImage(imagePath);
51+
const image = customImage || snowflakeImage;
52+
53+
const sprites = useMemo(() => {
54+
if (!image) return [];
55+
return new Array(count).fill(
56+
Skia.XYWHRect(0, 0, image.width(), image.height())
57+
);
58+
}, [count, image]);
59+
60+
const transforms = useRSXformBuffer(count, (val, i) => {
61+
'worklet';
62+
63+
const particle = particles[i];
64+
if (!particle || !image) return;
65+
66+
const adjustedProgress =
67+
((metronome.value + particle.deltas.delayOffset) / duration) % 1;
68+
69+
const baseXPosition = screenWidth * (particle.deltas.xPosition / 100);
70+
71+
const swingOffset =
72+
particle.deltas.swingAmplitude *
73+
Math.sin(
74+
2 * Math.PI * particle.deltas.swingFrequency * adjustedProgress +
75+
particle.deltas.swingPhase
76+
);
77+
const xPosition = baseXPosition + swingOffset;
78+
const translateY = interpolate(
79+
adjustedProgress,
80+
[0, 1],
81+
[-50, screenHeight + (isAndroid ? 60 : 0)]
82+
);
83+
const rotation = particle.deltas.rotationSpeed * adjustedProgress;
84+
const snowflakeSize = image.width() / imageScale;
85+
const scale = particle.size / snowflakeSize;
86+
87+
val.set(
88+
Math.cos(rotation) * scale,
89+
Math.sin(rotation) * scale,
90+
xPosition,
91+
translateY
92+
);
93+
});
94+
95+
useEffect(() => {
96+
return () => {
97+
cancelAnimation(metronome);
98+
};
99+
}, [metronome]);
100+
101+
if (!image) {
102+
return null; // or some fallback UI
103+
}
104+
105+
return (
106+
<Canvas style={styles.container} pointerEvents={'none'}>
107+
<Atlas image={image} sprites={sprites} transforms={transforms} />
108+
</Canvas>
109+
);
110+
};
111+
112+
const styles = StyleSheet.create({
113+
container: {
114+
position: 'absolute',
115+
height: '100%',
116+
width: '100%',
117+
},
118+
});
119+
120+
export { Snowfall };

‎src/index.tsx

+2-121
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,2 @@
1-
import React, { useMemo, useEffect } from 'react';
2-
import { useWindowDimensions, StyleSheet, Platform } from 'react-native';
3-
import {
4-
Canvas,
5-
Skia,
6-
Atlas,
7-
useRSXformBuffer,
8-
useImage,
9-
} from '@shopify/react-native-skia';
10-
import {
11-
useSharedValue,
12-
interpolate,
13-
cancelAnimation,
14-
} from 'react-native-reanimated';
15-
import { useFrameCallback } from 'react-native-reanimated';
16-
import { createParticle } from './helpers';
17-
import type { SnowFallProps } from './types';
18-
19-
const isAndroid = Platform.OS === 'android';
20-
21-
const SnowFall: React.FC<SnowFallProps> = ({
22-
count = 70,
23-
duration = 10000,
24-
minSize = 10,
25-
maxSize = 20,
26-
imageScale = 0.7,
27-
imagePath = require('./snowflake.png'),
28-
29-
customImage,
30-
}) => {
31-
const metronome = useSharedValue(0);
32-
33-
const { width: screenWidth, height: screenHeight } = useWindowDimensions();
34-
35-
useFrameCallback((frameInfo) => {
36-
const { timeSincePreviousFrame } = frameInfo;
37-
if (timeSincePreviousFrame != null) {
38-
metronome.value += timeSincePreviousFrame;
39-
if (metronome.value > duration) {
40-
metronome.value = metronome.value % duration;
41-
}
42-
}
43-
}, true);
44-
45-
const particles = useMemo(() => {
46-
return Array.from({ length: count }).map(() =>
47-
createParticle({ duration, minSize, maxSize })
48-
);
49-
}, [count, duration, minSize, maxSize]);
50-
51-
const snowflakeImage = useImage(imagePath);
52-
const image = customImage || snowflakeImage;
53-
54-
const sprites = useMemo(() => {
55-
if (!image) return [];
56-
return new Array(count).fill(
57-
Skia.XYWHRect(0, 0, image.width(), image.height())
58-
);
59-
}, [count, image]);
60-
61-
const transforms = useRSXformBuffer(count, (val, i) => {
62-
'worklet';
63-
64-
const particle = particles[i];
65-
if (!particle || !image) return;
66-
67-
const adjustedProgress =
68-
((metronome.value + particle.deltas.delayOffset) / duration) % 1;
69-
70-
const baseXPosition = screenWidth * (particle.deltas.xPosition / 100);
71-
72-
const swingOffset =
73-
particle.deltas.swingAmplitude *
74-
Math.sin(
75-
2 * Math.PI * particle.deltas.swingFrequency * adjustedProgress +
76-
particle.deltas.swingPhase
77-
);
78-
const xPosition = baseXPosition + swingOffset;
79-
const translateY = interpolate(
80-
adjustedProgress,
81-
[0, 1],
82-
[-50, screenHeight + (isAndroid ? 60 : 0)]
83-
);
84-
const rotation = particle.deltas.rotationSpeed * adjustedProgress;
85-
const snowflakeSize = image.width() / imageScale;
86-
const scale = particle.size / snowflakeSize;
87-
88-
val.set(
89-
Math.cos(rotation) * scale,
90-
Math.sin(rotation) * scale,
91-
xPosition,
92-
translateY
93-
);
94-
});
95-
96-
useEffect(() => {
97-
return () => {
98-
cancelAnimation(metronome);
99-
};
100-
}, [metronome]);
101-
102-
if (!image) {
103-
return null; // or some fallback UI
104-
}
105-
106-
return (
107-
<Canvas style={styles.container} pointerEvents={'none'}>
108-
<Atlas image={image} sprites={sprites} transforms={transforms} />
109-
</Canvas>
110-
);
111-
};
112-
113-
const styles = StyleSheet.create({
114-
container: {
115-
position: 'absolute',
116-
height: '100%',
117-
width: '100%',
118-
},
119-
});
120-
121-
export { SnowFall };
1+
export type { SnowfallProps } from './types';
2+
export { Snowfall } from './Snowfall';

‎src/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { DataSourceParam, SkImage } from '@shopify/react-native-skia';
22

3-
export interface SnowFallProps {
3+
export interface SnowfallProps {
44
count?: number;
55
duration?: number;
66
minSize?: number;

‎src/utils.ts

Whitespace-only changes.

0 commit comments

Comments
 (0)