Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Code
·
LAST UPDATED
February 8, 2017

How we built Nachos UI kit for React Native

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

Our product is built in an open source framework Electron.js and React.js library. We are super grateful to the entire dev community and therefore we try to give back as much as we can.

In 2016, we introduced Guacamole UI kit for Sketch, Adobe Xd and Photoshop. The overall feedback was quite overwhelming, so we came up with an idea to give some snack to developers too…

It took us some time to build this, but finally I'm happy (and relieved) to introduce you Nachos UI kit for React Native. We're kicking it off with 30 pre-coded and fully customizable components.

Here you can explore the documentation.

Nachos UI is an open source project, so more components (eg. styled for Android) will be added soon continuously. We welcome all volunteers from the React Native community to contribute!

Now, let me tell you a little bit about my experience, technical stack and obstacles during the development.

The missing puzzle of React Native

We’ve been using React since 2014 and we are still in love with it. If you don’t know React, it’s something like jQuery… Just kidding, it is a library (not a framework☝🏼) for assembling UI components. Btw, one of the reasons I love React.js so much is because it encapsulates all the nastiness from the DOM API.

When Facebook open-sourced React Native in March 2015, it became a huge opportunity for web developers to easily dive into mobile app development.

At Avocode we used React Native for one special project. The experience was great, however I was missing some well-designed and ready to use UI components. I’m talking basic components like Inputs, Buttons etc. During our project we literally had to create our own components for everything since the React Native default ones don’t look very nice.

I talked about this with a few friends and I found out that they also felt the lack of some basic UI components. So I came up with an idea to create an open source UI Kit — one that could grow with the growing usage of React Native.

Here's how the React Native TextInput preset looks like aside our pre-coded TextInput Nachos component:

How did we develop Nachos?

As I mentioned, we are mainly web developers. So working inside the Browser is the most natural thing for us. And with React Native it’s totally possible.

You can use remote debugging feature inside iOS Simulator/Android emulator or React Native for web by Nicolas Gallagher (awesome project by the way). A funny thing is that React Native was meant for Native but creative developers turn it back to web again. 👏🏼 Working with React Native for Web is straightforward if you use Webpack.

Webpack Aliasing

React Native for Web works reasonably well when you don’t use a super specific React Native code (even Animated and PanResponder is working).

Also I’d like point out that we added all the latest coolness from the web community (things like Prettier, Jest’s Snapshot testing, Yarn are used under the hood).

Styling the Components

There are things that are very simple to do on web but not as simple in React Native. Things like relative units (%) aren’t supported yet. So every time you want to do something fancy you need to know the absolute values.

To get the dimensions of a component you can use `onLayout` callback. However, the UX is problematic since onLayout handler is first invoked one frame after your component has mounted.

(EDIT: 🎉 Percentage support has landed a few days ago.)

Also I was sometimes missing inline-flex capability as some components should not stretch out and only surround existing components.

Another thing I was missing was transform-origin, but if you are brave enough you hack it.

My biggest help during the styling process was actually our own product Avocode, since we recently added the option to turn PSD/Sketch layers to React Native (CSS in JS) code. It saved me a considerable amount of time.

React Native template in Avocode

Testability

Testing of React Native apps is kind of “here be dragons” as simple unit tests are easy (e.g.: to simulate onPress on TouchableOpacity), but I’m not entirely sure how to properly test PanResponder interactions.

I still don’t have a clear opinion if snapshot testing is a good thing (since it can be totally wrong) but you definitely get a great feeling when all tests are passing. 🙊

Documentation

Creating a pleasant and easy to use documentation was one of our main goals. I did some research and found a few docs generators. I chose React Styleguide Generator. Still, I had to hack a few things — like the code output. I didn’t want to write redundant code example to strings, because I would probably forget to update them. I tried various approaches (e.g.: eval, babel transform) but ended with a Webpack plugin called StringReplacePlugin.

StringReplacePlugin accepts replacements object

All the code wrapped in `// WEBPACK (ComponentName)` is injected into the `ComponentName.code` property. There is probably a better way but this was easy to implement and it works. (Please let me know in the comments if you have any suggestions.)

Another thing that was kind of hackish was including README file at the beginning of the documentation. To do it you have to create an empty stub component and just fill the description key.

And this is how the final result looks like. I hope it’s clear and understandable.

An example of Bubble documentation

Help us to grow Nachos UI

I’d like to thank Vacuumlabs and Polgár András to make this UI kit possible.

I sincerely hope that this is just the beginning for our UI kit. I’ll appreciate your feedback to make it better. If you like you can contribute with new components on Github.

Thank you.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: