Rounded corners

[jonathanroze]

Hi,

I want to know if it's planned to implement rounded corners for highlighted zone, i tried by editing svgMaskPath but I can't achieve what I want.

Some of you already did that ?

Thanks

[DeVoresyah]

you must create custom svg path for that, I use this tool https://yqnn.github.io/svg-path-editor/

[arifqys]

I recently did. Here is the function to pass on svgMaskPath for the reference:

const roundedRectangleSvgPath = ({ position, canvasSize, size }) => {
  const br = 10; // border radius
  const sizeX = size.x._value - 2 * br;
  const sizeY = size.y._value - 2 * br;
  return `M 0 0 H ${canvasSize.x} V ${canvasSize.y} H 0 V 0 Z M ${position.x._value+br} ${position.y._value} Z h ${sizeX} a ${br} ${br} 0 0 1 ${br} ${br} v ${sizeY} a ${br} ${br} 0 0 1 -${br} ${br} h -${sizeX} a ${br} ${br} 0 0 1 -${br} -${br} v -${sizeY} a ${br} ${br} 0 0 1 ${br} -${br} z`;
}

[BaderSerhan]

Thank you @arifqys so much! I implemented your function in my project and it works so nicely!

[JCYDigitalinnov]

It crashes on android. But I managed to fixed it

java.lang.Error: Invalid number formating character '-' (i=122, s=M 0 0 H 392.72727272727275 V 796.3636363636364 H 0 V 0 Z M 10 0 Z h -20 a 10 10 0 0 1 10 10 v -20 a 10 10 0 0 1 -10 10 h --20 a 10 10 0 0 1 -10 -10 v --20 a 10 10 0 0 1 10 -10 z)
 at com.horcrux.svg.PathParser.parse_number([PathParser.java:627](https://pathparser.java:627/))
 at com.horcrux.svg.PathParser.parse_list_number([PathParser.java:594](https://pathparser.java:594/))
 at com.horcrux.svg.PathParser.parse([PathParser.java:123](https://pathparser.java:123/))
 at com.horcrux.svg.PathView.setD([PathView.java:28](https://pathview.java:28/))
 at com.horcrux.svg.RenderableViewManager$PathViewManager.setD([RenderableViewManager.java:751](https://renderableviewmanager.java:751/))
 at com.horcrux.svg.RenderableViewManager$PathViewManager.setD([RenderableViewManager.java:740](https://renderableviewmanager.java:740/))
 at com.facebook.react.viewmanagers.RNSVGPathManagerDelegate.setProperty([RNSVGPathManagerDelegate.java:108](https://rnsvgpathmanagerdelegate.java:108/))
 at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps([ViewManagerPropertyUpdater.java:46](https://viewmanagerpropertyupdater.java:46/))
 at com.facebook.react.uimanager.ViewManager.updateProperties([ViewManager.java:84](https://viewmanager.java:84/))
 at com.facebook.react.uimanager.ViewManager.createViewInstance([ViewManager.java:188](https://viewmanager.java:188/))
 at com.facebook.react.uimanager.ViewManager.createView([ViewManager.java:115](https://viewmanager.java:115/))
 at com.facebook.react.uimanager.NativeViewHierarchyManager.createView([NativeViewHierarchyManager.java:281](https://nativeviewhierarchymanager.java:281/))
 at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute([UIViewOperationQueue.java:194](https://uiviewoperationqueue.java:194/))
 at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations([UIViewOperationQueue.java:1110](https://uiviewoperationqueue.java:1110/))
 at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded([UIViewOperationQueue.java:1081](https://uiviewoperationqueue.java:1081/))
 at com.facebook.react.uimanager.GuardedFrameCallback.doFrame([GuardedFrameCallback.java:29](https://guardedframecallback.java:29/))
 at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame([ReactChoreographer.java:175](https://reactchoreographer.java:175/))
 at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame([ChoreographerCompat.java:85](https://choreographercompat.java:85/))
 at android.view.Choreographer$[CallbackRecord.run](https://callbackrecord.run/)([Choreographer.java:1449](https://choreographer.java:1449/))
 at android.view.Choreographer$[CallbackRecord.run](https://callbackrecord.run/)([Choreographer.java:1459](https://choreographer.java:1459/))
 at android.view.Choreographer.doCallbacks([Choreographer.java:1089](https://choreographer.java:1089/))
 at android.view.Choreographer.doFrame([Choreographer.java:998](https://choreographer.java:998/))
 at android.view.Choreographer$[FrameDisplayEventReceiver.run](https://framedisplayeventreceiver.run/)([Choreographer.java:1431](https://choreographer.java:1431/))
 at android.os.Handler.handleCallback([Handler.java:942](https://handler.java:942/))
 at android.os.Handler.dispatchMessage([Handler.java:99](https://handler.java:99/))
 at android.os.Looper.loopOnce([Looper.java:210](https://looper.java:210/))
 at android.os.Looper.loop([Looper.java:299](https://looper.java:299/))
 at android.app.ActivityThread.main([ActivityThread.java:8252](https://activitythread.java:8252/))
 at java.lang.reflect.Method.invoke(Native Method)
 at com.android.internal.os.RuntimeInit$[MethodAndArgsCaller.run](https://methodandargscaller.run/)([RuntimeInit.java:559](https://runtimeinit.java:559/))
 at com.android.internal.os.ZygoteInit.main([ZygoteInit.java:954](https://zygoteinit.java:954/))

const roundedRectangleSvgPath = ({ position, canvasSize, size }) => {
  const br = 10; // border radius
  const sizeX = size.x._value - 2 * br;
  const sizeY = size.y._value - 2 * br;

  const _sizeX = 0 - sizeX;
  const _sizeY = 0 - sizeY

  return `M 0 0 H ${canvasSize.x} V ${canvasSize.y} H 0 V 0 Z M ${position.x._value+br} ${position.y._value} Z h ${sizeX} a ${br} ${br} 0 0 1 ${br} ${br} v ${sizeY} a ${br} ${br} 0 0 1 -${br} ${br} h ${_sizeX} a ${br} ${br} 0 0 1 -${br} -${br} v ${_sizeY} a ${br} ${br} 0 0 1 ${br} -${br} z`;
}

I modified some functions that double negates.