patrixr / demo-react-native

A demo application using the jsonplaceholder.typicode.com API

A React Native Sample

Here is my first react native app, it is a mini social app based on the JSON Placeholder API

This project runs on the Expo CLI

Main Components

Home page: Card Swipe (a la Tinder)

• Swiping left discards the profile
• Swiping right opens their profile page

Profile Page

--> This page opens up when you swipe right on a card

It contains the following tabs:

• A TODO list
• The user's posts
• The users photos, categorized in albums

Requirements

• YARN
• NODE

Running the app

Install the dependencies:

$> yarn install

Run the app:

$> yarn start

This will run an expo live server that can be used to load the app on either a simulator or a phone

Notes on testing

Given that the Swipe feature is pretty animation-heavy. I'd recommend testing on a phone, as the simulator can possibly get a bit sluggish.

Steps:

• Install the Expo app on your phone
• Ensure your phone and computer are on the same network
• Run the server using yarn start
• A QR Code will appear on the screen, scan it with the Expo app
• The app will load and start on your phone

Notes on the code

• Wrote a post about this usage of hooks here
• Given it's a demo, the strings have not been stored in any localization file
• Despite the API returning static data, the pages were still written as if the data was susceptible to change. Meaning there is not a single preload at startup. The pages can still request data multiple time over the lifecycle of the application (although I added a cache to avoid pointless latency)