How to generate QR Code with React native

React native

create QRcode is most of the general topic that everyone needs to know while still building an app so on React native has a package that using for generating QRcode name react-native-qrcode-svg this package is easy to use and already updated

installation

first your need to install React Native SVG

next React native SVG

cd ios ; pod install ; cd ..

then we install react native qrcode svg

yarn add react-native-qrcode-svg

Basic usage

first import react native svg package

import QRCode from 'react-native-qrcode-svg';

next, create a simple component

<QRCode value={url} />

then we try to create TextInput for change QRCode

<TextInput
    label='fill URL'
    value={url}
    onChangeText={url => seturl(url)} />
</View>

next, create state

const [url, seturl] = useState('www.kriss.io')

now let’s try type any text

insert color to QR code

now we try change QRcode color

<QRCode
   value={url}
   color={'red'}
   backgroundColor={'orange'}
 />

let see the result below

Add logo

we want to make QRCode for install App and want to let the user know different of destination

<View style={styles.qrcode}>
  <QRCode
    value={url}
    logo={require('./android.png')}
    logoSize={60}
    logoBackgroundColor='transparent'
  />
</View>
<View style={styles.qrcode}>
  <QRCode
    value={url}
    logo={require('./apple.png')}
    logoSize={60}
    logoBackgroundColor='transparent'
  />
</View>

now your can see QRCode with logo

conclusion

create QRcode in React native is pretty easy but have more trick that I’ve written on the next article

krissanawat

React Native developer from beautiful Chiangmai, love Americano and travel so much

https://kriss.io

Leave a Reply

Your email address will not be published. Required fields are marked *