Add SvgXml for web

[Sharcoux]

Signed-off-by: François BILLIOUD f.billioud@gmail.com

Summary

Explain the motivation for making this change: here are some points to help you:

• What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged

This solves this issue: #1279

• What is the feature? (if applicable)

It enables to have a common API for RN and RNWeb

• How did you implement the solution?

I used the code of View from react-native-web as a basis, parsed the svg provided as an xml prop, and finally created a svg tag with support for React-Native style, and handling all react-native props like onLayout, measure, or gesture events.

• What areas of the library does it impact?

It should not have any impact on the existing project. Though, react-native-web needed to be added within the optionalDependencies, but as it is called in a .web.ts file, it should not create any trouble.

Test Plan

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Currently in progress. But when done, You should just run:

npm run web

What's required for testing (prerequisites)?

npm i

What are the steps to reproduce (after prerequisites)?

Compatibility

OS	Implemented
iOS	✅
Android	✅
Web	✅

Checklist

• I have tested this on a device and a simulator
• I added documentation in README.md
• I updated the typed files (typescript)
• [probably not applicable] I added a test for the API in the __tests__ folder

[Cogneter]

Any chance to expedite the merging of this pull request? Without it, SvgUri is not working with Webpack right now.

[RustComet]

Also waiting for this to be merged so we can update a package.

Thanks so much for the PR @Sharcoux and all the work team

[Sharcoux]

For everyone reading this thread:

• maintainers: if you would like to merge this, please contact me so I can update the PR with the latest changes on our side. I'm not satisfied with the current implementation but I couldn't convince necolas from react-native team to expose the API that would be needed to do it properly.

• users: Here is the fork we use and maintain internally. Feel free to use it until this is merged: npm install @cantoo/rn-svg

[localjo]

@Sharcoux Thanks for the fork. When I try to use it as a drop in replacement, I get the following error:

Uncaught Error: Cannot find module 'react-native-web/dist/exports/StyleSheet/css'

And:

./node_modules/@cantoo/rn-svg/lib/module/SvgXml.web.js:10
Module not found: Can't resolve 'react-native-web/dist/exports/StyleSheet/css'

[Sharcoux]

@localjo feel free to open issues there. I'll have a look. But from what I see, you didn't install the peer dependencies as dependencies of your project:

  "peerDependencies": {
    "react": "*",
    "react-native": ">=0.50.0",
    "react-native-web": ">=0.14.0"
  },

Unless a change in recent version broke the fork. In this case, in the issue you will create, show me your versions of those 3 libs

[localjo]

@Sharcoux I don't think that's the issue. I have the following in my dependencies:

...
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-web": "~0.18.7"
...

[Sharcoux]

Maybe some inner implementation changed in react-native-web 18. I still encourage you to open an issue on the @cantoo/rn-svg project. It will be easier to follow up there.