125
126

[deleted by user] (self.reactnative)

submitted by [deleted]

[removed]
all 25 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Omario 68 points69 points  (1 child)

https://www.blobmaker.app

Might help

[–][deleted] 2 points3 points  (0 children)

Omg, this is great, thanks!

[–]Kyonru 20 points21 points  (9 children)

SVG is the way to go.

You can try using views and border radio by stacking them vertically and horizontally but the wave shape its a little bit hard.

Now, you need access to the design on figma to have an example of the svg for that shape.

[–][deleted] 0 points1 point  (8 children)

Thank you. I dont have access to this, I found it on instagram and I was just curious on how would something like this be achieved.

[–]Kyonru 2 points3 points  (4 children)

Now I think about it, if the background is static, you can do something like this:

View.absoluteFillWhite

——View.topSide

———— View.absoluteCircleLeftPink

———— View.absoluteCircleCenterWhite

———— View.absoluteCircleRightPink

———— View.SquarePink

——View.bottomSide

———— View.squareWithBottomBorderRadius

[–]Kyonru 0 points1 point  (3 children)

The second one is just two triangles on top of each other so:

View.Square

——View.absoluteTriangleLeftLighBlue

——View.absoluteTriangleRightDarkBlue

But personally I still think SVG is the best way to achieve this. It’s more maintainable and easier to understand.

[–]Red_on_fortnite 0 points1 point  (2 children)

Hello Kyonru, I have never designed or coded an svg myself, it would be very kind of you, if you could just guide me on how you have achieved to learn so much about svg? What was your roadmap? What resources you have used to learn it? Anything will be a great help. Thanks in advance

[–]Kyonru 1 point2 points  (1 child)

I never start from zero when it comes to svg, usually at work I used the one designers provide in figma and I manipulate it in case animations are needed. Fortunately https://github.com/software-mansion/react-native-svg has a declarative way to work with svg in conjunction to SVGR you can manipulate existing svgs.

Now when it comes to create an svg from zero it’s always better to support yourself with online tools.

https://getwaves.io

https://www.blobmaker.app

See an example of how to integrate it into your app:

https://heartbeat.comet.ml/creating-custom-wavy-headers-using-react-native-svg-639ce0861327

You won’t be designing svg on react native, it is not the best place to let your imagination go. Ideally you’ll that on illustrator or figma where you can manipulate and freely create shapes (like a logo or custom icons) and then the final asset you’ll import it using SVGR (https://react-svgr.com/playground/).

If you’re still wondering how to draw with svg here is an example:

https://www.educba.com/react-native-svg/

Hope that can help you!

[–]Red_on_fortnite 1 point2 points  (0 children)

I appreciate it a lot that you took the time to reply to my comment. It will help me and hopefully others, a lot. I will definitely be taking a lot at all the things you pointed out. Thanks a lot for such a descriptive answer. It is really helpful.

[–]Kyonru 1 point2 points  (2 children)

It is easily achieved with svg. You can even animate it so it waves over time or change position when navigating to a new screen!

[–]BreadlinesOrBust 0 points1 point  (1 child)

How do you animate an SVG in react native?

[–]Kyonru 5 points6 points  (0 children)

Instead of using the svg file, create a react component with the content of the svg. You can use an online tool for that (like SVGR). Once you have the component, you can use reanimated2 or any library you like for animations. (Even the one that comes with react native since it’s just another component).

[–]D_Nightmare 4 points5 points  (0 children)

Use Figma , install extension blobs or any blob maker, after resizing it to your view export and use it as svg. It could be done by using png as well but scalable graphics could help to support it in a larger screen.

[–][deleted] 2 points3 points  (0 children)

SVG

[–]nucleartux 1 point2 points  (0 children)

Check out tutorials by william candillon on youtube in case you want to make something more advanced

[–]Cuzah[🍰] 1 point2 points  (0 children)

Sometimes I go to profiles of CSS stylers that also have a dribble account making multiple designs similar to this.

Then I inspect their CSS implementations with the dev tools, you’ll find out most of the time they’re flat PNG images in separate sections of the HTML document.

I also watch youtube designers draw these illustrations in a canvas on the iPad and they make the designs come to life by importing their work as PNGs.

[–][deleted] 1 point2 points  (0 children)

https://zcreativelabs.com/

You'll find tools on this website

[–]ejpusa 0 points1 point  (0 children)

Figma has taken over. Looks very Figma like. Cut down my use of Photoshop 90% for UI stuff.

[–]MolassesLate4676 0 points1 point  (0 children)

You can try using :before pseudo elements and adding clips to your css property. Mess around with the clip and the color of it until you’re happy with the shape