@oguzhnatly/react-native-custom-qr-codes 2.0.0

package/.github/workflows/build.yml

@@ -0,0 +1,32 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Install and type check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Verify types
+        run: |
+          test -f index.d.ts || (echo "index.d.ts missing" && exit 1)
+          echo "Types verified"

package/.github/workflows/publish.yml

@@ -0,0 +1,69 @@
+name: Publish to npm
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'package.json'
+
+jobs:
+  publish:
+    name: Publish
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Upgrade npm
+        run: npm install -g npm@latest
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Check if version changed
+        id: version_check
+        run: |
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          PUBLISHED_VERSION=$(npm view $(node -p "require('./package.json').name") version 2>/dev/null || echo "0.0.0")
+          echo "current=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+          echo "published=$PUBLISHED_VERSION" >> $GITHUB_OUTPUT
+          if [ "$CURRENT_VERSION" != "$PUBLISHED_VERSION" ]; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Publish to npm
+        if: steps.version_check.outputs.changed == 'true'
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+          npm publish --provenance --access public
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub release
+        if: steps.version_check.outputs.changed == 'true'
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ steps.version_check.outputs.current }}
+          name: v${{ steps.version_check.outputs.current }}
+          body: |
+            ## @oguzhnatly/react-native-custom-qr-codes v${{ steps.version_check.outputs.current }}
+
+            Published to npm: https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes
+          generate_release_notes: true
+          make_latest: true
+
+      - name: Skip (version unchanged)
+        if: steps.version_check.outputs.changed == 'false'
+        run: echo "Version ${{ steps.version_check.outputs.current }} is already published. Bump package.json version to trigger a new release."

package/CONTRIBUTING.md

@@ -0,0 +1,14 @@
+# Contributing
+
+Thank you for taking the time to try and make this project better!
+
+## Reporting Bugs & Feature Requests
+
+If you have found an issue, create an issue on the repo- but make sure to:
+* Describe what does happen
+* Describe what should happen instead
+*i.e. In what way the functionality is different from desired.*
+
+If you would like to request a feature, then by all means and we will try to implement it if reasonable.
+
+If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/nating/react-native-custom-qr-codes/issues) and [pull requests](https://github.com/nating/react-native-custom-qr-codes/pulls) before filing a new issue.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Geoffrey Natin
+
+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,181 @@
+# 🔲 react-native-custom-qr-codes
+
+Fully customizable QR code component for React Native with TypeScript support and RTL layout compatibility. Style the code pieces, eye shapes, colors, gradients, logos, and background images however you need.
+
+[![npm version](https://img.shields.io/npm/v/@oguzhnatly/react-native-custom-qr-codes.svg)](https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes)
+[![npm downloads](https://img.shields.io/npm/dw/@oguzhnatly/react-native-custom-qr-codes.svg)](https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![platforms](https://img.shields.io/badge/platform-iOS%20%7C%20Android-lightgrey.svg)](https://github.com/oguzhnatly/react-native-custom-qr-codes)
+
+<p align="center">
+  <img alt="QR Code Example 1" src="https://raw.githubusercontent.com/oguzhnatly/react-native-custom-qr-codes/master/assets/qr-code-1.png" width="200">
+  <img alt="QR Code Example 2" src="https://raw.githubusercontent.com/oguzhnatly/react-native-custom-qr-codes/master/assets/qr-code-2.png" width="200">
+  <img alt="QR Code Example 3" src="https://raw.githubusercontent.com/oguzhnatly/react-native-custom-qr-codes/master/assets/qr-code-3.png" width="200">
+</p>
+
+---
+
+## Features
+
+- ✅ Full TypeScript support with typed props
+- ✅ RTL layout support
+- ✅ Multiple code piece styles: square, circle, dot, diamond, sharp, ninja
+- ✅ Independent eye shape control (outer and inner separately)
+- ✅ Linear gradient foreground colors
+- ✅ Logo overlay in the center of the QR code
+- ✅ Background image fill for code pieces
+- ✅ Configurable error correction level
+- ✅ iOS and Android
+
+---
+
+## Installation
+
+```sh
+npm install @oguzhnatly/react-native-custom-qr-codes
+```
+
+```sh
+yarn add @oguzhnatly/react-native-custom-qr-codes
+```
+
+This package depends on `react-native-svg`. If you are not using Expo, install and link it manually:
+
+```sh
+npm install react-native-svg
+cd ios && pod install
+```
+
+For manual linking instructions see the [react-native-svg documentation](https://github.com/software-mansion/react-native-svg#installation).
+
+---
+
+## Usage
+
+```tsx
+import { QRCode } from '@oguzhnatly/react-native-custom-qr-codes';
+
+<QRCode content="https://github.com/oguzhnatly" />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `string` | `'No Content'` | The string to encode in the QR code |
+| `size` | `number` | `250` | Width and height of the component in pixels |
+| `padding` | `number` | `1` | Padding between the edge and the QR code in piece units |
+| `color` | `string` | `'black'` | Foreground color of the QR code |
+| `backgroundColor` | `string` | `'white'` | Background color of the component |
+| `codeStyle` | `string` | `'square'` | Style of the centre QR code pieces. See values below |
+| `outerEyeStyle` | `string` | `'square'` | Style of the outer frame of the QR code eyes |
+| `innerEyeStyle` | `string` | `'square'` | Style of the inner dot of the QR code eyes |
+| `ecl` | `string` | `'L'` | Error correction level. Higher levels allow logo overlays. `L` `M` `Q` `H` |
+| `logo` | `ImageSource` | none | Image source to display in the center of the QR code. Requires a higher `ecl` |
+| `logoSize` | `number` | none | Size of the logo overlay in pixels |
+| `linearGradient` | `ColorValue[]` | none | Two colors used for a linear gradient on the foreground |
+| `gradientDirection` | `number[]` | `[0,0,170,0]` | Numbers defining the [gradient orientation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) |
+| `backgroundImage` | `ImageSource` | none | Image used as the fill pattern for QR code pieces. Eye styling is disabled when this is used |
+| `isRTL` | `boolean` | `false` | Enables right-to-left layout rendering |
+
+### `codeStyle` values
+
+`square` `circle` `dot` `diamond` `sharp` `ninja`
+
+### `outerEyeStyle` values
+
+`square` `circle` `circles` `diamond` `rounded`
+
+### `innerEyeStyle` values
+
+`square` `circle` `circles` `diamond` `rounded`
+
+---
+
+## Examples
+
+### Code styles
+
+```tsx
+<QRCode content="https://example.com" codeStyle="square" />
+<QRCode content="https://example.com" codeStyle="circle" />
+<QRCode content="https://example.com" codeStyle="dot" />
+<QRCode content="https://example.com" codeStyle="diamond" />
+<QRCode content="https://example.com" codeStyle="sharp" />
+```
+
+<img src="./assets/example-code-styles.png" height="220" />
+
+### Eye styles
+
+```tsx
+<QRCode content="https://example.com" outerEyeStyle="square" innerEyeStyle="square" />
+<QRCode content="https://example.com" outerEyeStyle="circle" innerEyeStyle="circle" />
+<QRCode content="https://example.com" outerEyeStyle="diamond" innerEyeStyle="diamond" />
+```
+
+<img src="./assets/example-outer-eye-styles.png" height="220" />
+<img src="./assets/example-inner-eye-styles.png" height="220" />
+
+### Logo overlay
+
+Use `ecl="H"` to ensure the QR code remains scannable with a logo covering the center:
+
+```tsx
+<QRCode
+  content="https://example.com"
+  logo={require('./logo.png')}
+  logoSize={60}
+  ecl="H"
+/>
+```
+
+<img src="./assets/example-logo.png" height="220" />
+
+### Linear gradient
+
+```tsx
+<QRCode
+  content="https://example.com"
+  linearGradient={['rgb(255,0,0)', 'rgb(0,100,255)']}
+/>
+
+<QRCode
+  content="https://example.com"
+  linearGradient={['rgb(255,0,0)', 'rgb(0,100,255)']}
+  gradientDirection={[0, 170, 0, 0]}
+/>
+```
+
+<img src="./assets/example-linear-gradient.png" height="220" />
+
+### Background image
+
+Eye styling is not available when using `backgroundImage`:
+
+```tsx
+<QRCode
+  content="https://example.com"
+  backgroundImage={require('./texture.png')}
+  ecl="H"
+/>
+```
+
+<img src="./assets/example-background-image.png" height="220" />
+
+### RTL support
+
+```tsx
+<QRCode
+  content="https://example.com"
+  isRTL={true}
+/>
+```
+
+---
+
+## License
+
+MIT © [Oguzhan Atalay](https://github.com/oguzhnatly)

package/index.d.ts

@@ -0,0 +1,32 @@
+import { ColorValue, ImageProps } from "react-native";
+
+export function QRCode({
+  content,
+  size,
+  padding,
+  color,
+  gradientDirection,
+  backgroundColor,
+  codeStyle,
+  outerEyeStyle,
+  innerEyeStyle,
+  logoSize,
+  ecl,
+}: {
+  content?: string;
+  size?: number;
+  padding?: number;
+  color?: string;
+  linearGradient?: Array<ColorValue>;
+  gradientDirection?: Array<number>;
+  backgroundColor?: string;
+  innerEyeStyle?: "circle" | "circles" | "diamond" | "rounded" | "square";
+  outerEyeStyle?: "circle" | "circles" | "diamond" | "rounded" | "square";
+  codeStyle?: "circle" | "diamond" | "dot" | "ninja" | "sharp" | "square";
+  logo?: ImageProps["source"] | string;
+  backgroundImage?: ImageProps["source"];
+  logoSize?: number;
+  ecl?: "L" | "M" | "Q" | "H";
+  svg?: any;
+  isRTL?: boolean;
+});

package/index.js

@@ -0,0 +1 @@
+export { default as QRCode } from './lib/QRCode';