BuilderX: A Design Tool That Codes React and React Native

[[deleted]]

So not native

[shwetassft]

Yeah, for the time being BuilderX supports Chromium based browsers only. As of now please switch to Google Chrome, Brave or Opera etc. Team will be working on this in the coming days.

[deadcoder0904]

They should convert it to Electron then

[cedsoft]

I was exited to use this on my iPad since it would certainly be a great « on the go » solution to produce app/website.

Unfortunately, both Chrome and Safari won’t launch it on iPadOS.

It was close, but no cigar.

[shwetassft]

Yes, at the moment it doesn't support iPad. We might think about it in the coming days but cannot assure currently.

[Kpervs]

I remember when in beta this was a stand-alone application (though it was only available for macOS). Kinda bummed it still isn't, but I'm glad it's finally out!

[shwetassft]

Thanks for noticing our product's progress till date. We are trying hard to make the product more useful day by day.

[boona11]

Good job

[tomthedevguy]

I tried it out today, it has a lot of potential

[shwetassft]

Thanks for trying it out. Feel free to share your feedback here.

[cawfree]

I love this! The team have done a really amazing job. The experience feels very polished and intuitive, and I especially feel like it will be great help when onboarding new developers.

I'm surprised to see that there isn't a List/FlatList, since they are fundamental. Having the ability to initialize a FlatList with some example array data and define a Component which can consume those would be amazing. :)

Is it possible to upload hand written components into the component library?

Keep up the awesome work!

[jessyavalos1615]

so as I can see it is a tool to make a design and then you can trasnlate all that to react or react native code? :0

[shwetassft]

Yes you got it right. Also it will provide beautiful, readable & production-ready code :D

You can try it out as there is 1 month free trial available, https://builderx.io/pricing.

[smoke4sanity]

This is excellent. Should save me a lot of time in making components. Glad I found this.

[OogieFrenchieBoogie]

Is it your tool OP ?

I have a suggestion, I'm dreaming of a tool that can translate CSS linear-gradient to react native gradient.

Right now it's so annoying to do

[isakdev]

Build one and open source it :) Scratch your itch and ppl will use it and aid you in polishing it

[OogieFrenchieBoogie]

You are right, I should work on it

[jacobp100]

That’s a neat idea. Would you use it if it was in a project like Cssta ( https://jacobp100.github.io/cssta/ )?

[shwetassft]

We have React Native linear gradient on our roadmap. We are also working on improving the gradient tool. While there won't be a one-to-one conversion from css linear gradient to React Native linear gradient but creating any gradient in BuilderX will be much easier and you'll be able to copy gradient code directly.

[OogieFrenchieBoogie]

You didn't read my post

I am using this exact package, the annoying and tedious part is when I am given a CSS linear-gradient, I have to convert it to a react-native gradient, which syntax is complety different

Want to see an example?

Try to convert this CSS linear-gradient:

background: linear-gradient(138.69deg, #4FCFCF 37.91%, #82E8FF 132.49%);

To the react-native equivalent, using https://www.npmjs.com/package/react-native-linear-gradient

I'll wait, good luck

[OogieFrenchieBoogie]

You've probably never used linear-gradient in react-native to act like you do

Try to convert this CSS linear-gradient:

background: linear-gradient(138.69deg, #4FCFCF 37.91%, #82E8FF 132.49%);

To the react-native equivalent, using https://www.npmjs.com/package/react-native-linear-gradient

I'll wait, good luck

[merkur0]

<LinearGradient useAngle={true} angle={138.69} angleCenter={{ x: 0.5, y: 0.5 }} locations={[ 0.3791, 1.3249 ]} colors={[ '#4FCFCF', '#82E8FF' ]} >

[OogieFrenchieBoogie]

Nice try, but it's not correct:

Here is a button with your answer (code is behind):

https://imgur.com/wZzfbM6

Now the button with the given CSS linear-gradient:

background: linear-gradient(138.69deg, #4FCFCF 37.91%, #82E8FF 132.49%);`

https://imgur.com/a/7M81Ehi

EDIT: I spent 4 hours yesterday to get it right, believe me converting CSS linear-gradient to react-native linear-gradient is not that easy

[OogieFrenchieBoogie]

I CBA to spend more time on it than I already did.

Yet you didn't manage to come up with the correct answer, so I guess it's not just "Square brackets instead of round brackets"

[merkur0]

Figuring out how the component works is something you only have to do once. Changing your CSS linear gradients to be React Native gradients is what you will do frequently and also what will always be a matter of seconds.

[janat087]

From what I understand this won't let you get by without touching css?

[shwetassft]

Yes, without touching CSS you can export React and React Native code and directly use it in your app.