---
title: Building a React Native App in Two Days
teaser: We built a React Native app in two days with spooky results.
tags: react native,ios,design,mobile
author:
- Ali Aas
- Blake Williams
- Cristina Silva
published_on: 2017-04-25
---

At the end of the year, thoughtbot hosts Ralphapalooza --- a two day internal
hackathon to learn and explore new technology (and hopefully ship something while
doing so). This year we wanted to do something different, creative and fun but
also get it out the door and into the world by the end of the hackathon. The end
result of those two days was Spookstrology, an astrology app built in React
Native.

We came up with the concept of a "spooky" astrology app to look up your various
astrological signs. We chose this because it gave us the chance to get creative
with the visual design and tackle design challenges than what we usually face in
day-to-day client work while also being a fun and light-hearted project.

We were trying to figure out the best medium to build Spookstrology and we
ultimately chose iOS. We could've easily made this a web app, but the challenge
of shipping an iOS app in two days seemed more exciting. Could it be done? Turns
out, it can.

## What we came up with

Spookstrology takes the time, date and place of your birth to calculate a
portion of your astrological birth chart. It returns your Sun Sign (the sign
you're most familiar with which is based on your birth date) as well as your
Ascending and Moon sign.

![](https://images.thoughtbot.com/blog-vellum-image-uploads/n6q1j8geROSLnOrXWZ8l_spookin'.gif)

## On the development side

The primary reason we went with React Native was how fast it allows us to
iterate. It also allowed the designers, Cristina and Ali, to tackle the design
implementation while Blake focused on integrating with APIs, laying out the
foundation of the app, and fixing bugs.

One major challenge we faced was finding a suitable astrology API that provided
the content we required. We ended up finding [Vedic Rishi] which suited our
needs for the hackathon perfectly. Once we found the correct endpoints,
integrating with it was a breeze.

[Vedic Rishi]: http://www.vedicrishi.in/

## On the design side

React Native can be picked up pretty easily by designers and front-end
developers who are familiar with web technologies such as Flexbox. Constructing
elements on the screen share some similarities to HTML ([JSX]) and the syntax
([StyleSheet]) for styling elements on the screen largely mimics CSS. This let
the designers start implementing the designs right away.

We sketched out some basic wireframes and the flow of the app on a whiteboard to
get us started, then we began pulling together a [moodboard]. Vaporwave art,
[Hotline Miami], and [witch house] music inspired our visual direction. The end
result of this hard work? Lots of gradients, hand drawn iconography and one
spooky result.

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

[JSX]: https://facebook.github.io/react/docs/introducing-jsx.html
[StyleSheet]: https://facebook.github.io/react-native/docs/stylesheet.html
[moodboard]: http://cristinasilva.dropmark.com/379041
[Hotline Miami]: http://store.steampowered.com/agecheck/app/219150/
[witch house]: https://en.wikipedia.org/wiki/Witch_house_(music_genre)

## In the end...

Some things aren't meant to be forever. After our free trial of the API ran out,
we weren't sure if a two-day experiment warranted a monthly price tag for us. We
learned a lot about React Native, had fun, and even picked up some astrological
insights along the way. Spookstrology, you'll live on in our sketch files, code
and in our hearts.

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

Interested in learning more about using React Native in your projects? Check out
our other posts [here].

[here]: https://thoughtbot.com/blog/tags/react-native