Package Exports

@qr-x/react-native
@qr-x/react-native/dist/index.cjs.js
@qr-x/react-native/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@qr-x/react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

npm install @qr-x/react-native

Usage

You can also try QR-X in action here or follow the examples below.

Solid

import QRX from '@qr-x/react-native'

function App() {
  return <QRX data='https://qr-x.devtrice.dev' width={400} height={400} color='#0284c7' />
}

Gradient

Linear Gradient

import QRX from '@qr-x/react-native'

function App() {
  return (
    <QRX data='https://qr-x.devtrice.dev' width={400} height={400} gradient={{ colors: ['#f97316', '#f59e0b', '#facc15'] }} />
  )
}

Radial Gradient

import QRX from '@qr-x/react-native'

function App() {
  return (
    <QRX
      data='https://qr-x.devtrice.dev'
      width={400}
      height={400}
      gradient={{ type: 'radial', colors: ['#f97316', '#f59e0b', '#facc15'] }}
    />
  )
}

Fill Image

import QRX from '@qr-x/react-native'

function App() {
  return (
    <QRX
      data='https://qr-x.devtrice.dev'
      width={400}
      height={400}
      fillImage='https://images.unsplash.com/photo-1682687218608-5e2522b04673'
    />
  )
}

Brand

Brand Image

import QRX from '@qr-x/react-native'

function App() {
  return (
    <QRX
      data='https://qr-x.devtrice.dev'
      width={400}
      height={400}
      brand={{
        src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673',
        style: { width: 32, height: 32 },
      }}
    />
  )
}

Brand Component

import QRX from '@qr-x/react-native'

function App() {
  return (
    <QRX
      data='https://qr-x.devtrice.dev'
      width={400}
      height={400}
      brand={<View style={{ width: 50, height: 50, background: 'red' }} />}
    />
  )
}

Props

Name	Type	Default
data	`string`
level	`'L' \| 'M' \|'Q' \| 'H'`	`'L'`
shapes.body	`'square' \| 'circle' \| 'leaf' \| 'rounded' \| 'diamond' \| 'triangle' \| 'heart'`	`'square'`
shapes.eyeball	`'square' \| 'circle' \| 'leaf' \| 'rounded'`	`'square'`
shapes.eyeframe	`'square' \| 'circle' \| 'leaf' \| 'rounded'`	`'square'`
gradient.type	`'linear' \| 'radial'`
gradients.colors	`string[] \| {value: string, stop: number}`
gradients.rotate	`number` (This property only exist if gradient.type is 'radial')	`45`
fillImage	`string`
brand	`ComponentProps<'img'>` \| `ReactNode`