@qr-x/react-native v1.1.1

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