react-native-snow-backgroud 0.1.5 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -3
- package/lib/module/snow/SnowEngine.js +3 -2
- package/lib/module/snow/SnowEngine.js.map +1 -1
- package/lib/module/snow/SnowView.js +4 -2
- package/lib/module/snow/SnowView.js.map +1 -1
- package/lib/typescript/src/snow/SnowEngine.d.ts +2 -1
- package/lib/typescript/src/snow/SnowEngine.d.ts.map +1 -1
- package/lib/typescript/src/snow/SnowView.d.ts +6 -2
- package/lib/typescript/src/snow/SnowView.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/snow/SnowEngine.ts +7 -5
- package/src/snow/SnowView.tsx +13 -4
package/README.md
CHANGED
|
@@ -37,10 +37,17 @@ cd ios && pod install
|
|
|
37
37
|
## Usage
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
|
+
import './global.css';
|
|
41
|
+
import {View,Text} from 'react-native';
|
|
40
42
|
import { SnowView } from "react-native-snow-backgroud";
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
export default function App(){
|
|
44
|
+
return(
|
|
45
|
+
<SnowView count={120} color='#E0FFFF' speed={5}>
|
|
46
|
+
<View className='flex-1 justify-center items-center bg-black'>
|
|
47
|
+
<Text className='text-white'>Hello, World!</Text>
|
|
48
|
+
</View>
|
|
49
|
+
</SnowView>
|
|
50
|
+
)
|
|
44
51
|
}
|
|
45
52
|
```
|
|
46
53
|
|
|
@@ -55,6 +62,7 @@ export default function App() {
|
|
|
55
62
|
| Name | Type | Default | Description |
|
|
56
63
|
| ----- | ------ | ------- | ----------------------------------------------- |
|
|
57
64
|
| count | number | 100 | Number of snow particles rendered on the screen |
|
|
65
|
+
| speed | number | 100 | The speed of snow falling on the screen |
|
|
58
66
|
|
|
59
67
|
---
|
|
60
68
|
|
|
@@ -2,15 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
export class SnowEngine {
|
|
4
4
|
particles = [];
|
|
5
|
-
constructor(count, width, height) {
|
|
5
|
+
constructor(count, width, height, speedMultiplier) {
|
|
6
6
|
this.width = width;
|
|
7
7
|
this.height = height;
|
|
8
|
+
this.speedMultiplier = speedMultiplier;
|
|
8
9
|
this.particles = Array.from({
|
|
9
10
|
length: count
|
|
10
11
|
}).map(() => ({
|
|
11
12
|
x: Math.random() * width,
|
|
12
13
|
y: Math.random() * height,
|
|
13
|
-
speed: Math.random() * 2 + 1,
|
|
14
|
+
speed: (Math.random() * 2 + 1) * this.speedMultiplier,
|
|
14
15
|
size: Math.random() * 2 + 1
|
|
15
16
|
}));
|
|
16
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SnowEngine","particles","constructor","count","width","height","Array","from","length","map","x","Math","random","y","speed","size","update","p"],"sourceRoot":"../../../src","sources":["snow/SnowEngine.ts"],"mappings":";;AAME,OAAO,MAAMA,UAAU,CAAC;EACtBC,SAAS,GAAmB,EAAE;EAE9BC,WAAWA,
|
|
1
|
+
{"version":3,"names":["SnowEngine","particles","constructor","count","width","height","speedMultiplier","Array","from","length","map","x","Math","random","y","speed","size","update","p"],"sourceRoot":"../../../src","sources":["snow/SnowEngine.ts"],"mappings":";;AAME,OAAO,MAAMA,UAAU,CAAC;EACtBC,SAAS,GAAmB,EAAE;EAE9BC,WAAWA,CACPC,KAAa,EACLC,KAAa,EACbC,MAAc,EACdC,eAAuB,EAC/B;IAAA,KAHQF,KAAa,GAAbA,KAAa;IAAA,KACbC,MAAc,GAAdA,MAAc;IAAA,KACdC,eAAuB,GAAvBA,eAAuB;IAGjC,IAAI,CAACL,SAAS,GAAGM,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEN;IAAM,CAAC,CAAC,CAACO,GAAG,CAAC,OAAO;MACxDC,CAAC,EAAEC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAGT,KAAK;MACxBU,CAAC,EAAEF,IAAI,CAACC,MAAM,CAAC,CAAC,GAAGR,MAAM;MACzBU,KAAK,EAAE,CAACH,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,IAAI,CAACP,eAAe;MACrDU,IAAI,EAAEJ,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG;IAC5B,CAAC,CAAC,CAAC;EACL;EAEAI,MAAMA,CAAA,EAAG;IACP,KAAK,MAAMC,CAAC,IAAI,IAAI,CAACjB,SAAS,EAAE;MAC9BiB,CAAC,CAACJ,CAAC,IAAII,CAAC,CAACH,KAAK,GAAG,CAAC;MAElB,IAAIG,CAAC,CAACJ,CAAC,GAAG,IAAI,CAACT,MAAM,EAAE;QACrBa,CAAC,CAACJ,CAAC,GAAG,CAAC,EAAE;QACTI,CAAC,CAACP,CAAC,GAAGC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,IAAI,CAACT,KAAK;MAClC;IACF;EACF;AACF","ignoreList":[]}
|
|
@@ -7,6 +7,8 @@ import { SnowEngine } from "./SnowEngine.js";
|
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
export function SnowView({
|
|
9
9
|
count = 100,
|
|
10
|
+
color = "white",
|
|
11
|
+
speed = 1,
|
|
10
12
|
children
|
|
11
13
|
}) {
|
|
12
14
|
const {
|
|
@@ -16,7 +18,7 @@ export function SnowView({
|
|
|
16
18
|
const engineRef = useRef(null);
|
|
17
19
|
const [, forceRender] = useState(0);
|
|
18
20
|
if (!engineRef.current) {
|
|
19
|
-
engineRef.current = new SnowEngine(count, width, height);
|
|
21
|
+
engineRef.current = new SnowEngine(count, width, height, speed);
|
|
20
22
|
}
|
|
21
23
|
useEffect(() => {
|
|
22
24
|
let raf;
|
|
@@ -42,7 +44,7 @@ export function SnowView({
|
|
|
42
44
|
cx: p.x,
|
|
43
45
|
cy: p.y,
|
|
44
46
|
r: p.size,
|
|
45
|
-
color:
|
|
47
|
+
color: color
|
|
46
48
|
}, i))
|
|
47
49
|
})]
|
|
48
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","useState","Dimensions","View","StyleSheet","Canvas","Circle","SnowEngine","jsx","_jsx","jsxs","_jsxs","SnowView","count","children","width","height","get","engineRef","forceRender","current","raf","loop","update","v","requestAnimationFrame","cancelAnimationFrame","snow","style","flex","absoluteFill","zIndex","pointerEvents","particles","map","p","i","cx","x","cy","y","r","size"
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","Dimensions","View","StyleSheet","Canvas","Circle","SnowEngine","jsx","_jsx","jsxs","_jsxs","SnowView","count","color","speed","children","width","height","get","engineRef","forceRender","current","raf","loop","update","v","requestAnimationFrame","cancelAnimationFrame","snow","style","flex","absoluteFill","zIndex","pointerEvents","particles","map","p","i","cx","x","cy","y","r","size"],"sourceRoot":"../../../src","sources":["snow/SnowView.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,SAASC,UAAU,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC3D,SAASC,MAAM,EAAEC,MAAM,QAAQ,4BAA4B;AAC3D,SAASC,UAAU,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAS1C,OAAO,SAASC,QAAQA,CAAC;EACvBC,KAAK,GAAG,GAAG;EACXC,KAAK,GAAG,OAAO;EACfC,KAAK,GAAG,CAAC;EACTC;AACa,CAAC,EAAE;EAChB,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGhB,UAAU,CAACiB,GAAG,CAAC,QAAQ,CAAC;EAClD,MAAMC,SAAS,GAAGpB,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAM,GAAGqB,WAAW,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAEnC,IAAI,CAACmB,SAAS,CAACE,OAAO,EAAE;IACtBF,SAAS,CAACE,OAAO,GAAG,IAAIf,UAAU,CAACM,KAAK,EAAEI,KAAK,EAAEC,MAAM,EAAEH,KAAK,CAAC;EACjE;EAEAhB,SAAS,CAAC,MAAM;IACd,IAAIwB,GAAW;IACf,MAAMC,IAAI,GAAGA,CAAA,KAAM;MACjBJ,SAAS,CAACE,OAAO,EAAEG,MAAM,CAAC,CAAC;MAC3BJ,WAAW,CAACK,CAAC,IAAIA,CAAC,GAAG,CAAC,CAAC;MACvBH,GAAG,GAAGI,qBAAqB,CAACH,IAAI,CAAC;IACnC,CAAC;IACDA,IAAI,CAAC,CAAC;IACN,OAAO,MAAMI,oBAAoB,CAACL,GAAG,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMM,IAAI,GAAGT,SAAS,CAACE,OAAO;EAE9B,oBACEX,KAAA,CAACR,IAAI;IAAC2B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IAAAf,QAAA,GACtBA,QAAQ,eACTP,IAAA,CAACJ,MAAM;MACLyB,KAAK,EAAE,CACL1B,UAAU,CAAC4B,YAAY,EACvB;QAAEC,MAAM,EAAE,EAAE;QAAEC,aAAa,EAAE;MAAO,CAAC,CACrC;MAAAlB,QAAA,EAEDa,IAAI,EAAEM,SAAS,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBACxB7B,IAAA,CAACH,MAAM;QAASiC,EAAE,EAAEF,CAAC,CAACG,CAAE;QAACC,EAAE,EAAEJ,CAAC,CAACK,CAAE;QAACC,CAAC,EAAEN,CAAC,CAACO,IAAK;QAAC9B,KAAK,EAAEA;MAAM,GAA7CwB,CAA+C,CAC7D;IAAC,CACI,CAAC;EAAA,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -7,8 +7,9 @@ export type SnowParticle = {
|
|
|
7
7
|
export declare class SnowEngine {
|
|
8
8
|
private width;
|
|
9
9
|
private height;
|
|
10
|
+
private speedMultiplier;
|
|
10
11
|
particles: SnowParticle[];
|
|
11
|
-
constructor(count: number, width: number, height: number);
|
|
12
|
+
constructor(count: number, width: number, height: number, speedMultiplier: number);
|
|
12
13
|
update(): void;
|
|
13
14
|
}
|
|
14
15
|
//# sourceMappingURL=SnowEngine.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnowEngine.d.ts","sourceRoot":"","sources":["../../../../src/snow/SnowEngine.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AACF,qBAAa,UAAU;
|
|
1
|
+
{"version":3,"file":"SnowEngine.d.ts","sourceRoot":"","sources":["../../../../src/snow/SnowEngine.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AACF,qBAAa,UAAU;IAKjB,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,eAAe;IAN3B,SAAS,EAAE,YAAY,EAAE,CAAM;gBAG3B,KAAK,EAAE,MAAM,EACL,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,MAAM;IAWnC,MAAM;CAUP"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
|
|
2
|
+
type SnowViewProps = {
|
|
3
3
|
count?: number;
|
|
4
|
+
color?: string;
|
|
5
|
+
speed?: number;
|
|
4
6
|
children?: ReactNode;
|
|
5
|
-
}
|
|
7
|
+
};
|
|
8
|
+
export declare function SnowView({ count, color, speed, children, }: SnowViewProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
6
10
|
//# sourceMappingURL=SnowView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnowView.d.ts","sourceRoot":"","sources":["../../../../src/snow/SnowView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,
|
|
1
|
+
{"version":3,"file":"SnowView.d.ts","sourceRoot":"","sources":["../../../../src/snow/SnowView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAW,EACX,KAAe,EACf,KAAS,EACT,QAAQ,GACT,EAAE,aAAa,2CAqCf"}
|
package/package.json
CHANGED
package/src/snow/SnowEngine.ts
CHANGED
|
@@ -8,14 +8,16 @@ export type SnowParticle = {
|
|
|
8
8
|
particles: SnowParticle[] = [];
|
|
9
9
|
|
|
10
10
|
constructor(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
count: number,
|
|
12
|
+
private width: number,
|
|
13
|
+
private height: number,
|
|
14
|
+
private speedMultiplier: number,
|
|
15
|
+
) {
|
|
16
|
+
|
|
15
17
|
this.particles = Array.from({ length: count }).map(() => ({
|
|
16
18
|
x: Math.random() * width,
|
|
17
19
|
y: Math.random() * height,
|
|
18
|
-
speed: Math.random() * 2 + 1,
|
|
20
|
+
speed: (Math.random() * 2 + 1) * this.speedMultiplier,
|
|
19
21
|
size: Math.random() * 2 + 1,
|
|
20
22
|
}));
|
|
21
23
|
}
|
package/src/snow/SnowView.tsx
CHANGED
|
@@ -4,16 +4,25 @@ import { Dimensions, View, StyleSheet } from "react-native";
|
|
|
4
4
|
import { Canvas, Circle } from "@shopify/react-native-skia";
|
|
5
5
|
import { SnowEngine } from "./SnowEngine";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
type SnowViewProps = {
|
|
8
8
|
count?: number;
|
|
9
|
+
color?: string;
|
|
10
|
+
speed?: number;
|
|
9
11
|
children?: ReactNode;
|
|
10
|
-
}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export function SnowView({
|
|
15
|
+
count = 100,
|
|
16
|
+
color = "white",
|
|
17
|
+
speed = 1,
|
|
18
|
+
children,
|
|
19
|
+
}: SnowViewProps) {
|
|
11
20
|
const { width, height } = Dimensions.get("window");
|
|
12
21
|
const engineRef = useRef<SnowEngine | null>(null);
|
|
13
22
|
const [, forceRender] = useState(0);
|
|
14
23
|
|
|
15
24
|
if (!engineRef.current) {
|
|
16
|
-
engineRef.current = new SnowEngine(count, width, height);
|
|
25
|
+
engineRef.current = new SnowEngine(count, width, height, speed);
|
|
17
26
|
}
|
|
18
27
|
|
|
19
28
|
useEffect(() => {
|
|
@@ -39,7 +48,7 @@ export function SnowView({ count = 100, children }: {
|
|
|
39
48
|
]}
|
|
40
49
|
>
|
|
41
50
|
{snow?.particles.map((p, i) => (
|
|
42
|
-
<Circle key={i} cx={p.x} cy={p.y} r={p.size} color=
|
|
51
|
+
<Circle key={i} cx={p.x} cy={p.y} r={p.size} color={color} />
|
|
43
52
|
))}
|
|
44
53
|
</Canvas>
|
|
45
54
|
</View>
|