react-native-qrcode-svg 6.3.2 → 6.3.12

package/Example/metro.config.js

@@ -0,0 +1,47 @@
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const path = require('path');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const escape = require('escape-string-regexp');
+const pack = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+const modules = [...Object.keys(pack.peerDependencies), 'react-native-macos'];
+
+const config = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we exclude them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blockList: exclusionList(
+      modules.map(
+        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+      ),
+      new RegExp(`${path.join(__dirname, 'macos').replace(/[/\\]+/g, '/')}.*`),
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+      },
+    }),
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/Example/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "Example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "web": "webpack serve",
+    "macos": "react-native run-macos",
+    "lint": "eslint .",
+    "prettier": "prettier --write ./src/**/*.{tsx,ts}",
+    "start": "react-native start",
+    "test": "jest",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@svgr/webpack": "^8.1.0",
+    "file-loader": "^6.2.0",
+    "react": "18.2.0",
+    "react-native": "^0.73.6",
+    "react-native-macos": "^0.73.0-0",
+    "react-native-qrcode-svg": "link:../",
+    "react-native-svg": "^15.5.0",
+    "react-native-web": "^0.19.10",
+    "webpack": "^5.91.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.25.4",
+    "@react-native/babel-preset": "^0.75.0-main",
+    "@react-native/eslint-config": "0.73.2",
+    "@react-native/metro-config": "0.73.5",
+    "@react-native/typescript-config": "0.73.1",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.19.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jest": "^29.6.3",
+    "prettier": "^3.2.5",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "18.2.0",
+    "typescript": "5.0.4",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/Example/src/App.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {SafeAreaView, ScrollView, Text} from 'react-native';
+import SVG from './assets/ruby.svg';
+import Description from './components/Description';
+import QRCode from 'react-native-qrcode-svg';
+import styles from './styles';
+
+const rubyUrl = 'https://www.ruby-lang.org/';
+const googleUrl = 'https://www.google.com/';
+const qrCodeSize = 200;
+const logoSize = 100;
+
+const defaultQRCode = (
+  <Description text="Default QR code">
+    <QRCode />
+  </Description>
+);
+
+const colorfulQRCODe = (
+  <Description text="QR code with changed colors">
+    <QRCode
+      value="Some colorful qr code"
+      size={qrCodeSize}
+      color="darkblue"
+      backgroundColor="lightblue"
+    />
+  </Description>
+);
+
+const urlPngQRCode = (
+  <Description text="QR code with PNG from url avatar">
+    <QRCode
+      value={googleUrl}
+      size={qrCodeSize}
+      logo="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-512.png"
+      logoSize={logoSize}
+      logoBorderRadius={200}
+    />
+  </Description>
+);
+
+const localPngQRCode = (
+  <Description text="QR code with local PNG avatar">
+    <QRCode
+      value={googleUrl}
+      size={qrCodeSize}
+      logo={require('./assets/google.png')}
+      logoSize={logoSize}
+    />
+  </Description>
+);
+
+const localPngBackgroundColorQRCode = (
+  <Description text="QR code with local PNG with background color avatar">
+    <QRCode
+      value={googleUrl}
+      size={qrCodeSize}
+      logo={require('./assets/google.png')}
+      logoBackgroundColor="pink"
+      logoSize={logoSize}
+    />
+  </Description>
+);
+
+const urlSvgQRCode = (
+  <Description text="QR code with SVG from url avatar">
+    <QRCode
+      value={rubyUrl}
+      size={qrCodeSize}
+      logoSVG="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg"
+      logoSize={logoSize}
+    />
+  </Description>
+);
+
+const xml = `
+  <svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M20,100l74-5l6-75zM61,35l37-2l-29-24z' fill='#b11' fill-rule='evenodd'/>
+    <path d='M21,100l74-5l-47-4zM98,33c4-12,5-29-14-33l-15,9l29,24z' fill='#811' fill-rule='evenodd'/>
+    <path d='M7,67l14,33l11-38z' fill='#d44' fill-rule='evenodd'/>
+    <path d='M29,61l42,13l-10-42zM56,0h28l-16,10zM1,51l-1,29l7-13z' fill='#c22' fill-rule='evenodd'/>
+    <path d='M32,61l39,13c-14,13-30,24-50,26z' fill='#a00' fill-rule='evenodd'/>
+    <path d='M61,35l10,39l17-23zM32,61l16,30c9-5,16-11,23-17l-39-13z' fill='#900' fill-rule='evenodd'/>
+    <path d='M61,35l27,17l10-20l-37,3z' fill='#800' fill-rule='evenodd'/>
+    <path d='M71,74l23,21l-6-44zM0,80c1,19,15,20,21,20l-14-33l-7,13zM7,67l-2,26c4,6,9,7,15,6c-4-11-13-32-13-32zM69,9l30,4c-1-7-6-11-15-13l-15,9z' fill='#911' fill-rule='evenodd'/>
+    <path d='M1,51l6,16l25-5l29-27l8-26l-13-9l-22,8c-6,7-20,19-20,19c-1,1-9,16-13,24z' fill='#ebb' fill-rule='evenodd'/>
+    <path d='M21,21c15-14,34-23,42-16c7,8-1,26-16,40c-14,15-33,24-41,17c-7-7,1-26,15-41z' fill='#b11' fill-rule='evenodd'/>
+  </svg>
+`;
+
+const stringSvgQRCode = (
+  <Description text="QR code with raw SVG (string) avatar">
+    <QRCode
+      value={rubyUrl}
+      size={qrCodeSize}
+      logoSVG={xml}
+      logoSize={logoSize}
+    />
+  </Description>
+);
+
+const localSvgQRCode = (
+  <Description text="QR code with local SVG avatar">
+    <QRCode
+      value={rubyUrl}
+      size={qrCodeSize}
+      logoSVG={SVG}
+      logoSize={logoSize}
+    />
+  </Description>
+);
+
+const App = () => {
+  return (
+    <SafeAreaView>
+      <ScrollView contentContainerStyle={styles.scrollViewContainer}>
+        <Text style={styles.title}>Example usages of QRCode component</Text>
+        {defaultQRCode}
+        {colorfulQRCODe}
+        {urlPngQRCode}
+        {localPngQRCode}
+        {localPngBackgroundColorQRCode}
+        {urlSvgQRCode}
+        {stringSvgQRCode}
+        {localSvgQRCode}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+export default App;

package/Example/src/assets/ruby.svg

@@ -0,0 +1,12 @@
+<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+<path d='M20,100l74-5l6-75zM61,35l37-2l-29-24z' fill='#b11' fill-rule='evenodd'/>
+<path d='M21,100l74-5l-47-4zM98,33c4-12,5-29-14-33l-15,9l29,24z' fill='#811' fill-rule='evenodd'/>
+<path d='M7,67l14,33l11-38z' fill='#d44' fill-rule='evenodd'/>
+<path d='M29,61l42,13l-10-42zM56,0h28l-16,10zM1,51l-1,29l7-13z' fill='#c22' fill-rule='evenodd'/>
+<path d='M32,61l39,13c-14,13-30,24-50,26z' fill='#a00' fill-rule='evenodd'/>
+<path d='M61,35l10,39l17-23zM32,61l16,30c9-5,16-11,23-17l-39-13z' fill='#900' fill-rule='evenodd'/>
+<path d='M61,35l27,17l10-20l-37,3z' fill='#800' fill-rule='evenodd'/>
+<path d='M71,74l23,21l-6-44zM0,80c1,19,15,20,21,20l-14-33l-7,13zM7,67l-2,26c4,6,9,7,15,6c-4-11-13-32-13-32zM69,9l30,4c-1-7-6-11-15-13l-15,9z' fill='#911' fill-rule='evenodd'/>
+<path d='M1,51l6,16l25-5l29-27l8-26l-13-9l-22,8c-6,7-20,19-20,19c-1,1-9,16-13,24z' fill='#ebb' fill-rule='evenodd'/>
+<path d='M21,21c15-14,34-23,42-16c7,8-1,26-16,40c-14,15-33,24-41,17c-7-7,1-26,15-41z' fill='#b11' fill-rule='evenodd'/>
+</svg>

package/Example/src/components/Description.tsx

@@ -0,0 +1,16 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+import styles from '../styles';
+
+type DescriptionProps = {
+  text: string;
+  children: React.ReactNode;
+};
+
+const Description = ({text, children}: DescriptionProps) => (
+  <View style={styles.scrollViewElement}>
+    <Text style={styles.text}>{text}</Text>
+    {children}
+  </View>
+);
+export default Description;

package/Example/src/styles.ts

@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  title: {
+    marginTop: 6,
+    fontSize: 36,
+    fontWeight: 'bold',
+  },
+  text: {
+    fontSize: 24,
+  },
+  scrollViewElement: {
+    alignItems: 'center',
+    margin: '1%',
+    paddingVertical: 12,
+  },
+  scrollViewContainer: {
+    alignItems: 'center',
+  },
+});
+export default styles;

package/Example/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "include": ["src/**/*", "global.d.ts"],
+  "esModuleInterop": true,
+  "compilerOptions": {
+    "jsx": "react",
+    "skipLibCheck": true
+  }
+}

package/Example/webpack.config.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const path = require('path');
+const fromRoot = _ => path.resolve(__dirname, _);
+
+module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  entry: fromRoot('index.js'),
+  output: {
+    path: fromRoot('dist'),
+    filename: 'bundle.web.js',
+  },
+  devServer: {
+    static: {directory: fromRoot('dist')},
+    devMiddleware: {publicPath: '/'},
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|tsx?)$/,
+        use: {loader: 'babel-loader'},
+        include: [
+          fromRoot('index.js'),
+          fromRoot('src/'),
+          fromRoot('node_modules/react-native-qrcode-svg'),
+        ],
+      },
+      {
+        test: /\.(gif|jpe?g|png)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {esModule: false},
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+    ],
+  },
+  resolve: {
+    symlinks: false,
+    alias: {
+      'react-native$': 'react-native-web',
+      react: path.resolve('./node_modules/react'),
+    },
+    extensions: [
+      '.web.ts',
+      '.ts',
+      '.web.tsx',
+      '.tsx',
+      '.web.js',
+      '.js',
+      '.web.jsx',
+      '.jsx',
+    ],
+  },
+};