A Hacker News client made with React Native and Redux. Consumes HN's public API located at Firebase.
This was done purely as a learning exercise. If you find any bugs, please open an issue.
|Story Listing||Story Type Selection|
|Single Story||Threaded Comments||Toggleable Comments|
cdinto the downloaded project directory.
npm installto install all necessary packages.
react-native linkfor setting up.
To run it on Android, run
react-native run-android and for iOS
index.ios.js- Entry point for iOS.
index.android.js- Entry point for Android.
src/- All React Native code is located in this directory.
assets/- Contains helper files.
colors.js- Contain all colors in a central place.
components/- Contains general and re-usable components that aren't bound to global state. Dumb components.
Comment.js- To display a single comment.
CommentList.js- To display an array of comments. Works in tandem with
Comment.jsand they recursively call each other to draw out all parent and child comments.
DisplayExternalLink.js- To display any link provided to it. Clicking on it opens it in the Web Browser.
HTMLRenderer.js- Render HTML Text as a native component.
LinkPreview.js- To show a small preview of the story right on the single story screen.
NavbarMenuButton.js- Opens a modal and provides the user with a list of options they can choose from. Used to switch between story types on the application header.
StoryItem.js- Display a single story item and its details either on the Story Listing screen or single story screen.
TimeAgo.js- Take a UNIX timestamp and convert it to '8 hours ago' format.
config/- Application configuration.
api.js- API URL's.
firebase.js- Setting up the Firebase connection.
containers/- Contains components that are bound to global state. Smart Components.
Comments.js- Comments container which calls the
CommentList.jscomponent to display all the comments. Bound to the global state and also manages the fetching of comments for a certain story. Called from
Router.js- Helps manage the navigation between various screens in the application and also provides the Header and the Navbar Switch to switch between story types (Top, Show, Ask, Best, Job, New).
SingleStoryItem.js- Screen for a single story item which displays item details and comments on it.
StoryList.js- Screen for all stories of a certain type (Top, Show, Ask, Best, Job, New).
network/- All network calls are made through this layer.
api.js- Exposes functions used to fetch content from Firebase. Does all the talking to Firebase.
redux- All actions and reducers are located here.
actions- Contains all application wide actions.
reducers- Contains all reducers.
types.js- keeps track of all action types that can be undertaken.
App.js- Unified entry point to the React Native application. This is what
index.android.jscall and setup.
App.jsand hands over the navigation to the
Router.jscontainer helps manage the navigation between various screens in the application and also provides the Header and the Navbar Switch to switch between story types (Top, Show, Ask, Best, Job, New). It does so using the excellent
src/containers/StoryList.jscomponent bootstrapped in the
changeStoryTypefunction as we only require it on the main story listing screen.
src/containers/StoryList.jscomponent and it loads all stories of a certain type ('Top') by default.
src/containers/SingleStoryItem.jscomponent which loads the comments of a certain story and shows more details about it.