https://github.com/nating/react-native-custom-qr-codes
Customisable QR codes for React Native
https://github.com/nating/react-native-custom-qr-codes
Last synced: about 1 year ago
JSON representation
Customisable QR codes for React Native
- Host: GitHub
- URL: https://github.com/nating/react-native-custom-qr-codes
- Owner: nating
- License: mit
- Created: 2017-07-07T12:21:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-04-26T08:31:03.000Z (about 4 years ago)
- Last Synced: 2025-04-09T23:17:00.326Z (about 1 year ago)
- Language: JavaScript
- Size: 24.5 MB
- Stars: 97
- Watchers: 8
- Forks: 47
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-custom-qr-codes
Customisable QR Codes for React Native.
## Installation
`npm install 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.
## Usage
```jsx
import { QRCode } from 'react-native-custom-qr-codes';
```
### 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.
**Must use a higher `ecl` for QR Code to work with a logo.
(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.
**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`|
## Examples
### `codeStyle`
```jsx
```
### `outerEyeStyle`
```jsx
```
### `innerEyeStyle`
```jsx
```
### logo
```jsx
```
### linearGradient
```jsx
```
### backgroundImage
```jsx
```
## Contributing
Take a look at [CONTRIBUTING.md](./CONTRIBUTING.md) 😁
## License
[MIT License](http://opensource.org/licenses/mit-license.html). © Geoffrey Natin 2017