cssivision / react-native-qrcode

a minimalist qrcode component for react-native

THIS PROJECT IS NO LONGER MAINTAINED

react-native-qrcode

A react-native component to generate QRcode, not only support English.

Installation

npm install react-native-qrcode --save

Usage

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

Licenses

All source code is licensed under the MIT License.

react-native-qrcode's Issues

image in the middle of QR

Hiii...
Thanks for this library, but can you tell me how to insert image or icon in the middle of QR?

Thank you..

a scrollbar on Web

The effect of code on the web side, like the following figure, will produce scrolling bars of X and Y axis. Is anyone helping me?

  <QRCode
                value={"123456"}
                size={150}
                bgColor={'black'}
                fgColor={'#F2F2F2'}/>

Exporting the generated QR code as image

Would it be possible to get the image of the QR code as a usable image, like base64? Is that something we can already access or is an additional method in the component needed?

The library works perfect also in Expo.

QR code not showing with value from state

QR code is not showing with value from state
Also disappears when state value changes

embed image / background image

would be a cool customization feature

在iOS上，二维码不显示

"react": "16.4.1",
"react-native": "0.56.0",
"react-native-camera": "^1.1.4",
"react-native-keyboard-aware-scroll-view": "^0.6.0",
"react-native-qr-scanner": "^1.2.4",
"react-native-qrcode": "^0.2.6",
"react-navigation": "^2.7.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"

<QRCode value={“QRCodeQRCodeQRCodeQRCodeQRCode”} size={128} bgColor='#000' fgColor='#fff'/>

Since the project is no longer maintained can you assign a maintainer?

QR Code is not rendered in RN 0.37

Hi there,

as of React Native v0.37.0 the QR Code is no longer rendered.

Anyone with the same problem?

Is there a property or method that we can clear it "loaded" or "completed" like Image?

Although it is a short time, sometimes the state is important for us. For example, I create a qrcode by clicking a button and I will take a view shot after it. Then I got a blank if I shot too fast. Now I use the "setTimeout", but I still cannot confirm that if it loaded.
So the question is, can I clear the state of the qrcode?

onLoad function not working

onLoad function not working

<QRCode value={id} size={200} onLoad={this.QRCodeOnLoad} />

Version:
react-native: 0.56.0

A mass of black qr code

Use this plug-in in vivo on his mobile phone is black，Other mobile phone is good，Could you tell me how to solve this problem

expose ErrorCorrectLevel

as title

QR CODE VALUE

Good Afternoon,

I have a question I have a form with text input and I want to send the value to another screen and generate the qr code with that same value.

The code:
`'use strict';

import React, {Component} from 'react';
import { Text, View, TextInput, Button, Alert, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // Version can be specified in package.json
import { TabNavigator, TabBarBottom } from 'react-navigation'; // Version can be specified in package.json
import QRCode from 'react-qr-code';

//Form
import t from 'tcomb-form-native';
const Form = t.form.Form;

const User = t.struct({
obu: t.String,
});

const options = {
fields: {
obu: {
maxLength:14,
placeholder: 'E.g.: "001234567890',
label: 'Insira o OBU ID',
error: 'Por favor introduza o OBU ID para a criação do QRCode'
}
}
}
//Form

class HomeScreen extends React.Component {

handleSubmit = () => {
const value = this._form.getValue(); // use that ref to get the form value
console.log('value: ', value);
}

render() {
return (

<Form
ref={c => this._form = c} // assign a ref
type={User}
options={options}/>


);
}
}

var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});

class QRCodeScreen extends React.Component {
render() {
const { params } = this.props.navigation.state;
const obu = params ? params.obu : null;
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{params.obu}


);
}
}

/class DiscountsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
Discounts!

);
}
}/

export default TabNavigator(
{
Home: { screen: HomeScreen },
QRCode: { screen: QRCodeScreen },
//Discounts: { screen: DiscountsScreen },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = ios-home${focused ? '' : '-outline'};
} else if (routeName === 'Discounts') {
iconName = ios-book${focused ? '' : '-outline'};
} else if (routeName === 'QRCode') {
iconName = ios-qr-scanner${focused ? '' : '-outline'};
}

    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
  activeTintColor: 'tomato',
  inactiveTintColor: 'blue',
},
animationEnabled: false,
swipeEnabled: false,

}
);`

Need callback After qrcode rendered completely。

qrcode in my project is rendered dynamicly，I need to know when the qrcode rendered completely.

Code Length OverFlow

I'm passing large amount of value.Ex. 2878(The length)

undefined is not an object (evaluating 'CameraManager.Aspect')

undefined is not an object (evaluating 'CameraManager.Aspect')

add a logo ?

i want display a logo on this component , this logo is a image

iOS cannot display QR using rn0.56

iOS cannot display QR using rn0.56.
When I downgraded to 0.54.4, it worked well.

first open the qrcode page Very slow

I use this react-native-qrcode ,when I first open the qrcode page ,this is very slow.

prevent resize and scroll

how to prevent resizing and scrolling qrCode content

[ANDROID] Getting white flash on background while qr code is being generated

Ignore ActivityIndicator, I just made sure that flash isn't related to animation

My modal that is storing component which is storing qr code:
`const Modal = (props: Props) => (

{props.children}

)

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow', //rgba(0,21,43,0.75)
alignItems: 'center',
justifyContent: 'center',
padding: 24,
} as ViewStyle,
wrapper: {
backgroundColor: 'white',
padding: 16,
paddingTop: 32,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
borderTopRightRadius: 24,
borderBottomLeftRadius: 24,
} as ViewStyle,
})

export default Modal`

And Im using react-navigation modal to show this on screen
only problem occurs on android emulator, ios is fine

Using deprecated 'html' prop in WebView

The WebView used in the Canvas.js is using the deprecated html prop. Should use the source prop instead.

Reference: WebView Documentation on React-Native

react package has encountered an internal error for rn40

it work well when i delete the import

the code can not be recognizerd

I use it like this: <QRCode value={'http://www.baidu.com/'}
bgColor="#fff"
fgColor="#333"/>)

QR Code appears to be overly complex for data entered.

I'm generating a QR code using this package that is a MeCard (kind of like a VCard, but even more basic).

I would anticipate a fairly basic QR code to be generated, but instead, it's a very detailed QR code probably difficult to read in low light. I see 16 orientation squares.

The number of characters in the value string is under 100.

Any one have any clues?

How to stop zoom-in and zoom-out animation on QR Code image

Encoding problem: Getting Japanese kanji for German umlaut

Hi, there seems to be a weird encoding problem: When I'm trying to create a QR code with German umlauts, I sometimes apparently get Japanese kanji inside the QR code.

Here's a list of what I tried to encode and it's result after decoding (w = works, f = fail):

        value="AäOöUüSß" w    AäOöUüSß
        value="AäOöUü"   f    Aﾃ､OﾃｶUﾃｼ
        value="Aä"       f    Aﾃ､
        value="ä"        f    ﾃ､ 
        value="äß"       w    äß
        value="ßä"       f    ﾃ淌､
        value="äßö"      f    ﾃ､ﾃ淌ｶ
        value="äßön"     f    ﾃ､ﾃ淌ｶn
        value="ßäön"     f    ﾃ淌､ﾃｶn
        value="ßän"      f    ﾃ淌､n
        value="äöß"      w    äöß

Interesting is the pair äß and ßä where the order seems to matter whether it works correctly or not.

Confusion in bgColor and fgColor

In the documentation (README.md) it says default value of bgColor is '#FFFFFF' and fgColor is '#000000'
but in the code link
I can see default props fgColor being set to white whereas bgColor being set to black.
So what exactly is fgColor and bgColor in the following image.

is fgColor=purple and bgColor=white or vice versa

QRCode can be amplified on an android phone。What to do about it?

the qrcode couldn't scan

when i use the component set size = 68 , i found the decode could't scan . it's wrong

react-packager has encountered an internal error, please check your terminal error output for more details

Unable to download JS bundle
com.facebook.react.devsupport.DebugServerException: The development server returned response error code: 500

                                                              URL: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
                                                              
                                                              Body:
                                                              {"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"}
                                                                  at com.facebook.react.devsupport.DevServerHelper$5.onResponse(DevServerHelper.java:323)
                                                                  at okhttp3.RealCall$AsyncCall.execute(RealCall.java:126)
                                                                  at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
                                                                  at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
                                                                  at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
                                                                  at java.lang.Thread.run(Thread.java:818)

Around qr space white and break layout

Display qr break layout:
1.screen layout

2.Break layout

3.Code

Error: EISDIR: illegal operation on a directory, read

Error: EISDIR: illegal operation on a directory, read
at Object.fs.readSync (fs.js:681:18)
at Object.readSync (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/graceful-fs/polyfills.js:138:28)
at tryReadSync (fs.js:542:20)
at Object.fs.readFileSync (fs.js:585:19)
at Module._readSourceCode (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/metro-bundler/build/node-haste/Module.js:205:29)
at Module._getCacheProps (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/metro-bundler/build/node-haste/Module.js:395:29)
at Module._readFromTransformCache (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/metro-bundler/build/node-haste/Module.js:345:29)
at Module.readCached (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/metro-bundler/build/node-haste/Module.js:332:19)
at ResolutionRequest.preprocessModule (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/metro-bundler/build/node-haste/DependencyGraph/ResolutionRequest.js:380:27)
at ResolutionRequest._preprocessPotentialDependencies (/Users/xxxx/workspace-js/ReactNative/HotCode/node_modules/metro-bundler/build/node-haste/DependencyGraph/ResolutionRequest.js:364:27)

Error: EISDIR: illegal operation on a directory, read

RN version 0.51

sava qrcode

hello dear, how to save the qrcode as a image

Issue building Building Haste Map

I am getting a build error,
that some react-native modules are duplicated. However, when I delete the react-native node module from the qrcode node_modules folder everything was fixed. I think you have to remove the react-native dependency!

Enhance! how to display image in the center of the QR code.

Thanks for your great work.
I have wrote a feature of display image in the center of the QR code.
Could I send a PR to you? Or would you accept the feature of mentioned above?

Can´t generate QRCode

Add the ability to rotate QR Code

Hey, I was wondering if you could add the ability to rotate the QR Code. thanks.

Failed to load bundle. Metro bundler has encountered an internal error

Version:
react-native-cli: 2.0.1
react-native: 0.53.0

How happened
1 install this library.

2 just add
import QRCode from 'react-native-qrcode';
to one of screens.

3 refresh the simulator and got this.

Failed propType error

Hi
I'm getting the following warning when adding QRCode:
"Warning: Failed propType: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"

I've simplified things to a minimum and if I remove the code there is no warning produced:

    <QRCode
        value={'0'}
        size={160}
        bgColor='#444444'
        fgColor='white'
    />

My versions are:

"react": "^15.1.0",
"react-native": "^0.27.2",
"react-native-qrcode": "^0.2.6"

Any ideas?
Thanks in advance

Failling to reload QRCode with big URLs

When dynamically resetting the value for the QRCode, it fails when the value string is too big.
Example:
First I have this:
https://www.foo.io/big-foo/#/send?to=XXXXXXXXXXXXXXXXXXXXXX
QRCode loads correctly.

Then I update the value to get something like
https://www.foo.io/big-foo/#/send?to=YYYYYYYYYYYYYYYYYYYYYY
QRCode doesn't reload.

Workaround: Clear value (set value to ' ' i.e.) and then set the new value.
It doesn't work if I simply replace the new value with the old one.

Making a QR Code with a VCard or .VCF format file

Does anyone know how to do it? I've set the formatted output as the value of the tag, but it doesn't seem to be recognized as a vcard file by readers.

BorderBottomWidth and BorderRightWidth on iOS QR code

This is just a very nit-picky aesthetic concern.. But is there a way to remove the thin border lines on the bottom and right sides of the QR code on iOS. Android's is borderless by default and I'd much rather prefer that look.

how to save the generated qr code as image

hai i tried your module it is helpful but i have a doubt that how to save the generated qr code as image

It's not working when the parameter is too long, qrcode can't be recognized

Help!

Difference between generated images

I am generating the QR code based on the user's id (mongoDB). If I try to generate a QR code by some website that does this, I get a different image from the one generated by react-native-qrcode, could anyone tell me why?

Seeing a weird issue with react 0.32.0

I'm rendering a simple QR Code (similar to the example):

 <QRCode
      value={"TEST"}
      size={200}
      bgColor='purple'
      fgColor='white'/>

And i'm getting this error:

Any suggestions?

QR code is not scannable

QR code is generating successfully but I am not able to scan it. I tried scanning the QR code using multiple apps but none could read it.
Any ideas why?

This is my code

<QRCode
          value={"Hello World"}
          size={200}
          bgColor='white'
          fgColor='black'/>

can generate QRCode but cant recognize

⬆️