Building a React Native app as a Designer using BuilderX

BuilderX is a screen design tool that codes React Native* for you. It generates beautiful, readable and editable code for the designs. Just design the components in your app, or import your Sketch file and it generates the corresponding code. You can hop between design and code with just a click owing to the amazing bi-directional flow in BuilderX.

The Problem

It’s 2018, and Designers and Developers still don’t speak the same language. There is still a huge gap between the Design and Development phase. Designers and Developers work on different workspaces, tools, and most importantly, file formats. BuilderX is a revolutionary tool that seamlessly bridges this gap.

First, you will need to install BuilderX. Just go to builderx.io and install BuilderX.

BuilderX Interface

BuilderX workspace is majorly divided in five sections:

  • Artboard – Artboard corresponds to a screen in your app. This is where you design awesome stuff.
  • Toolbar – The toolbar on the top contains some basic tools for your design like Shapes, Text, Images, etc. and also some useful actions like create group and create symbol.
  • Properties Panel – Properties panel on the right lets you adjust the properties of the selected layers and artboard.
  • Left Panel – The left panel contains Layers and Symbols list. The layer list shows all the layers in your current Artboard. Symbols panel contains pre-built components as well as your project’s symbols that you can drag and use.
  • Code Editor – Code editor is useful for developers as it lets you make changes in your code directly and changes will be reflected in real-time.

Creating the App

In this tutorial, we will be creating a Hacker News App clone using BuilderX to design our components and then integrate the API calls with code generated to fetch the data in real-time and run the app on the device. First, we will create a new project from the BuilderX launch screen.
BuilderX Launch Screen

On creating a new project, you see the project screen where the Artboard is shown in the centre as described in the previous section.
BuilderX Workspace

This is where we create our components. We will be saving the project as HackerNews-BuilderX.

First, let’s create a rect and give it a color, which in code would correspond to <View /> component in React Native.
Draw a <View /> Component

Then, to create a header, we will insert some icons by using icon menu in top toolbar. After inserting the icon, we change it to menu icon. Similarly, we can design the whole header. By using flex or different alignments, we can adjust the icons in the header.
Design a <Header /> Component

After designing the header, we can convert it to symbol so that we can use it on
other screens as well without having to re-create it.
Make Symbol

Next, we will create a list item component that we will be using to show a single news-item. It would contain three text components inside a rect on the left and a rect on the right that would show number of comments and score. Clicking on it would navigate to <Comments /> screen.
Create a list-item component

After creating the list-item, we can directly create a list of that component that would correspond to the <FlatList /> in React Native.
Create a list from list-item component

After this, we will add Footer in our screen. For this,we will use predefined Material Footer symbol from BuilderX symbol library.
Add a <Footer /> component

Notice that we can also customise the symbol as needed and override the icons and texts.
Now, we will create a new Screen for comments page. Also, if we have similar design for the new page then we can just duplicate the previously created screen or we can re-use the symbols. Here, we will use the Card component from BuilderX symbol library and modify it to fit our requirements.
Add card component for comments section

We can can also always change the design from the code and changes will be reflected in real-time.
Design & Code Simultaneously

After designing the comment component, we will create a list like in previous screen and make it a FlatList. Currently, our design will work for almost all mobile screens with few exceptions like iPhoneX or other phones with notch. BuilderX conditionals takes care of that for us. You can change the screen specific design by recording conditions for that screen.
Conditionals in BuilderX

After we have designed the app, it looks like this.
Final design of HackerNews clone

Now, we will move to the next phase of adding business logic to our code.

Adding business logic to the App

In this phase, we open the component files in an editor and add the functions to fetch the data from the API. We will add this code snippet to our LandingPage.js inside class.

constructor() {
    super();
    this.state = {
      newsList: []
    };
    this.fetchData = this.fetchData.bind(this);
  }
  componentDidMount() {
    this.fetchData();
  }
  async fetchData() {
    const response = await fetch(
      "https://hacker-news.firebaseio.com/v0/topstories.json"
    );
    const data = await response.json();
    this.setState({ newsList: data });
  }

After adding code and mapping the state to the components, we get these screens.
Business logic integration

Similarly, we will add these functions and mappings with respective API end-point in all screens. We also need to pass props while navigating between screens. The ListItem component now looks something like this in code.

async fetchData() {
    let url =
      "https://hacker-news.firebaseio.com/v0/item/" + this.props.id + ".json";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ news: data });
  }
  render() {
    return (
      <View style={[this.props.style]}>
        <View style={styles.itemContainer}>
          <Text style={styles.itemName} numberOfLines={2} ellipsizeMode="tail">
            {this.state.news.title ? this.state.news.title : "Title"}
          </Text>
          <Text style={styles.itemAuthor}>
            {this.state.news.by ? this.state.news.by : "User"}
          </Text>
          <Text style={styles.itemUrl} numberOfLines={2} ellipsizeMode="tail">
            {this.state.news.url ? this.state.news.url : "Text Added"}
          </Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            this.props.navigation.push("CommentsPage", {
              commentsList:
                this.state.news && this.state.news.kids
                  ? this.state.news.kids
                  : [],
              title:
                this.state.news && this.state.news.title
                  ? this.state.news.title
                  : "",
              url:
                this.state.news && this.state.news.url
                  ? this.state.news.url
                  : ""
            });
          }}
        >
          <View style={styles.commentsContainer}>
            <Svg style={styles.ellipse} viewBox="0 0 100 100">
              <Ellipse
                rx={50}
                ry={50}
                cx={50}
                cy={50}
                fill="rgba(249,205,175,1)"
              />
            </Svg>
            <Text style={styles.commentNumbers}>
              {this.state.news.kids ? this.state.news.kids.length : "106"}
            </Text>
          </View>
          <View style={styles.upvotesContainer}>
            <Text style={styles.upvotes}>
              {this.state.news.score ? this.state.news.score : "151"}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

Running code on device

After integrating the code and the business logic, we will run the app on our device.
Preview on simulator

Conclusion

This was just a simple app. But you can design and code fairly complex apps using BuilderX. Using BuilderX, developers can be sure to save at least 50% of their time, and iterate faster on ideas.
Another amazing thing to note here is that design changes in the app can be made even after the app is shipped without having to reiterate the development phase.

You can check the complete code here on the github repo.

Quick Links

You can also follow BuilderX on Facebook and Twitter to stay updated with the latest news.

* more tech to follow


Source: Scotch.io

phpInfo

avatar
  Subscribe  
Notify of