Turn Deep Links into QR Codes in an Expo App with react-native-qrcode-svg

npx expo install react-native-qrcode-svg react-native-svg

npm i -S react-native-svg react-native-qrcode-svg

yarn add react-native-svg react-native-qrcode-svg

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import QRCode from 'react-native-qrcode-svg'; // 라이브러리에서 QRCode 컴포넌트 가져오기
 
interface MyQRCodeProps {
  value: string; // QR 코드로 만들 값 (URL 등)
  size?: number;  // QR 코드 크기 (선택적)
}
 
const MyQRCode: React.FC<MyQRCodeProps> = ({ value, size = 128 }) => {
  if (!value) {
    // value 값이 없을 경우 에러 처리 또는 대체 UI 표시
    return (
      <View style={styles.container}>
        <Text>QR 코드를 생성할 값이 없습니다.</Text>
      </View>
    );
  }
 
  return (
    <View style={styles.container}>
      <QRCode
        value={value} // QR 코드로 변환할 문자열 전달
        size={size}   // QR 코드의 가로, 세로 크기 (기본값 128)
        // --- 추가 옵션들 ---
        // color="black" // QR 코드 색상 (기본값 black)
        // backgroundColor="white" // 배경색 (기본값 white)
        // quietZone={10} // QR 코드 주변의 여백 크기
      />
      <Text style={styles.valueText}>데이터: {value}</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  valueText: {
    marginTop: 10,
    fontSize: 12,
    color: '#666',
  },
});
 
export default MyQRCode;

import React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
import MyQRCode from '../components/MyQRCode'; // 위에서 만든 QR 코드 컴포넌트
 
export default function GenerateQRScreen() {
  // 예시 딥링크 URL (실제 앱 스킴과 경로에 맞게 수정 필요)
  const deepLinkUrl = 'myawesomeapp://products/detail?productId=777&source=qrcode';
 
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <Text style={styles.title}>상품 상세 페이지 딥링크 QR 코드</Text>
        <Text style={styles.description}>
          아래 QR 코드를 스캔하면 앱의 상품 상세 페이지(ID: 777)로 이동합니다.
        </Text>
 
        {/* MyQRCode 컴포넌트에 딥링크 URL 전달 */}
        <MyQRCode value={deepLinkUrl} size={200} />
 
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 15,
    textAlign: 'center',
  },
  description: {
    fontSize: 14,
    color: '#555',
    textAlign: 'center',
    marginBottom: 30,
  },
});

// 로고를 포함한 예시
import logoImage from '../assets/my_app_logo.png'; // 로고 이미지 import
 
// ... 컴포넌트 내부 ...
<QRCode
  value={deepLinkUrl}
  size={250}
  logo={logoImage} // 로고 이미지 전달
  logoSize={40}
  logoBackgroundColor="transparent"
  ecl="H" // 오류 복원 수준 높게 설정
/>
// ...