feat: add gradient option

exzos28 · May 10, 2024 · f0820b2 · f0820b2
1 parent 7783fd8
commit f0820b2
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -29,61 +29,90 @@ import React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
 import { QrCodeSvg } from 'react-native-qr-svg';
+import { plainRenderer } from '../../src/renderers';
+
+const SIZE = 170;
+const CONTENT = 'Hello world!';
 
 export default function App() {
  return (
- <View style={styles.container}>
- <View style={styles.firstQr}>
- <QrCodeSvg
- value="Hello world!"
- frameSize={200}
- contentCells={5}
- content={
- <View>
- <Text>👋</Text>
- </View>
- }
- contentStyle={styles.box}
- />
- </View>
- <View style={styles.secondQr}>
- <QrCodeSvg
- value="Hello world!"
- frameSize={200}
- contentCells={5}
- content={
- <View>
- <Text>💻</Text>
- </View>
- }
- dotColor="#ffffff"
- backgroundColor="#000000"
- contentStyle={styles.box}
- />
+ <View style={styles.root}>
+ <View style={styles.content}>
+ <View style={styles.qr}>
+ <QrCodeSvg
+ value={CONTENT}
+ frameSize={SIZE}
+ contentCells={5}
+ content={
+ <View>
+ <Text style={styles.icon}>👋</Text>
+ </View>
+ }
+ contentStyle={styles.box}
+ />
+ </View>
+ <View style={styles.qr}>
+ <QrCodeSvg
+ gradientColors={['#FF0000', '#00FF00']}
+ value={CONTENT}
+ frameSize={SIZE}
+ />
+ </View>
+ <View style={[styles.qr, styles.secondQr]}>
+ <QrCodeSvg
+ value={CONTENT}
+ frameSize={SIZE}
+ contentCells={5}
+ content={
+ <View>
+ <Text style={styles.icon}>💻</Text>
+ </View>
+ }
+ dotColor="#ffffff"
+ backgroundColor="#000000"
+ contentStyle={styles.box}
+ />
+ </View>
+ <View style={styles.qr}>
+ <QrCodeSvg
+ renderer={plainRenderer}
+ value={CONTENT}
+ frameSize={SIZE}
+ />
+ </View>
  </View>
  </View>
  );
 }
 
 const styles = StyleSheet.create({
- container: {
+ root: {
  flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ content: {
  flexDirection: 'row',
+ flexWrap: 'wrap',
  alignItems: 'center',
  justifyContent: 'center',
  },
  box: {
  alignItems: 'center',
  justifyContent: 'center',
  },
- firstQr: {
- marginRight: 15,
+ icon: {
+ fontSize: 20,
  },
- secondQr: {
+ qr: {
  padding: 15,
+ },
+ secondQr: {
  backgroundColor: '#000000',
  },
 });
+
+
 ```
 
 ## Contributing 🤝

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,54 +4,72 @@ import { StyleSheet, View, Text } from 'react-native';
 import { QrCodeSvg } from 'react-native-qr-svg';
 import { plainRenderer } from '../../src/renderers';
 
+const SIZE = 170;
+const CONTENT = 'Hello world!';
+
 export default function App() {
  return (
- <View style={styles.container}>
- <View style={[styles.qr, styles.firstQr]}>
- <QrCodeSvg
- value="Hello world!"
- frameSize={200}
- contentCells={5}
- content={
- <View>
- <Text style={styles.icon}>👋</Text>
- </View>
- }
- contentStyle={styles.box}
- />
- </View>
- <View style={[styles.qr, styles.secondQr]}>
- <QrCodeSvg
- value="Hello world!"
- frameSize={200}
- contentCells={5}
- content={
- <View>
- <Text style={styles.icon}>💻</Text>
- </View>
- }
- dotColor="#ffffff"
- backgroundColor="#000000"
- contentStyle={styles.box}
- />
- </View>
- <View style={styles.qr}>
- <QrCodeSvg
- renderer={plainRenderer}
- value="Hello world!"
- frameSize={200}
- />
+ <View style={styles.root}>
+ <View style={styles.content}>
+ <View style={styles.qr}>
+ <QrCodeSvg
+ value={CONTENT}
+ frameSize={SIZE}
+ contentCells={5}
+ content={
+ <View>
+ <Text style={styles.icon}>👋</Text>
+ </View>
+ }
+ contentStyle={styles.box}
+ />
+ </View>
+ <View style={styles.qr}>
+ <QrCodeSvg
+ gradientColors={['#0800ff', '#ff0000']}
+ value={CONTENT}
+ frameSize={SIZE}
+ />
+ </View>
+ <View style={[styles.qr, styles.secondQr]}>
+ <QrCodeSvg
+ value={CONTENT}
+ frameSize={SIZE}
+ contentCells={5}
+ content={
+ <View>
+ <Text style={styles.icon}>💻</Text>
+ </View>
+ }
+ dotColor="#ffffff"
+ backgroundColor="#000000"
+ contentStyle={styles.box}
+ />
+ </View>
+ <View style={styles.qr}>
+ <QrCodeSvg
+ renderer={plainRenderer}
+ value={CONTENT}
+ frameSize={SIZE}
+ />
+ </View>
  </View>
  </View>
  );
 }
 
 const styles = StyleSheet.create({
- container: {
+ root: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  },
+ content: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
  box: {
  alignItems: 'center',
  justifyContent: 'center',
@@ -62,7 +80,6 @@ const styles = StyleSheet.create({
  qr: {
  padding: 15,
  },
- firstQr: {},
  secondQr: {
  backgroundColor: '#000000',
  },

diff --git a/screenshot/1.png b/screenshot/1.png