Skip to content
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

Add macOS support #1494

Merged
merged 8 commits into from
Mar 30, 2021
Merged

Conversation

amgleitman
Copy link
Collaborator

@amgleitman amgleitman commented Nov 26, 2020

Summary

This adds macOS support to react-native-svg.

A good amount of code for react-native-svg iOS, such as constructing paths, is already platform-agnostic, but there were a few big things that needed to be resolved, mostly related to type differences between macOS and iOS (for example, importing <UIKIt/UIKit.h> and differences between NSView/UIView, NSColor/UIColor, etc.), as well as a couple of iOS concepts that don't appear to have direct macOS equivalent (like -[UIView tintColor], which we use to determine what "currentColor" is).

Most of the heavy lifting in resolving platform differences lies in RNSVGUIKit.h, which is a similar strategy to what react-native-macos does with RCTUIKit.h (found here).

Test Plan

To verify that nothing broke, I created a test app and confirmed that the example SVGs shown in this repo's README render exactly the same.

Screenshot Comparison

macOS iOS
Screen Shot 2020-11-30 at 2 19 38 PM Screen Shot 2020-11-30 at 2 32 06 PM
Screen Shot 2020-11-30 at 2 28 50 PM Screen Shot 2020-11-30 at 2 32 13 PM
Screen Shot 2020-11-30 at 2 29 42 PM Screen Shot 2020-11-30 at 2 32 58 PM
Screen Shot 2020-11-30 at 2 30 33 PM Screen Shot 2020-11-30 at 2 33 04 PM
Screen Shot 2020-11-30 at 2 30 41 PM Screen Shot 2020-11-30 at 2 33 09 PM

Compatibility

OS Implemented
iOS N/A
Android N/A
macOS

Checklist

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

apple/RNSVGUIKit.h Show resolved Hide resolved
apple/RNSVGUIKit.h Show resolved Hide resolved
apple/RNSVGUIKit.h Show resolved Hide resolved
.eslintignore Show resolved Hide resolved
RNSVG.podspec Show resolved Hide resolved
apple/RNSVGUIKit.h Show resolved Hide resolved
apple/Elements/RNSVGSvgView.m Outdated Show resolved Hide resolved
apple/RNSVGUIKit.macos.m Outdated Show resolved Hide resolved
apple/Text/RNSVGTopAlignedLabel.ios.m Outdated Show resolved Hide resolved
@amgleitman amgleitman marked this pull request as ready for review December 1, 2020 21:39
@jacobp100
Copy link

@amgleitman Thank you so much for working on this! Looks like a huge undertaking. It's been one of the things holding me back from using rn-macos and this will help a lot

@amgleitman
Copy link
Collaborator Author

@msand, can you take a look at this?

amgleitman added a commit to microsoft/react-native-svg-desktop that referenced this pull request Jan 26, 2021
@jacobp100
Copy link

@amgleitman Do you have a published version of https://github.com/microsoft/react-native-svg-macos?

@amgleitman
Copy link
Collaborator Author

@amgleitman Do you have a published version of https://github.com/microsoft/react-native-svg-macos?

@jacobp100 Not yet, but we're working on it.

@jacobp100
Copy link

Ok. Thanks for your work on this! It'll be really helpful

@msand
Copy link
Collaborator

msand commented Feb 13, 2021

This is really impressive work! I hope to have some time and energy to dedicate to open source soon, becoming a father this spring, and our startup is growing quickly atm...

@HeyImChris
Copy link

This is really impressive work! I hope to have some time and energy to dedicate to open source soon, becoming a father this spring, and our startup is growing quickly atm...

To give us some flexibility with contributing to this repo, do you think it'd be possible to give @amgleitman write permissions so he can merge in the Mac support change? Either way, congrats on the startup and soon-to-be fathering!

@vincentjames501
Copy link

This is awesome! @msand do you have any thoughts to @HeyImChris 's question?

@msand
Copy link
Collaborator

msand commented Mar 17, 2021

I just added @amgleitman to the repository with write rights. Think I'll announce in a separate issue that this repo is looking for more maintainers and add a link to the readme. Thanks for any help in this!

@amgleitman
Copy link
Collaborator Author

Thanks @msand! Can I assume that I have your blessing to merge this PR and help maintain this repo in the future?

@amgleitman amgleitman merged commit 9b2eb6a into software-mansion:develop Mar 30, 2021
@vomchik
Copy link

vomchik commented Jun 28, 2021

@amgleitman do you have the source code of the SVG content(all you show on screenshots)? I want to try to write tests for this library.

@amgleitman
Copy link
Collaborator Author

@amgleitman do you have the source code of the SVG content(all you show on screenshots)? I want to try to write tests for this library.

I took the examples from the README file.

@vomchik
Copy link

vomchik commented Jun 29, 2021

@amgleitman do you have the source code of the SVG content(all you show on screenshots)? I want to try to write tests for this library.

I took the examples from the README file.

i see :) thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants