react-native-snow-backgroud 0.1.4 → 0.1.6

package/lib/module/snow/SnowEngine.js

@@ -2,15 +2,16 @@
 
 export class SnowEngine {
   particles = [];
-  constructor(count, width, height) {
+  constructor(count, width, height, speedMultiplier) {
     this.width = width;
     this.height = height;
+    this.speedMultiplier = speedMultiplier;
     this.particles = Array.from({
       length: count
     }).map(() => ({
       x: Math.random() * width,
       y: Math.random() * height,
-      speed: Math.random() * 2 + 1,
+      speed: (Math.random() * 2 + 1) * this.speedMultiplier,
       size: Math.random() * 2 + 1
     }));
   }

package/lib/module/snow/SnowEngine.js.map

@@ -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,CACTC,KAAa,EACLC,KAAa,EACbC,MAAc,EACtB;IAAA,KAFQD,KAAa,GAAbA,KAAa;IAAA,KACbC,MAAc,GAAdA,MAAc;IAEtB,IAAI,CAACJ,SAAS,GAAGK,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEL;IAAM,CAAC,CAAC,CAACM,GAAG,CAAC,OAAO;MACxDC,CAAC,EAAEC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAGR,KAAK;MACxBS,CAAC,EAAEF,IAAI,CAACC,MAAM,CAAC,CAAC,GAAGP,MAAM;MACzBS,KAAK,EAAEH,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;MAC5BG,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,CAAChB,SAAS,EAAE;MAC9BgB,CAAC,CAACJ,CAAC,IAAII,CAAC,CAACH,KAAK,GAAG,CAAC;MAElB,IAAIG,CAAC,CAACJ,CAAC,GAAG,IAAI,CAACR,MAAM,EAAE;QACrBY,CAAC,CAACJ,CAAC,GAAG,CAAC,EAAE;QACTI,CAAC,CAACP,CAAC,GAAGC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,IAAI,CAACR,KAAK;MAClC;IACF;EACF;AACF","ignoreList":[]}
+{"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":[]}

package/lib/module/snow/SnowView.js

@@ -1,12 +1,14 @@
 "use strict";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Dimensions, View, StyleSheet } from "react-native";
 import { Canvas, Circle } from "@shopify/react-native-skia";
 import { SnowEngine } from "./SnowEngine.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SnowView({
   count = 100,
+  color = "white",
+  speed = 1,
   children
 }) {
   const {
@@ -14,13 +16,15 @@ export function SnowView({
     height
   } = Dimensions.get("window");
   const engineRef = useRef(null);
+  const [, forceRender] = useState(0);
   if (!engineRef.current) {
-    engineRef.current = new SnowEngine(count, width, height);
+    engineRef.current = new SnowEngine(count, width, height, speed);
   }
   useEffect(() => {
     let raf;
     const loop = () => {
       engineRef.current?.update();
+      forceRender(v => v + 1);
       raf = requestAnimationFrame(loop);
     };
     loop();
@@ -40,7 +44,7 @@ export function SnowView({
         cx: p.x,
         cy: p.y,
         r: p.size,
-        color: "white"
+        color: color
       }, i))
     })]
   });

package/lib/module/snow/SnowView.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","Dimensions","View","StyleSheet","Canvas","Circle","SnowEngine","jsx","_jsx","jsxs","_jsxs","SnowView","count","children","width","height","get","engineRef","current","raf","loop","update","requestAnimationFrame","cancelAnimationFrame","snow","style","flex","absoluteFill","zIndex","pointerEvents","particles","map","p","i","cx","x","cy","y","r","size","color"],"sourceRoot":"../../../src","sources":["snow/SnowView.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAMzC,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;AAC1C,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK,GAAG,GAAG;EAAEC;AAAwB,CAAC,EAAE;EAEjE,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGd,UAAU,CAACe,GAAG,CAAC,QAAQ,CAAC;EAClD,MAAMC,SAAS,GAAGjB,MAAM,CAAoB,IAAI,CAAC;EAEjD,IAAI,CAACiB,SAAS,CAACC,OAAO,EAAE;IACtBD,SAAS,CAACC,OAAO,GAAG,IAAIZ,UAAU,CAACM,KAAK,EAAEE,KAAK,EAAEC,MAAM,CAAC;EAC1D;EAEAhB,SAAS,CAAC,MAAM;IACd,IAAIoB,GAAW;IACf,MAAMC,IAAI,GAAGA,CAAA,KAAM;MACjBH,SAAS,CAACC,OAAO,EAAEG,MAAM,CAAC,CAAC;MAC3BF,GAAG,GAAGG,qBAAqB,CAACF,IAAI,CAAC;IACnC,CAAC;IACDA,IAAI,CAAC,CAAC;IACN,OAAO,MAAMG,oBAAoB,CAACJ,GAAG,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,IAAI,GAAGP,SAAS,CAACC,OAAO;EAE9B,oBACER,KAAA,CAACR,IAAI;IAACuB,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IAAAb,QAAA,GACtBA,QAAQ,eACTL,IAAA,CAACJ,MAAM;MACLqB,KAAK,EAAE,CACLtB,UAAU,CAACwB,YAAY,EACvB;QAAEC,MAAM,EAAE,EAAE;QAAEC,aAAa,EAAE;MAAO,CAAC,CACrC;MAAAhB,QAAA,EAEDW,IAAI,EAAEM,SAAS,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBACxBzB,IAAA,CAACH,MAAM;QAAS6B,EAAE,EAAEF,CAAC,CAACG,CAAE;QAACC,EAAE,EAAEJ,CAAC,CAACK,CAAE;QAACC,CAAC,EAAEN,CAAC,CAACO,IAAK;QAACC,KAAK,EAAC;MAAO,GAA7CP,CAA+C,CAC7D;IAAC,CACI,CAAC;EAAA,CACL,CAAC;AAEX","ignoreList":[]}
+{"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":[]}

package/lib/typescript/src/snow/SnowEngine.d.ts

@@ -7,8 +7,9 @@ export type SnowParticle = {
 export declare class SnowEngine {
     private width;
     private height;
+    private speedMultiplier;
     particles: SnowParticle[];
-    constructor(count: number, width: number, height: number);
+    constructor(count: number, width: number, height: number, speedMultiplier: number);
     update(): void;
 }
 //# sourceMappingURL=SnowEngine.d.ts.map

package/lib/typescript/src/snow/SnowEngine.d.ts.map

@@ -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;IAKnB,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,MAAM;IALhB,SAAS,EAAE,YAAY,EAAE,CAAM;gBAG7B,KAAK,EAAE,MAAM,EACL,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;IAUxB,MAAM;CAUP"}
+{"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"}

package/lib/typescript/src/snow/SnowView.d.ts

@@ -1,8 +1,10 @@
 import type { ReactNode } from "react";
 type SnowViewProps = {
     count?: number;
+    color?: string;
+    speed?: number;
     children?: ReactNode;
 };
-export declare function SnowView({ count, children }: SnowViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SnowView({ count, color, speed, children, }: SnowViewProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SnowView.d.ts.map

package/lib/typescript/src/snow/SnowView.d.ts.map

@@ -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;AACvC,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAIF,wBAAgB,QAAQ,CAAC,EAAE,KAAW,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAoChE"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "react-native-snow-backgroud",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A simple snow background effect for React Native CLI using Skia.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/snow/SnowEngine.ts

@@ -8,14 +8,16 @@ export type SnowParticle = {
     particles: SnowParticle[] = [];
   
     constructor(
-      count: number,
-      private width: number,
-      private height: number,
-    ) {
+        count: number,
+        private width: number,
+        private height: number,
+        private speedMultiplier: number,
+      ) {
+      
       this.particles = Array.from({ length: count }).map(() => ({
         x: Math.random() * width,
         y: Math.random() * height,
-        speed: Math.random() * 2 + 1,
+        speed: (Math.random() * 2 + 1) * this.speedMultiplier,
         size: Math.random() * 2 + 1,
       }));
     }

package/src/snow/SnowView.tsx

@@ -1,25 +1,35 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
+import { Dimensions, View, StyleSheet } from "react-native";
+import { Canvas, Circle } from "@shopify/react-native-skia";
+import { SnowEngine } from "./SnowEngine";
+
 type SnowViewProps = {
   count?: number;
+  color?: string;
+  speed?: number;
   children?: ReactNode;
 };
-import { Dimensions, View, StyleSheet } from "react-native";
-import { Canvas, Circle } from "@shopify/react-native-skia";
-import { SnowEngine } from "./SnowEngine";
-export function SnowView({ count = 100, children }: SnowViewProps) {
 
+export function SnowView({
+  count = 100,
+  color = "white",
+  speed = 1,
+  children,
+}: SnowViewProps) {
   const { width, height } = Dimensions.get("window");
   const engineRef = useRef<SnowEngine | null>(null);
+  const [, forceRender] = useState(0);
 
   if (!engineRef.current) {
-    engineRef.current = new SnowEngine(count, width, height);
+    engineRef.current = new SnowEngine(count, width, height, speed);
   }
 
   useEffect(() => {
     let raf: number;
     const loop = () => {
       engineRef.current?.update();
+      forceRender(v => v + 1);
       raf = requestAnimationFrame(loop);
     };
     loop();
@@ -38,9 +48,9 @@ export function SnowView({ count = 100, children }: SnowViewProps) {
         ]}
       >
         {snow?.particles.map((p, i) => (
-          <Circle key={i} cx={p.x} cy={p.y} r={p.size} color="white" />
+          <Circle key={i} cx={p.x} cy={p.y} r={p.size} color={color} />
         ))}
       </Canvas>
     </View>
-  );  
+  );
 }