software-mansion/react-native-svg

SVG in SVG does not have x/y props applied

Open

#1,283 opened on Feb 13, 2020

View on GitHub
 (4 comments) (0 reactions) (0 assignees)Java (7,107 stars) (1,076 forks)batch import
Workaround existsenhancementgood first issuehelp wanted

Description

Bug

When embedding an svg inside another svg, setting the x and y props do not have an effect. On the web, they do

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 50.89 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.8.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0-rc.1 => 0.62.0-rc.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 11.0.1

Steps To Reproduce

https://snack.expo.io/HkekkSQmI

Describe what you expected to happen:

  1. iOS, Android, and web are identical

Short, Self Contained, Correct (Compilable), Example

https://snack.expo.io/HkekkSQmI

Contributor guide

Tech stack
javascriptreact native
Domain
mobilefrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React NativeSVG basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the native rendering logic for SVG elements. The issue is that nested SVG's x/y props are not applied. Look at the source code for handling SVG attributes, particularly in the Android (Java) and iOS (ObjC) implementations. The snack example at https://snack.expo.io/HkekkSQmI reproduces the bug. Check if the x/y props are passed correctly to the native view or if there is a missing mapping in the SVG element hierarchy.