https://github.com/patrixr/demo-react-native

A demo application using the jsonplaceholder.typicode.com API
https://github.com/patrixr/demo-react-native

demo-app react-native swipe

Last synced: 14 days ago
JSON representation

A demo application using the jsonplaceholder.typicode.com API

• Host: GitHub
• URL: https://github.com/patrixr/demo-react-native
• Owner: patrixr
• License: mit
• Created: 2019-08-18T09:28:47.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T21:41:48.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T15:13:33.879Z (7 months ago)
• Topics: demo-app, react-native, swipe
• Language: JavaScript
• Size: 1.49 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A React Native Sample

[![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/uses-badges.svg)](https://forthebadge.com)

Here is my first react native app, it is a mini social app based on the [JSON Placeholder](https://jsonplaceholder.typicode.com) API

This project runs on the [Expo CLI](https://docs.expo.io/versions/latest/workflow/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](https://dev.to/patrixr/react-writing-a-custom-api-hook-l16)

- 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)