-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SvgXml implementation for web #1431
SvgXml implementation for web #1431
Conversation
I hope release this quickly. I need SvgXml for react native web!! |
For those still needing this, you can try our package: @cantoo/rn-svg |
@WoLewicki @MatheusrdSantos @Sharcoux Should we merge this in? It seems risky long term to have a fork maintain this functionality. Thanks! |
@MattFoley I'm glad that the project revived. We can rebase our fork and make it ready for merge, that would be awesome. However, there is a concern you should know about: We had to wrap the svg inside a View. This has impacts when trying to style the SVG, especially with everything related to layout. We made a system that distribute the styles between the wrapper and the svg itself, but it will very likely introduce problems in some layouts. You'll find all the details here: necolas/react-native-web#1686 |
Hmm, I'll be honest I don't fully understand the debate on RNW, and would need more time to dive into the specifics. I also am using v14.1 of rn-svg, and don't think I can downgrade to 13. I started to rebase your fork up to v14.1 myself, but haven't finished yet, working through some BoB type errors. |
Ouch, I missed your comment, sorry. No, don't rebase this here. If you want to follow our approach, we need to push our current version of it. Many fixes have been made since this. |
Moreover, @MattFoley there should not be any rebase needed because we only need to add new files. Not edit existing ones. |
@Sharcoux I would love if you had a new version you could push up on 14.x! |
Hello, Thank you. |
c9fafe8
to
2f056ec
Compare
Hi, @bohdanprog this PR is just adding the web implementation for the SvgXml component, which is currently missing from the main package. The main difference is the need to import some hooks that are not exposed by the react-native-web api. Those hooks are important to emulate the native behavior, and therefore, make it possible to watch layout changes, measure the element and listen for touches by using the same native api. This PR (#1686) has the same implementation I did, but it's not rebased. Anyway it's a good complement to my explanation. |
…nto add-svgxml-web
…tract fetchText function
…nto add-svgxml-web
Hi @MatheusrdSantos, |
@bohdanprog The changes are good, thanks for the code improvements. There's just one change I didn't understand. Is there a reason to move the I think we could keep this dependency as optional because not all user may want to use the web implementation. |
Hi @MatheusrdSantos, We have made some updates to react-native-svg, and as far as I know, we can now display SvgXml, SvgCss, etc. |
I tried. SvgXml is undefined if I import I think that you want to copy the lines 29 to 47 from
But also the lines 141 to 146 and 178 to 188: export type {
JsxAST,
Middleware,
Styles,
UriProps,
UriState,
XmlAST,
XmlProps,
XmlState,
AstProps,
}; |
Hi @Sharcoux, |
@Sharcoux FYI, now it should work when you are using |
Closing as it has been implemented in https://github.com/software-mansion/react-native-svg/releases/tag/v15.5.0 |
Hi, @bohdanprog The first error is happening because the dependency
The second issue is that
|
@MatheusrdSantos Can you tell me please, how can I reproduce that issue? |
@bohdanprog I built a simple project to reproduce the issue. It's just importing the I'm using webpack because I need
src/App.js
webpack.config.js
src/index.js
src/index.html
.babelrc
If I try to run this project
If I manually add the dependency
|
Hi @MatheusrdSantos, IDK why but your simple repro isn't simple :D |
@bohdanprog I created this pull request: bohdanprog/RNSVG-XML-web#1. But the second issue remains. |
@MatheusrdSantos Hm as I see that issue exists when we use the webpack configuration, but IDK why. |
@bohdanprog yes, it's the same issue. The webpack issue is a matter of configuration that will impact all |
@MatheusrdSantos I added the correct webpack config to the example app, can you check that? |
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
'SvgXml' for web #1279
Attempted import error: 'SvgXml' is not exported from 'react-native-svg'. #1236
What is the feature? (if applicable)
This PR contains the implementation of SvgXml for web. This web implementation has exactly the same usage as the native implementation.
How did you implement the solution?
The web implementation relies on unstable_createElement and View from react-native-web. So, basically I used
unstable_createElement
to create an<svg>
element with the props that comes from the XML string and set theinnerHTML
from the<svg>
to be the XML content.In order to accept react-native props (the same as SvgXml native implementation), I used the
<View>
to wrap the<svg>
and simulate the same behavior.What areas of the library does it impact?
None. It just brings a new supported component for web.
Test Plan
You can check a working demo here: https://codesandbox.io/s/keen-platform-z40rg
Compatibility
Checklist