Demo Reddit client for React Native

Loads the front page of Reddit and displays the posts in a list

Uses:

• create-react-native-app
• redux
• react-navigation
• redux-persist
• redux-mock-store
• jest-fetch-mock

Supports:

• loading the first page of reddit
• pull to refresh
• viewing a post
• Android back button and status bar height

Notes

Getting started

• yarn lint to validate the code is proper
• yarn test to start jest in watch mode
• yarn start to use the console menu for launching Android or iOS

Linting

Linting is done via yarn lint and uses an aggressive .eslintrc

Testing

This project uses jest-fetch-mock to load an example of Reddit's JSON and test both the success path and the failure path of loading and parsing of the Reddit API.

Acton creators and reducers

There are 4 total actions. The 3 related to refreshing are: REDDIT_REFRESHING, REDDIT_LOADED, and REDDIT_ERROR. These actions have reducers for handling state changes.

There is also a VIEW_POST action creator and corresponding reducer for handling navigation events.

Navigation

For basic "stack" style navigation, react-navigation is used. A Main Screen and the secondary View Post Screen reference components and accept parameters from the navigator. The Navigator is wrapped in a class and some additional global functionality, such as Android back button support, is added here.

Components

The RedditList uses TouchableHighlight and FlatList to create a touchable list of RedditListItem, which is refreshed on first load.

The RedditList is comprised of an array of RedditListItem which handles the display of every post in the list.

When a liste item is touched, the a screen with RedditViewPost is pushed and a WebView displays the URL.

Entry point

The entry point is wrapped with a View to properly handle variable status bar heights on each platform.

This entry point also includes presistence via redux-persist's auto-rehydrate.