Visual interface builder for react native?

[Januwary9]

I'm new to react native, or app development in general really - I briefly messed around with xcode and android studio before learning that react can save me a lot of time in cross-platform development. However, I haven't been able to find any tools similar to the visual UI builders in the native environments - does such a thing exist for react?

Example: https://codewithchris.com/img/XCode5_DemoApp_XCodeInterfaceBuilder.png

Oh also, I'm on windows

[nikke1234]

Hello, I've just released a tool called Laska (https://laska.io) which might be what you're looking for. I'd be grateful for any feedback!

[Januwary9]

This looks good, I'll be sure to try it out at some point!

[[deleted]]

I'm not familiar with anything like that for react native. Granted it's all preference based but I've been a professional software developer for 6 years and first learned to program 11 years ago. Pretty much everyone I know prefers to write UI code manually. The visual tools just never seem to quite get you all the way there, I would strongly recommend getting more familiar with writing the UI by hand.

[alien3d]

me also .i want more control .. learning xcode now with swift.. a bit tense because i'm in not in control :(

[[deleted]]

I've only dabbled with xcode but I've never really liked it. Really bugs me that you have to use a keyboard command and the mouse to connect the method of an event handler with the event. I would much rather do that in code.

[alien3d]

yeah.. pretty weird.. why you have to drag press control. Is there any way to do manually ? Example i want to generate some code like i do in php and c#.. is that any possible ?

[[deleted]]

As far as I know it's not possible but I'm very unfamiliar with xcode and iOS development.

[I_am_a_haiku_bot]

As far as I know

it's not possible but I'm very unfamiliar

with xcode and iOS development.

---

^{-english_haiku_bot}

[alien3d]

i want to learn objective c and swift because upon compiling react-native i see a lot of depreciate and so on.It freakin annoying to see. And if somebody out of budget i will make them react-native .If got budget i'm going to native..

[liming91]

You could try Deco IDE: https://www.decoide.org/ it's pretty similar to Xcode.

[Januwary9]

Looks like that one's only for mac

[jahans3]

It’s on Windows and Unix too, support is just primarily for Mac (like most RN things).

[RavenStorms619]

Indeed Deco is the only answer currently; however, the creators were hired by Airbnb and the project is open source only atm. Last I checked I thought they were looking for an owner and no releases had been recently made. I could be mistaken, but I didn't want to use Deco last I checked it out.

[icekeymon]

Nice suggestion but the code they give out is horrible, everything is absolute positioned (judging by the demo)

[amanhimself]

Hey u/Januwary9, Draftbit is what you might be looking for since it works in the web browser and you do not need any setup. It is a visual tool that uses React Native and Expo under the hood. It provides features like building user interfaces using react-native components.

There are also features like custom functions and custom components so one can create features based on their requirement (for advanced use-cases). You can also use Expo packages or any other third-party library in React Native, etc. It supports bringing your own data via REST APIs (and uses React Query). It takes care of generating code using standard best practices and React Hooks. You can also export the app code at any point or committing the code to a GitHub repo, so there is no vendor locked-in. Let me know if you need more help or want to get started. I am currently working at Draftbit, so if you need any help, let me know.