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

Share this: Twitter

Facebook

Reddit

