search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.5k stars 1.13k forks source link

Question: Can this be used in a scroll view? #1368

Closed cristianocca closed 5 months ago

cristianocca commented 4 years ago

Trying to make a tool to drag and drop, and resize various svg elements on the screen. Looking at all the examples, the screen is always constrained to the screen dimensions. Is it possible to have a horizontal and vertical scrolling view with SVG elements inside? Any guidance on how to achieve this?

macfanatic commented 4 years ago

I implemented a line drawing tool using this library, using react-native-image-pan-zoom for the pan/pinch container wrapping an animated view with a custom PanResponder to detect a touch began (begin drawing line at the touch point) and touch move (to update line destination).

When adding a line I added to local state, and the origin/destination values where Animated.ValueXY instances.

This worked well, allowing users to zoom in/out and pan around, then tap to drag a line across the screen. I exported following the info in the README here, and then re-rendered using the SvgXml tag inside my app later on to get a readonly version.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

WoLewicki commented 1 year ago

The dimensions of your Svg component are up to you and they can be bigger than the screen size. You can also move it just like normal views of RN. Does it answer your question?