React Giphy Cats

In Progress: Swift, React Native


React Giphy Cats is a project I am currently working on using React Native and iOs. The app's goal is to show the user a fun animal gif, at random times throughout the day, to provide a brief distraction and hopefully alleviate some immediate stress. I plan on using this tutorial, as a guide for development. Code progress can be track at this repo.

The ultimate goal for the project would be to find a way to measure the app's effectiveness and integrate Apple's Healthkit to create a model that detects stress. Ideally, I would combine that model with random gif insertions to combat any correlation between gifs and stress.

In order to better define its purpose, functionality, and how the user interacts with the app, I considered what features I wanted to include in this first round:

Initial Mockups

After figuring out how the app will be used, I designed some initial mockups. Having the "done" button at the top prevents it from accidentally being tapped while the user is swiping through gifs.

First step

So far, I've added a View to the project and changed a bit of the index.ios.js and included a picture of Caveman the Cat. The next step is to try to display gifs from giphy which requires a study of the giphy api!

To Try

After reading up on the giphy api and this tutorial, it seems that I have several options in structuring my app. I could call giphy every time the user swipes to change gifs, I could use the plugin react-giphy to make the same call when the user swipes, or I could call giphy once and recieve a list of gifs to iterate through when the user swipes.

I decided, for my first go-around, to try the third option and structure my app in the following way:

This should result in quicker iteration through gifs and less wait in-between which suits my needs, because the app should be actively showing gifs for short periodic bursts.

Gifs

I used SuperAgent to make a request to giphy api and got back a list of gifs matching my search term for cats. So now I need to refactor a little bit. I want to make the request right as the app is open, so I need to move it to my index.ios.js file from gifView. Then I need to create and update the state of the list and pass it to the gifView. Once this is done I can then pick one gif from the list to display. This item will be defined in another file and be changed when the user clicks next.

So that didn't work. I couldn't find a successful way to pass the gif list to the view using navigatorIOS. So instead of requesting in the index, I immediately open the gifView and make a request there.

Iterating Through Gifs

So it's been a harrowing journey, I've traced through examples trying to figure out how in the world things get called and where they do. I still don't know everything, but I now can successfully iterate through a list of gifs and show them from giphy. The trick was that I had to map the list, once I requsted it, in order to access the object's url. Now, I just have to check that there is in fact a gif there and not a null object before I render the gif in the view.

To Do: