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:
- Show entertaining animal gifs at random times during the day.
- The option to dismiss the app or postpone, if user is busy or doesn't want a distraction.
- A way to change the gifs or see more gifs.
- Timeout feature or cap on number of gifs that will prevent the user from wasting too much time.
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.
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!
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:
- Create a separate component/class to load all of the gifs into a list
- Use the size of the list to determine the distraction duration
- Use the a separate gifView to view one gif at a time, iterating through the list
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.
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.
- Refactor and add End Session page
- End session once "Done" is clicked
- End session once list of gifs is exhausted
- Replace "Next" button with swipe gesture
- Set up user profiles -requires firebase