mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
09a9d2e86f
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect --> # Summary Closes #1897 In our project, we encountered a problem with SVGs that include RGB/RGBA color values in percentage format. To address this, I've decided to handle it within the react-native-svg library. Also, I found an open issue for this - https://github.com/software-mansion/react-native-svg/issues/1897 `percentTo255`: Converts a percentage string (e.g., 50%) to its corresponding integer value on a scale of 0-255. This is done by parsing the percentage as a float and multiplying by 2.55 (since 100% equals 255 in RGB). `parseAlpha`: Converts the alpha component to a float between 0 and 1. If the alpha is a percentage, it divides by 100; otherwise, it parses it as a float directly. `parsePercentageRGBColor`: This function takes a color string as input and attempts to match it against the RGB_PATTERN or RGBA_PATTERN. If a match is found, it extracts the red, green, blue, and optional alpha components. It then converts these components from their percentage form to the 0-255 range (or normalized float for alpha). The function returns the color in standard rgb(r, g, b) or rgba(r, g, b, a) format. If the input color string does not match the patterns, it logs a warning and returns undefined `transformColorToPercentage`: This function checks if the given color value (which can be of type ColorValue from React Native) is a string matching the percentage-based RGB or RGBA patterns. It removes any whitespace from the color string and tests it against the patterns. If the color matches, it converts it using `parsePercentageRGBColor`. If not, it returns the original color value unchanged. <img width="240" alt="Screenshot 2024-07-23 at 18 45 25" src="https://github.com/user-attachments/assets/7ba0dcb7-1daa-4f84-9771-6884de76649a"> ## Test Plan Run test-examples with Test2363 ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist <!-- Check completed item, when applicable, via: [X] --> - [X] I have tested this on a device and a simulator - [X] I added documentation in `README.md` - [X] I updated the typed files (typescript) --------- Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>