How to Generate QR Code in React Native

Well, there are some third-party libraries to scan QR codes through your React Native mobile app but what about generating QR codes in your app?

I went through some of the react native libraries when I got a requirement from a client to generate a QR code inside the mobile app. Even though the popular one is react native qrcode svg, it seems like the library is no more maintained.

After research, I ended up using the library react qr code. This works on both react and react native. It is dependent on another library react native svg.

First of all, install react native svg using the command given below.

yarn add react-native-svg

Then run the pod install command for iOS devices.

cd ios && pod install

Then install react qr code using the following command.

yarn add react-qr-code

That’s the installation part. Now you can use the library as given below.

import React from 'react';
import {StyleSheet, View} from 'react-native';
import QRCode from 'react-qr-code';

const App = () => {
  return (
    <View style={styles.container}>
      <QRCode size={200} value="https://codingwithrashid.com" />
    </View>
  );
};

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

export default App;

Following is the output.

That’s how you generate qr code easily in react native.