React Native Blueprints
上QQ阅读APP看书,第一时间看更新

Overview

To better understand our RSS reader, let's take a look at how the app will look like once we finish it.

iOS: 

Android:

The home screen will display a list of the feeds already added by the user. It will also show a button (+) in the navigation header to add a new feed to the list. When that button is pressed, the app will navigate to the Add feed screen.

iOS:

Android:

Once a new feed has been added, it will show on the home screen and the user will be able to open it by simply tapping on it.

iOS:

Android:

At this stage, the app will retrieve the list of the updated entries for the selected feed and display it on a list. In the navigation header, a Trash icon will allow the user to remove the feed from the app. If the user is interested in any entries, she can click on it to display the full content for that entry.

iOS:

Android:

This last screen is basically a WebView, a lightweight browser opened by default in the URL, which is containing the content for the selected entry. The user will be able to navigate to subsections and fully interact with the open website in this screen having also the possibility to go back to the feed details by tapping on the Back arrow in the navigation header.

We will be covering the following topics in this chapter:

  • State management with MobX
  • Fetch external data from a URL
  • WebView
  • Basic linking modules with native resources
  • Adding icons
  • ActivityIndicator