react-native-snow-backgroud 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 jonadan
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# react-native-snow-backgroud
+
+A simple snow background effect for React Native CLI using Skia.
+
+## Installation
+
+
+```sh
+npm install react-native-snow-backgroud
+```
+
+
+## Usage
+
+
+```js
+import { multiply } from 'react-native-snow-backgroud';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { SnowView } from "./snow/SnowView.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SnowView"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,oBAAiB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/snow/SnowEngine.js

@@ -0,0 +1,27 @@
+"use strict";
+
+export class SnowEngine {
+  particles = [];
+  constructor(count, width, height) {
+    this.width = width;
+    this.height = height;
+    this.particles = Array.from({
+      length: count
+    }).map(() => ({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      speed: Math.random() * 1.5 + 0.5,
+      size: Math.random() * 2 + 1
+    }));
+  }
+  update() {
+    for (const p of this.particles) {
+      p.y += p.speed;
+      if (p.y > this.height) {
+        p.y = 0;
+        p.x = Math.random() * this.width;
+      }
+    }
+  }
+}
+//# sourceMappingURL=SnowEngine.js.map

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

@@ -0,0 +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":";;AAOE,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,GAAG,GAAG,GAAG;MAChCG,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;MACd,IAAIG,CAAC,CAACJ,CAAC,GAAG,IAAI,CAACR,MAAM,EAAE;QACrBY,CAAC,CAACJ,CAAC,GAAG,CAAC;QACPI,CAAC,CAACP,CAAC,GAAGC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,IAAI,CAACR,KAAK;MAClC;IACF;EACF;AACF","ignoreList":[]}

package/lib/module/snow/SnowView.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import { useEffect, useRef } from "react";
+import { Dimensions } from "react-native";
+import { Canvas, Circle } from "@shopify/react-native-skia";
+import { SnowEngine } from "./SnowEngine.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SnowView({
+  count = 100
+}) {
+  const {
+    width,
+    height
+  } = Dimensions.get("window");
+  const engineRef = useRef(null);
+  if (!engineRef.current) {
+    engineRef.current = new SnowEngine(count, width, height);
+  }
+  useEffect(() => {
+    let raf;
+    const loop = () => {
+      engineRef.current?.update();
+      raf = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const snow = engineRef.current;
+  return /*#__PURE__*/_jsx(Canvas, {
+    style: {
+      flex: 1
+    },
+    children: snow?.particles.map((p, i) => /*#__PURE__*/_jsx(Circle, {
+      cx: p.x,
+      cy: p.y,
+      r: p.size,
+      color: "white"
+    }, i))
+  });
+}
+//# sourceMappingURL=SnowView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","Dimensions","Canvas","Circle","SnowEngine","jsx","_jsx","SnowView","count","width","height","get","engineRef","current","raf","loop","update","requestAnimationFrame","cancelAnimationFrame","snow","style","flex","children","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;AACzC,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,EAAEC,MAAM,QAAQ,4BAA4B;AAC3D,SAASC,UAAU,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1C,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK,GAAG;AAAwB,CAAC,EAAE;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGT,UAAU,CAACU,GAAG,CAAC,QAAQ,CAAC;EAClD,MAAMC,SAAS,GAAGZ,MAAM,CAAoB,IAAI,CAAC;EAEjD,IAAI,CAACY,SAAS,CAACC,OAAO,EAAE;IACtBD,SAAS,CAACC,OAAO,GAAG,IAAIT,UAAU,CAACI,KAAK,EAAEC,KAAK,EAAEC,MAAM,CAAC;EAC1D;EAEAX,SAAS,CAAC,MAAM;IACd,IAAIe,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,oBACEP,IAAA,CAACJ,MAAM;IAACkB,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IAAAC,QAAA,EACxBH,IAAI,EAAEI,SAAS,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBACxBpB,IAAA,CAACH,MAAM;MAASwB,EAAE,EAAEF,CAAC,CAACG,CAAE;MAACC,EAAE,EAAEJ,CAAC,CAACK,CAAE;MAACC,CAAC,EAAEN,CAAC,CAACO,IAAK;MAACC,KAAK,EAAC;IAAO,GAA7CP,CAA+C,CAC7D;EAAC,CACI,CAAC;AAEb","ignoreList":[]}

package/lib/typescript/package/src/index.d.ts

@@ -0,0 +1,2 @@
+export { SnowView } from "./snow/SnowView";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../package/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,14 @@
+export type SnowParticle = {
+    x: number;
+    y: number;
+    speed: number;
+    size: number;
+};
+export declare class SnowEngine {
+    private width;
+    private height;
+    particles: SnowParticle[];
+    constructor(count: number, width: number, height: number);
+    update(): void;
+}
+//# sourceMappingURL=SnowEngine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnowEngine.d.ts","sourceRoot":"","sources":["../../../../../package/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;AAEF,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;CASP"}

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

@@ -0,0 +1,4 @@
+export declare function SnowView({ count }: {
+    count?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SnowView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnowView.d.ts","sourceRoot":"","sources":["../../../../../package/src/snow/SnowView.tsx"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ,CAAC,EAAE,KAAW,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CA2B3D"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,2 @@
+export { SnowView } from "./snow/SnowView";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,14 @@
+export type SnowParticle = {
+    x: number;
+    y: number;
+    speed: number;
+    size: number;
+};
+export declare class SnowEngine {
+    private width;
+    private height;
+    particles: SnowParticle[];
+    constructor(count: number, width: number, height: number);
+    update(): void;
+}
+//# sourceMappingURL=SnowEngine.d.ts.map

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

@@ -0,0 +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;AAEF,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;CASP"}

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

@@ -0,0 +1,4 @@
+export declare function SnowView({ count }: {
+    count?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SnowView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnowView.d.ts","sourceRoot":"","sources":["../../../../src/snow/SnowView.tsx"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ,CAAC,EAAE,KAAW,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CA2B3D"}

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "react-native-snow-backgroud",
+  "version": "0.1.0",
+  "description": "A simple snow background effect for React Native CLI using Skia.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-snow-backgroud-example",
+    "clean": "del-cli lib",
+    "build": "bob build",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "test": "jest",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gwxodn020/react-native-snow-backgroud.git"
+  },
+  "author": "jonadan <chunsig435@gmail.com> (https://github.com/gwxodn020)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gwxodn020/react-native-snow-backgroud/issues"
+  },
+  "homepage": "https://github.com/gwxodn020/react-native-snow-backgroud#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@shopify/react-native-skia": "^2.4.14",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.7.4",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "jest",
+      "eslint"
+    ],
+    "version": "0.56.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { SnowView } from "./snow/SnowView";

package/src/snow/SnowEngine.ts

@@ -0,0 +1,34 @@
+export type SnowParticle = {
+    x: number;
+    y: number;
+    speed: number;
+    size: number;
+  };
+  
+  export class SnowEngine {
+    particles: SnowParticle[] = [];
+  
+    constructor(
+      count: number,
+      private width: number,
+      private height: number,
+    ) {
+      this.particles = Array.from({ length: count }).map(() => ({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        speed: Math.random() * 1.5 + 0.5,
+        size: Math.random() * 2 + 1,
+      }));
+    }
+  
+    update() {
+      for (const p of this.particles) {
+        p.y += p.speed;
+        if (p.y > this.height) {
+          p.y = 0;
+          p.x = Math.random() * this.width;
+        }
+      }
+    }
+  }
+  

package/src/snow/SnowView.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+import { Dimensions } from "react-native";
+import { Canvas, Circle } from "@shopify/react-native-skia";
+import { SnowEngine } from "./SnowEngine";
+
+export function SnowView({ count = 100 }: { count?: number }) {
+  const { width, height } = Dimensions.get("window");
+  const engineRef = useRef<SnowEngine | null>(null);
+
+  if (!engineRef.current) {
+    engineRef.current = new SnowEngine(count, width, height);
+  }
+
+  useEffect(() => {
+    let raf: number;
+    const loop = () => {
+      engineRef.current?.update();
+      raf = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  const snow = engineRef.current;
+
+  return (
+    <Canvas style={{ flex: 1 }}>
+      {snow?.particles.map((p, i) => (
+        <Circle key={i} cx={p.x} cy={p.y} r={p.size} color="white" />
+      ))}
+    </Canvas>
+  );
+}