feat: New Features and Improvements

.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"

.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."

README.md

@@ -1,105 +1,181 @@
+# 🔲 react-native-custom-qr-codes
 
-# 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.
 
-<p align="center">
-  <img alt="example-qr-code-1" src="https://raw.githubusercontent.com/nating/react-native-custom-qr-codes/HEAD/assets/qr-code-1.png" width="250">
-  <img alt="example-qr-code-1" src="https://raw.githubusercontent.com/nating/react-native-custom-qr-codes/HEAD/assets/qr-code-2.png" width="250">
-  <img alt="example-qr-code-3" src="https://raw.githubusercontent.com/nating/react-native-custom-qr-codes/HEAD/assets/qr-code-3.png" width="250">
-</p>
-
-<p align="center">
-</p>
+[![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">
-  Customisable QR Codes for React Native.
+  <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
 
-`npm install react-native-custom-qr-codes`
+```sh
+npm install @oguzhnatly/react-native-custom-qr-codes
+```
+
+```sh
+yarn add @oguzhnatly/react-native-custom-qr-codes
+```
 
-If you are not using Expo, you will also have to manually link the [react-native-svg library](https://github.com/react-native-community/react-native-svg).  
-Follow [the instructions here](https://github.com/react-native-community/react-native-svg#manual) to do this.
+This package depends on `react-native-svg`. If you are not using Expo, install and link it manually:
 
-## Usage
+```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
 
-```jsx
-import { QRCode } from 'react-native-custom-qr-codes';
+```tsx
+import { QRCode } from '@oguzhnatly/react-native-custom-qr-codes';
 
-<QRCode content='https://reactnative.com'/>
+<QRCode content="https://github.com/oguzhnatly" />
 ```
 
-### Properties
-
-| Prop | Description | Default |
-|---|---|---|
-|**`content`**|The String to be encoded in the QR code. |`'No Content'`|
-|**`codeStyle`**|The style of the centre QR Code pieces. |`square`|
-|**`outerEyeStyle`**|The style of the outside of the QR Code's eyes. |`square`|
-|**`innerEyeStyle`**|The style of the inside of the QR Code's eyes. |`square`|
-|**`size`**|The width & height of the component. |`250`|
-|**`color`**|The color of the QR Code. |`black`|
-|**`backgroundColor`**|The background color of the component. |`white`|
-|**`padding`**|The padding between the edge of the component and the QR Code itself (In terms of QR code piece sizes). |`1`|
-|**`logo`**|The image to be put in the centre of the QR Code.<br>**Must use a higher `ecl` for QR Code to work with a logo. <br>(L->M->Q->H)** |none|
-|**`logoSize`**|The size of the logo in the QR Code. |none|
-|**`linearGradient`**|The two colors to be used for the linear gradient for the foreground. |none|
-|**`gradientDirection`**|The numbers that [define the orientation of the linear gradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients). |`[0,0,170,0]`|
-|**`backgroundImage`**|The image to be used as the filling of the QR Code pieces.<br>**The Eyes can not be styled if a background image is used.**|none|
-|**`ecl`**|The [error correction level](http://www.qrcode.com/en/about/error_correction.html) of the QR Code. |`L`|
+---
+
+## 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
 
-### `codeStyle`
-```jsx
-<QRCode codeStyle='square' />
-<QRCode codeStyle='circle' />
-<QRCode codeStyle='dot' />
-<QRCode codeStyle='diamond' />
-<QRCode codeStyle='sharp' />
-```
-<img src='./assets/example-code-styles.png' height='250'/>
+### Code styles
 
-### `outerEyeStyle`
-```jsx
-<QRCode outerEyeStyle='square' />
-<QRCode outerEyeStyle='circle' />
-<QRCode outerEyeStyle='diamond' />
+```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-outer-eye-styles.png' height='250'/>
 
-### `innerEyeStyle`
-```jsx
-<QRCode innerEyeStyle='square' />
-<QRCode innerEyeStyle='circle' />
-<QRCode innerEyeStyle='diamond' />
+<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-inner-eye-styles.png' height='250'/>
 
-### logo
-```jsx
-<QRCode logo={require('./dab.png')} />
+<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='250'/>
 
-### linearGradient
-```jsx
-<QRCode linearGradient={['rgb(255,0,0)','rgb(0,255,255)']} />
-<QRCode linearGradient={['rgb(255,0,0)','rgb(0,255,255)']} gradientDirection={[0,170,0,0]} />
+<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='250'/>
 
-### backgroundImage
-```jsx
-<QRCode backgroundImage={require('./galaxy.png')} />
+<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='250'/>
 
-## Contributing
+<img src="./assets/example-background-image.png" height="220" />
+
+### RTL support
+
+```tsx
+<QRCode
+  content="https://example.com"
+  isRTL={true}
+/>
+```
 
-Take a look at [CONTRIBUTING.md](./CONTRIBUTING.md) 😁
+---
 
 ## License
 
-[MIT License](http://opensource.org/licenses/mit-license.html). © Geoffrey Natin 2017
+MIT © [Oguzhan Atalay](https://github.com/oguzhnatly)

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;
+});