Android Svg Support #652
Merged
Android Svg Support #652
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Saadnajmi
requested changes
Apr 1, 2021
Comment on lines
+11
to
+39
| module.exports = (async () => { | ||
| const { | ||
| resolver: {sourceExts, assetExts}, | ||
| } = await getDefaultConfig(); | ||
| return { | ||
| watchFolders: getWatchFolders(), | ||
| resolver: { | ||
| // prettier-ignore | ||
| assetExts: [assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'], | ||
| sourceExts: [...sourceExts, 'svg'], | ||
| }, | ||
| // Metro doesn't currently handle assets coming from hoisted packages within a monorepo. This is the current workaround people use | ||
| // In this case this is to ensure that the image assets that are part of logbox get loaded correctly. | ||
| server: { | ||
| enhanceMiddleware: (middleware) => { | ||
| return (req, res, next) => { | ||
| if (req.url.startsWith('/fluent-tester/src')) { | ||
| req.url = req.url.replace( | ||
| '/fluent-tester/src', | ||
| '/assets/../fluent-tester/src', | ||
| ); | ||
| } else if (req.url.startsWith('/node_modules/react-native')) { | ||
| req.url = req.url.replace( | ||
| '/node_modules/react-native', | ||
| '/assets/../../node_modules/react-native', | ||
| ); | ||
| } | ||
| return middleware(req, res, next); | ||
| }; |
Collaborator
There was a problem hiding this comment.
@amgleitman Any chance needing this might be the reason we couldn't get it working for iOS/macOS?
Saadnajmi
reviewed
Apr 1, 2021
yarn.lock
Outdated
Comment on lines
13979
to
13985
| react-native-svg@^12.1.0: | ||
| version "12.1.0" | ||
| resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d" | ||
| integrity sha512-1g9qBRci7man8QsHoXn6tP3DhCDiypGgc6+AOWq+Sy+PmP6yiyf8VmvKuoqrPam/tf5x+ZaBT2KI0gl7bptZ7w== | ||
| dependencies: | ||
| css-select "^2.1.0" | ||
| css-tree "^1.0.0-alpha.39" |
Collaborator
There was a problem hiding this comment.
Wait this wasn't already in the lock? But we use it on iOS and I think windows? 🤔
Contributor
Author
There was a problem hiding this comment.
Okay, so I added react-native-svg to apps/android; as the dependency from fluent-tester doesn't get linked otherwise. So, this added the v12.1.0 entry to yarn.lock; I have now upgraded react-native-svg in apps/fluent-tester and apps/win32 from where 11.0.1 is hoisted, and tested it to be working after the upgrade in android, win32 and ios (I guess Podfile.lock also gets updated but not adding that change here )
Saadnajmi
approved these changes
Apr 7, 2021
chiuam
pushed a commit
to chiuam/fluentui-react-native
that referenced
this pull request
Apr 28, 2021
* added svg, transformer to android * base64 svgs do not load, font files do not link * Change files * bump package versions manually * Change files * upgrade react-native-svg * Change files * revert 'bump package versions manually' * Change files
HeyImChris
pushed a commit
that referenced
this pull request
May 11, 2021
* prototype * style gradient * componentize shimmer * prototype * style gradient * Android theme (#613) * initial android theme * mapped a lot of colors, updated readme, added to fluent-tester-app * Change files * removed unneccessary dependencies * added android typography * updated versioning, removed apple specific changes * making android-theme default for the platform * update fluent-tester dependency version... * resolving comments... * resolving more comments... Co-authored-by: Tushar Masane <[email protected]> * 📦 applying package updates ***NO_CI*** * Add repository link for @fluentui/react-native (#649) * Change files * Remove change file * Add repository link * Change files * Add a nil check to Avatar image property (#650) * Add a nil check to AvatarData image * Change files * Update Radio Button focus border style to be WCAG 2.1 compliant (#653) * Change files * Remove change file * Update radio button focus border style * Change files * Add the rainbow gradient border image test case to experimental avatar (#654) * Add the rainbow gradient test case * Change files * Add apple theme static libraries to NuGet package (#655) * Add apple theme static libraries to NuGet, add NuGet Publish PR job * Fix path in nuspec * Comment out NugetPublish PR Job * Fix npm publish pipeline (hopefully) (#656) * fix typos in android-theme * Change files * 📦 applying package updates ***NO_CI*** * Android Svg Support (#652) * added svg, transformer to android * base64 svgs do not load, font files do not link * Change files * bump package versions manually * Change files * upgrade react-native-svg * Change files * revert 'bump package versions manually' * Change files * 📦 applying package updates ***NO_CI*** * Fix typo in nuspec (#659) * Fix typo in nuspec * Comment out NuGet Publish again * Add Icon support for macOS (#645) * Add macOS support * Add link to issue regarding direct SVG imports * Replace react-native-svg with @microsoft/react-native-svg-desktop * Use react-native-svg now that it supports macOS * Upgrade react-native-svg to 12.1.1-0 everywhere * Update macos podfile * Change files * 📦 applying package updates ***NO_CI*** * chore: `rnx-start` is deprecated (#660) `rnx-start` is being removed because it currently does not provide any value over vanilla `react-native start`. See microsoft/rnx-kit#139 * Fix more typos in the nuspec (#661) * Fix typos, uncomment pipeline * comment out pipeline again * Revamp Android ThemePicker (#664) * updated themepicker for android * Change files * add correct picker... * ignore rn-picker depcheck... * separated android themepicker... * added dropdown styles... * add types for dropdown.. * Add a Contributing markdown file (#555) * Initial Commit * Restructuring * Rewrite Slots summary * Update Guide based on feedback * More fixes * Update from PR feedback * Add RNSVG dependency to Icon and update RNSVG version throughout (#668) * Add button icon tests specific to win32 * Change files * Change files * Add dependency to rnsvg * Add RNSVG dependency to ios and mac * Remove rnsvg dep from ios and macos due to failed depcheck * Add rnsvg to ios and macos againt but also add to ignores for depcheck * Add explicit react-native-svg dependency to FURN Icon (#666) * Add direct dependency on RNSVG in FURN Icon * Change files * Update yarn.lock with react-native-svg 12.1.1 * componentize shimmer * move shimmer to experimental * create slots for shapes * revamp shimmer slots * implement shimmerElement to group sub-elements * Change files * add shimmer to android and accessibility support * use useRef hook and union types * remove rect & circle slots * documentation Co-authored-by: Tushar Anil Masane <[email protected]> Co-authored-by: Tushar Masane <[email protected]> Co-authored-by: UI-Fabric-RN-Bot <[email protected]> Co-authored-by: Krystal Siler <[email protected]> Co-authored-by: Saad Najmi <[email protected]> Co-authored-by: Adam Gleitman <[email protected]> Co-authored-by: Tommy Nguyen <[email protected]> Co-authored-by: warren-ms <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Platforms Impacted
Description of changes
This change adds svg support to Android. The react-native-svg package is linked to the fluent-tester app (android) and the transformer is included in the metro config for loading the image assets.
Verification
Pull request checklist
This PR has considered (when applicable):