Expensify/react-native-qrcode-svg

Not working on Android Pie

Closed this issue · 24 comments

RazaShehryar commented

Hi

I've been trying to use the library on Android pie but it doesn't seem to work. I can't change the color as well as background color of the QR Code and nothing is being generated as well.

Any suggestions?

naderhak commented

Hi i have the same issue as above
please if there any solution for that

thanks

RazaShehryar commented

Hi i have the same issue as above
please if there any solution for that

thanks

For some reason, the dependency react-native-svg is not working well if you've created your project using Expo. However, it it working fine with react-native cli.

More details to follow: software-mansion/react-native-svg#1115

  • 👍1
naderhak commented

so what should i do for the expo ?

RazaShehryar commented

so what should i do for the expo ?

I am not sure yet. A few versions ago, it was working fine. I guess you'll have to wait for Expo to resolve this issue. On the other hand, the good news is you can implement your own QR Code with custom logo using free API which is available online. I guess that's the only way around right now.

naderhak commented
vedev9 commented

Same problem on android 8 with expo sdk33.0.0.
Did you find any workaround?

kivanov82 commented

+1
Used to work in Expo but fails now

RazaShehryar commented

Same problem on android 8 with expo sdk33.0.0.
Did you find any workaround?

The issue is with the dependency library react-native-svg (with Expo and not with React Native CLI) and not react-native-qrcode-svg itself. I guess expo released their 35.0.0 a while ago on Android 8+. I haven't tried it yet though. Last time I used it with version 34.0.0 and faced the issued which I posted on software-mansion/react-native-svg#1115

At that time, I had couple of options. First one was to use paid version of rapidAPI which provides QR code services along with your logo. you just have to provide your data in the parameters of the url. Other option was to use free version of an online library (I forgot the name though), which simply generated a QR Code without any logo. I had to make it a custom component and place my image as logo at the center (position: 'absolute') of the QR Code.

robertobrogi commented

Hi all, i have the same problem.....
I work with expo 35.0.0 and i use the react-native-svg and work fine all but not qrcode....
there is something wron in the render where draw the svg...

if i put this code in QRcode render work fine the svg:

`

      <G x={50} y={0}>


          <Circle r={45}
                  cx={45}
                  cy={45}
                  fill={'#3CB5E8'}
                  />

      </G>
    </Svg>`

in ios is all perfect

robertobrogi commented

the problem is this:

<Rect width={size} height={size} fill={backgroundColor} />

if you remove work fine....

  • 👍6
awesomejerry commented

I've tried expo@35.0.0 with the following setup, and it's not working. So I do believe that the issue lies within react-native-svg's Rect.

   <View style={styles.container}>
      <Svg height='50%' width='50%' viewBox='0 0 100 100'>
        <Rect
          x='15'
          y='15'
          width='70'
          height='70'
          stroke='red'
          strokeWidth='2'
          fill='yellow'
        />
      </Svg>
    </View>

I'll leave this issue open for further information.

m3dwards commented

@robertobrogi @awesomejerry

As suggested, I removed the line <Rect width={size} height={size} fill={backgroundColor} /> and it works. Is there an issue open with react-native-svg for this? I couldn't find one.

robertobrogi commented

@maxwedwards hum i don't know.... i don't think so is a react-native-svg problem because i use Rect in another poit and work fine in android

m3dwards commented

@robertobrogi with expo?

robertobrogi commented

@maxwedwards yes expo 35.0.0

awesomejerry commented

@robertobrogi Can you show me the part where you use Rect? I have a whole new expo 35.0.0 project and only install react-native-svg, but it's not working with Rect though Circle works fine.

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-svg": "~9.9.2",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0"
  },
  "private": true
}
m3dwards commented

Rect is not working for me either.

Works:

<View>
  <Svg height="100" width="100">
    <Circle cx="50" cy="50" r="50" fill="pink" />
  </Svg>
</View>

Does not work:

<View>
  <Svg height="100" width="100">
    <Rect x='15' y='15' width='100' height='100' stroke='red' strokeWidth='2' fill='yellow' />
  </Svg>
</View>

In fact if I include the Rect the navigation header I have in my app doesn't show. I just get a blank page.

m3dwards commented

If I roll react-native-svg back to version 8.0.11, Rect starts working and so do my QR codes.

  • 👍2
m3dwards commented

As discussed on #1175 over on RN-SVG, if you fix the version to "9.9.2" (without the tilde) it works.

  • ❤️1
m3dwards commented

Also fixing react-native-svg at "9.9.5" works for me.

  • ❤️1
awesomejerry commented

@maxwedwards Thanks for the info! You really save this project!

  • ❤️1
anforu commented

@maxwedwards Thanks Sir ❤️
Works in android with :
"react-native-qrcode-svg": "^5.3.1",
"react-native-svg": "^8.0.11",

  • 👍4
  • ❤️5
  • 🚀1
Wellbrito29 commented

already fixed?