[018.1] Using BuilderX

Putting designers and developers together

Subscribe now

Using BuilderX [10.13.2017]

What is BuilderX ?

BuilderX is a tool for building Interfaces for React Native. It has been created by our friends from GeekyAnts. It has a drag and drop interface. You can design the components and it generates the React code. Then you just need to copy the result and paste it in your project.

The idea is to put designers and developers together. For the most part, designers use Sketch, Gimp, Photoshop, Illustrator or similar tools. There is another phase of transforming the images into React components. BuilderX helps us on this part. Designers can directly use the tool, change the project and this will reflect in the app.

BuilderX is still in alpha version, we had access to the release and we will show you some of the features. It's not entirely complete though.

Starting a project

We have downloaded and installed BuilderX. Now let's start a new project. There are a few options for creating, Views, Texts, TextInputs, Icons and others.

Let's create two screens for a two screens app. Sorry, but I am not a designer. Most likely the screens will not look awesome, but I hope you can understand the whole idea. :-)

Our Login Screen

Our login screen will have a header and a footer. We will have two text inputs, for login and password. Let's create a login button and have an icon for touch login.

Ok, now our first screen is ready. We can check the generated code here, in the Code Editor section.

Our List Screen

Let's create a list on the second screen. Unfortunately, BuilderX doesn't have a list component, so, we will generate a list by copying each element. We can extract this later for a row component and just put the correct text here.

Ok, this will be our second screen. You can also see the generated code.

So, we have our two screens.

Copying into our React Native project

Now we have our designs ready, we can just copy what we did into our React Native project.

So, we will create a new react-native project and paste the code generated by BuilderX. Creating our project.

Pasting the code for our first screen. Importing the necessary components. And We need to install react-native-icons. Let's do that.

Now we can see the first screen we created, which looks exactly the same in a React Native project. Now let's do that for the second screen. Copying the code. And we have our second screen here. Sweet!

Good especially for beginners

Imagine you are a beginner in React Native, and you would like to know more about how the Views and styling work. You can try it on the tool.

Let's create a View and two inputs. Let's see the generated code. So, if you are a beginner and if you want to understand how alignments, margins, or paddings work, you can use BuilderX to help you understand.

Let's now put the two inputs inside the view we have created. We are using by default position absolute. Let's use position flex for the two inputs. And let's create some backgrounds for them. Different backgrounds to see how they accommodate in the screen. Now, we can set the height for the first one to 40%, and the second one to 60%.

Now, if we change our View position in the entire screen, the two inputs keep the same proportion inside the view. So, if you want to learn more about these things, you can do it by yourself, and once you change the code in the Code Editor section, the screen updates itself automatically. This is super interesting for beginners developers who want to experiment with styling in React Native. Remember, you can always edit the generated code and extract the style for other files and not use the inline generated code.

Opening existing projects and using BuilderX

In the future, it will be also possible to open files from existing React Native projects. So, you can edit them, and it will live reload in your device because it saves the file in the system.

At a glance

If you have designers working on your team, and you want to create your app without losing time converting the design to code. BuilderX is something you should probably use. It helps you to have a good UI ready for an app. Of course, you would need to fix some weights, heights to make it look better on some phones.

For the moment, they are still in Alpha version, and they already have a good version. I'm hoping the app will continue to improve in the next versions and then we can have an episode with the complete version.

I'm looking forward to seeing the next improvements!

Resources