Skip to content
A React Native app for fetching random photos of cute dogs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.expo
__tests__
actions
assets
components
constants
navigation
reducers
screens
.gitignore
.watchmanconfig
App.js
README.md
app.json
babel.config.js
package-lock.json
package.json
store.js

README.md

Screenshot of Dog Fetch on an iPhone XR

Dog Fetcher

Dog Fetcher brings random cute dogs to your device at the push of a button! Save the good boys/girls to your device and look at them through the "Favorites" tab. Download to your device now through Expo.

Features

  • New random dog appears whenever the "Fetch new dog" button is pressed
  • Pressing the star button saves the dog as a favorite
  • Favorites tab displays all of the user's favorite dogs
  • View individual favorites and remove dogs from the favorites list

Tech Stack

Screenshots

Homescreen

The home screen on an iPhone XR

Favorites

The favorites screen on an iPhone XR

Single Favorite

A single favorite on an iPhone XR

iPad (landscape orientation)

A single favorite in landscape orientation on an iPad

Android

The home screen on a Google Pixel

History

Dog Fetcher is my first React Native app and was created during Flex Week for Thinkful's Engineering Immersion program. Some lessons learned:

  • React Native is just that: React used to build native apps. If you have experience building React web apps, it's very easy to transfer that experience over to building React Native apps. The challenge is knowing when something is different. You will get comfortable as you code and suddenly be looking at a red screen of death because you used a method or component that only works for web apps.

  • Navigating between screens takes a while to wrap your head around. React Navigation is a wonderful library and their excellent documentation helps a lot. Start with the "Getting Started" section and continue reading until they've covered the problem you're facing. Better yet, read through the whole documentation first before you create any screens for your app.

  • If you're going to store things on a user's device, set up Redux first before diving into AsyncStorage. Make sure all your actions and reducers function correctly, then work on adding in persistence.

  • Layout in React Native is implemented using Flexbox, only with a default flex direction of 'column' instead of 'row'. This will mess with you. Everything will seem reversed. If necessary, you can switch it back using flexDirection: 'row' or abadon Flexbox altogether with position: 'absolute'.

You can’t perform that action at this time.