@arturhoncharuk/react-native-jazzicon 0.1.4

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 ArturHoncharuk
+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,52 @@
+# react-native-jazzicon
+
+React Native library for generating deterministic Jazzicons (Ethereum-style identicons) from addresses.
+
+<img src="./example.png" alt="react-native-jazzicon example" width="420" />
+
+## Installation
+
+```sh
+npm install react-native-jazzicon
+```
+
+## Usage
+
+```tsx
+import { Jazzicon } from 'react-native-jazzicon';
+
+const ADDRESSES = [
+  '0x1234567890123456789012345678901234567890',
+  '0x742d35Cc6634C0532925a3b844Bc9e7595f2EE31',
+];
+
+function Example() {
+  return (
+    <>
+      <Jazzicon size={80} address={ADDRESSES[0]} />
+      <Jazzicon size={40} address={ADDRESSES[1]} />
+    </>
+  );
+}
+```
+
+## Props
+
+- **`size`**: number – diameter of the identicon in pixels. Defaults to `16`.
+- **`address`**: string – wallet address used to generate the identicon. If provided, it is converted to a deterministic seed.
+- **`seed`**: number (optional) – numeric seed used when `address` is not passed.
+- **`containerStyle`**: `ViewStyle` (optional) – additional styles for the outer container.
+
+## 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/constants/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+export const COLORS = ['#01888C',
+// teal
+'#FC7500',
+// bright orange
+'#034F5D',
+// dark teal
+'#F73F01',
+// orangered
+'#FC1960',
+// magenta
+'#C7144C',
+// raspberry
+'#F3C100',
+// goldenrod
+'#1598F2',
+// lightning blue
+'#2465E1',
+// sail blue
+'#F19E02' // gold
+];
+export const wobble = 30;
+export const shapeCount = 3;
+//# sourceMappingURL=index.js.map

package/lib/module/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["COLORS","wobble","shapeCount"],"sourceRoot":"../../../src","sources":["constants/index.ts"],"mappings":";;AAAA,OAAO,MAAMA,MAAM,GAAG,CACpB,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS,CAAE;AAAA,CACZ;AAED,OAAO,MAAMC,MAAM,GAAG,EAAE;AACxB,OAAO,MAAMC,UAAU,GAAG,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Svg, Rect } from 'react-native-svg';
+import MersenneTwister from 'mersenne-twister';
+import Color from 'color';
+import { COLORS, wobble, shapeCount } from "./constants/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export class Jazzicon extends Component {
+  static propsToState({
+    seed,
+    address
+  }) {
+    if (address) {
+      address = address.toLowerCase();
+      if (address.startsWith('0x')) {
+        seed = parseInt(address.slice(2, 10), 16);
+      }
+    }
+    const generator = new MersenneTwister(seed);
+    const amount = generator.random() * 30 - wobble / 2;
+    return {
+      generator,
+      colors: COLORS.map(hex => new Color(hex).rotate(amount).hex())
+    };
+  }
+  state = Jazzicon.propsToState(this.props);
+  static getDerivedStateFromProps(props, _state) {
+    return Jazzicon.propsToState(props);
+  }
+  render() {
+    const {
+      containerStyle,
+      size = 16
+    } = this.props;
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, {
+        width: size,
+        height: size,
+        backgroundColor: this.randomColor,
+        borderRadius: size / 2
+      }, containerStyle],
+      children: /*#__PURE__*/_jsx(Svg, {
+        width: size,
+        height: size,
+        children: Array(shapeCount).fill(0).map((_, index) => {
+          const center = size / 2;
+          const firstRot = this.randomNumber;
+          const angle = Math.PI * 2 * firstRot;
+          const velocity = size / shapeCount * this.randomNumber + index * size / shapeCount;
+          const tx = Math.cos(angle) * velocity;
+          const ty = Math.sin(angle) * velocity;
+          const secondRot = this.randomNumber;
+          const rot = firstRot * 360 + secondRot * 180;
+          return /*#__PURE__*/_jsx(Rect, {
+            x: 0,
+            y: 0,
+            width: size,
+            height: size,
+            fill: this.randomColor,
+            transform: `translate(${tx} ${ty}) rotate(${rot.toFixed(1)} ${center} ${center})`
+          }, `shape_${index}`);
+        })
+      })
+    });
+  }
+  get randomNumber() {
+    const {
+      generator
+    } = this.state;
+    return generator.random();
+  }
+  get randomColor() {
+    const {
+      colors
+    } = this.state;
+    this.randomNumber;
+    return colors.splice(Math.floor(colors.length * this.randomNumber), 1)[0] ?? '#000000';
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Component","StyleSheet","View","Svg","Rect","MersenneTwister","Color","COLORS","wobble","shapeCount","jsx","_jsx","Jazzicon","propsToState","seed","address","toLowerCase","startsWith","parseInt","slice","generator","amount","random","colors","map","hex","rotate","state","props","getDerivedStateFromProps","_state","render","containerStyle","size","style","styles","container","width","height","backgroundColor","randomColor","borderRadius","children","Array","fill","_","index","center","firstRot","randomNumber","angle","Math","PI","velocity","tx","cos","ty","sin","secondRot","rot","x","y","transform","toFixed","splice","floor","length","create","overflow"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/package.json

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

package/lib/module/types/index.js

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

package/lib/module/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/index.ts"],"mappings":"","ignoreList":[]}

package/lib/module/utils/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/lib/module/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/package.json

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

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

@@ -0,0 +1,4 @@
+export declare const COLORS: string[];
+export declare const wobble = 30;
+export declare const shapeCount = 3;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,UAWlB,CAAC;AAEF,eAAO,MAAM,MAAM,KAAK,CAAC;AACzB,eAAO,MAAM,UAAU,IAAI,CAAC"}

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

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+import type { TJazziconProps, TJazziconState } from './types';
+export declare class Jazzicon extends Component<TJazziconProps, TJazziconState> {
+    private static propsToState;
+    state: TJazziconState;
+    static getDerivedStateFromProps(props: TJazziconProps, _state: TJazziconState): Partial<TJazziconState> | null;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private get randomNumber();
+    private get randomColor();
+}
+//# 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.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9D,qBAAa,QAAS,SAAQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IACrE,OAAO,CAAC,MAAM,CAAC,YAAY;IAoBpB,KAAK,EAAE,cAAc,CAAqC;WAEnD,wBAAwB,CACpC,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,cAAc,GACrB,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAI1B,MAAM;IAqDb,OAAO,KAAK,YAAY,GAGvB;IAED,OAAO,KAAK,WAAW,GAStB;CACF"}

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

@@ -0,0 +1,13 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type * as MersenneTwister from 'mersenne-twister';
+export type TJazziconProps = {
+    size?: number;
+    address?: string;
+    seed?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+};
+export type TJazziconState = {
+    generator: MersenneTwister.IMersenneTwister;
+    colors: string[];
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,KAAK,eAAe,MAAM,kBAAkB,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,eAAe,CAAC,gBAAgB,CAAC;IAC5C,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC"}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "@arturhoncharuk/react-native-jazzicon",
+  "version": "0.1.4",
+  "description": "React Native library for generating deterministic Jazzicons (Ethereum-style identicons) from addresses.",
+  "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-jazzicon-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArturHoncharuk/react-native-jazzicon"
+  },
+  "author": "ArturHoncharuk <dotwork.play@gmail.com> (https://github.com/ArturHoncharuk)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ArturHoncharuk/react-native-jazzicon/issues"
+  },
+  "homepage": "https://github.com/ArturHoncharuk/react-native-jazzicon#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@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",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/mersenne-twister": "^1.1.7",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "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",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "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"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|color|color-name|color-string|color-convert|mersenne-twister|react-native-svg)/)"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.2"
+  },
+  "dependencies": {
+    "color": "^5.0.3",
+    "mersenne-twister": "^1.1.0",
+    "react-native-svg": "^15.15.3"
+  }
+}

package/src/constants/index.ts

@@ -0,0 +1,15 @@
+export const COLORS = [
+  '#01888C', // teal
+  '#FC7500', // bright orange
+  '#034F5D', // dark teal
+  '#F73F01', // orangered
+  '#FC1960', // magenta
+  '#C7144C', // raspberry
+  '#F3C100', // goldenrod
+  '#1598F2', // lightning blue
+  '#2465E1', // sail blue
+  '#F19E02', // gold
+];
+
+export const wobble = 30;
+export const shapeCount = 3;

package/src/index.tsx

@@ -0,0 +1,113 @@
+import { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Svg, Rect } from 'react-native-svg';
+import MersenneTwister from 'mersenne-twister';
+import Color from 'color';
+import type { TJazziconProps, TJazziconState } from './types';
+import { COLORS, wobble, shapeCount } from './constants';
+
+export class Jazzicon extends Component<TJazziconProps, TJazziconState> {
+  private static propsToState({
+    seed,
+    address,
+  }: TJazziconProps): TJazziconState {
+    if (address) {
+      address = address.toLowerCase();
+
+      if (address.startsWith('0x')) {
+        seed = parseInt(address.slice(2, 10), 16);
+      }
+    }
+
+    const generator = new MersenneTwister(seed);
+    const amount = generator.random() * 30 - wobble / 2;
+    return {
+      generator,
+      colors: COLORS.map((hex) => new Color(hex).rotate(amount).hex()),
+    };
+  }
+
+  public state: TJazziconState = Jazzicon.propsToState(this.props);
+
+  public static getDerivedStateFromProps(
+    props: TJazziconProps,
+    _state: TJazziconState
+  ): Partial<TJazziconState> | null {
+    return Jazzicon.propsToState(props);
+  }
+
+  public render() {
+    const { containerStyle, size = 16 } = this.props;
+
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            width: size,
+            height: size,
+            backgroundColor: this.randomColor,
+            borderRadius: size / 2,
+          },
+          containerStyle,
+        ]}
+      >
+        <Svg width={size} height={size}>
+          {Array(shapeCount)
+            .fill(0)
+            .map((_, index) => {
+              const center = size / 2;
+
+              const firstRot = this.randomNumber;
+              const angle = Math.PI * 2 * firstRot;
+              const velocity =
+                (size / shapeCount) * this.randomNumber +
+                (index * size) / shapeCount;
+
+              const tx = Math.cos(angle) * velocity;
+              const ty = Math.sin(angle) * velocity;
+
+              const secondRot = this.randomNumber;
+              const rot = firstRot * 360 + secondRot * 180;
+
+              return (
+                <Rect
+                  key={`shape_${index}`}
+                  x={0}
+                  y={0}
+                  width={size}
+                  height={size}
+                  fill={this.randomColor}
+                  transform={`translate(${tx} ${ty}) rotate(${rot.toFixed(
+                    1
+                  )} ${center} ${center})`}
+                />
+              );
+            })}
+        </Svg>
+      </View>
+    );
+  }
+
+  private get randomNumber(): number {
+    const { generator } = this.state;
+    return generator.random();
+  }
+
+  private get randomColor(): string {
+    const { colors } = this.state;
+
+    this.randomNumber;
+
+    return (
+      colors.splice(Math.floor(colors.length * this.randomNumber), 1)[0] ??
+      '#000000'
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});

package/src/types/index.ts

@@ -0,0 +1,14 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type * as MersenneTwister from 'mersenne-twister';
+
+export type TJazziconProps = {
+  size?: number;
+  address?: string;
+  seed?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+export type TJazziconState = {
+  generator: MersenneTwister.IMersenneTwister;
+  colors: string[];
+};