[ReactNative] react-native-qrcode-svg QR코드 깨지는 문제 해결 방법

깨진 QR코드

 

 

 

 

 

 

 

 

QR코드 발급하는 모듈로 react-native-qrcode-svg를 선택하여 프로젝트를 진행하는 과정에서 랜덤하게 QR코드 이미지가 깨지면서 보이는 현상이 발견되었다.

주로 안드로이드에서 발생하였고 iOS에서도 매우 드물게 발생하였다. 또 열심히 구글링 하는 도중 모듈에 문제가 있는 것을 발견하였고 해결책을 찾았다.

 

먼저 아래 경로로 이동한다.

/node_modules/react-native-qrcode-svg/src/index.js

 

index.js 파일에서 141번째 줄에 있는 소스코드에 strokeLinecap={'square'} 코드로 변경해준다.

<Path
  d={path}
  strokeLinecap={'square'}
  stroke={enableLinearGradient ? 'url(#grad)' : color}
  strokeWidth={cellSize}
/>

 

다음은 ./src/tranformMatrixIntoPath.js 파일로 이동하여 2번째 줄과 9번째 줄의 소스코드를 변경한다.

2번째 줄
const cellSize = size / matrix.length - 0.1   

9번째 줄
path += `M${cellSize * j + 6} ${cellSize / 2 + cellSize * i}`

 

변경한 후에 테스트 해본 결과 완벽하게 작동되지는 않았지만 QR코드 인식에는 문제가 없는 것으로 확인됐다.

 

 

https://github.com/awesomejerry/react-native-qrcode-svg/issues/108