# react-native-qrcode

> react-native qrocode generator

Latest version **0.2.7** (published 2018-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-qrcode
pnpm add react-native-qrcode
yarn add react-native-qrcode
bun add react-native-qrcode
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2018-07-25 |
| First published | 2015-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-qrcode) |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 37.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 856 |
| Author | sivision.chen |
| Maintainers | cssivision |
| Keywords | react-native, qrcode |

## Links

- npm: https://www.npmjs.com/package/react-native-qrcode
- Repository: https://github.com/cssivision/react-native-qrcode
- Homepage: https://github.com/cssivision/react-native-qrcode#readme
- Issues: https://github.com/cssivision/react-native-qrcode/issues
- npm.io page: https://npm.io/package/react-native-qrcode

## Dependencies (3)

- [qr.js](https://npm.io/package/qr.js.md) 0.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.2.7 (latest) — 2018-07-25
- 0.2.6 — 2017-08-26
- 0.2.5 — 2017-08-09
- 0.2.4 — 2017-07-28
- 0.2.3 — 2016-11-12
- 0.2.2 — 2016-05-26
- 0.2.1 — 2016-05-26
- 0.2.0 — 2016-05-05
- 0.1.3 — 2016-04-13
- 0.1.2 — 2016-04-09
- 0.1.1 — 2016-03-11
- 0.1.0 — 2016-03-05
- 0.0.14 — 2016-02-14
- 0.0.13 — 2015-12-31
- 0.0.12 — 2015-12-26
- … 12 more at https://npm.io/package/react-native-qrcode/versions

## README

# react-native-qrcode
A react-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code), not only support English.

## Installation
```sh
npm install react-native-qrcode --save
```
## Usage
```jsx
'use strict';

import React, { Component } from 'react'
import QRCode from 'react-native-qrcode';

import {
    AppRegistry,
    StyleSheet,
    View,
    TextInput
} from 'react-native';

class HelloWorld extends Component {
  state = {
    text: 'http://facebook.github.io/react-native/',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={(text) => this.setState({text: text})}
          value={this.state.text}
        />
        <QRCode
          value={this.state.text}
          size={200}
          bgColor='purple'
          fgColor='white'/>
      </View>
    );
  };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'
    },

    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        margin: 10,
        borderRadius: 5,
        padding: 5,
    }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

module.exports = HelloWorld;
```
## Available Props

prop      | type                 | default value
----------|----------------------|--------------
`value`   | `string`             | `http://facebook.github.io/react-native/`
`size`    | `number`             | `128`
`bgColor` | `string` (CSS color) | `"#000"`
`fgColor` | `string` (CSS color) | `"#FFF"`

<img src='qrcode.png' height = '256' width = '256'/>

# Licenses

All source code is licensed under the [MIT License](https://github.com/cssivision/react-native-qrcode/blob/master/LICENSE).

---
_Source: https://npm.io/package/react-native-qrcode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._