---
title: Creating Gesture-Based Gradients and Shipping Fast with React Native
teaser: 'A quick tale about how we created a gesture-based gradient app.

  '
tags: design,mobile,ios,react native
author:
- Mike Borsare
- Ryan Coughlin
published_on: 2017-06-15
---

![](https://images.thoughtbot.com/blog-vellum-image-uploads/kxQLgVCDSlu6tUyYtWKw_app-icon.png)

Gradients are beautiful. You can find them in nature during dusk and dawn. Or
after an afternoon thunderstorm when a rainbow appears. These moments are
impactful and anchored in experiencing color. These are the moments you share
with your family and friends from your travels or your day-to-day. These are the
moments that inspired Mike and I to create [GradientDaze][app-store].

Now you can create, share, and have fun exploring the world of gradients. We
just pushed V2 to the app store and can't wait for you to start creating.

## How it began

GradientDaze came to be during thoughtbot’s yearly 2-day hackathon,
Ralphapalooza. Since Mike and I only had couple of days we had to keep the app
lean. We also needed to keep color center stage and not clutter the UI. For that
reason we leaned towards gestures. We figured touching the top half of the
screen would adjust the start color and the bottom half the end color. To adjust
the hue you'd move your finger from left to right. Finally, moving your finger
top to bottom would adjust the lightness.

With that in mind we got to work and built the MVP. It was definitely minimum
and had no: animations, marker movements, or other functionality. It was only
the beginning though.

## Leaving port with React Native and shipping fast

React Native is a promising framework. Over the past six months we’ve shipped
several mobile apps built using React Native. With GradientDaze we challenged
ourselves to push its performance bounds by drawing new gradients during each
touch event. We were able to take advantage of existing languages and we built
faster. We were able to ship a complete version of the app without having
knowledge of Swift, autolayout and other Xcode tooling.

Working within this environment has some great benefits:

Hot reloading, when a file is saved the app automatically reloads on the
simulator without losing its current state. Familiarity across writing CSS. The
learning curve from writing HTML and CSS is very similar to creating styles and
markup within React Native. Allowing a designer or developer to use existing
Javascript knowledge.

## Then and now

### Version 1

We shipped the first version to the App Store in mid January. That release
included:

Allowing a user to create gesture based gradients. View color information about
the colors used in a user’s gradient. Party mode (🎉 ) – generates random
gradients and vibrates the device...because. Share a gradient.

![](https://images.thoughtbot.com/blog-vellum-image-uploads/hQI1Q42ETbeHlDvhKUN0_version1.png)

### Version 2  

We've been hard at work improving GradientDaze since V1. Mike and I created a
more polished experience. We've added the ability to save, view and delete
gradients. In addition, we’ve added a handful of other smaller things:

Implemented an animated circular menu with refined iconography. This let us tuck
away controls to simplify the creation screen. When in party mode, the color
markers animate to their new position as the gradient on the screen changes.

![](https://images.thoughtbot.com/blog-vellum-image-uploads/Qq2aq4nKTSGqnL4hYzHT_version2.png)

## What’s next

We plan on pushing the design bar across the app and brainstorming new ideas.
We’d love to hear from you, let us know what you think! And if you haven’t
downloaded GradientDaze, [download it on the Apple App Store][app-store]

[app-store]: https://itunes.apple.com/us/app/gradientdaze/id1185051865