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

---

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 @oguzhnatly/react-native-custom-qr-codes

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:

npm install react-native-svg
cd ios && pod install

For manual linking instructions see the react-native-svg documentation.

---

Usage

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

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

Eye styles

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

Logo overlay

Use ecl="H" to ensure the QR code remains scannable with a logo covering the center:

<QRCode
  content="https://example.com"
  logo={require('./logo.png')}
  logoSize={60}
  ecl="H"
/>

Linear gradient

<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]}
/>

Background image

Eye styling is not available when using backgroundImage:

<QRCode
  content="https://example.com"
  backgroundImage={require('./texture.png')}
  ecl="H"
/>

RTL support

<QRCode
  content="https://example.com"
  isRTL={true}
/>

---

License

MIT © Oguzhan Atalay