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

As we did in the first chapter, we need to initialize a new React Native project through React Native's CLI. This time, we will name our project RSSReader:

react-native init --version="0.49.3" RSSReader

For this app, we will need a total of four screens:

Besides the screens, we will include an actions.js file containing all the user actions modifying the app's state. Although we will review how the state is managed in a later section, in detail, it's also important...

MobX is a library which makes state management simple and scalable by transparently applying functional reactive programming. The philosophy behind MobX is very simple: anything that can be derived from the application state, should be derived automatically. This philosophy applies to UI, data serialisation and server communication. 

Lots of documentation and examples of using MobX can be found on its website https://mobx.js.org/, although we will make a small introduction in this section to fully understand our app's code in this chapter.

/*** src/store.js ***/

import {observable} from 'mobx...

After understanding how MobX works, we are ready to create our store:

/*** src/store.js ** */

import { observable } from 'mobx';
import { AsyncStorage } from 'react-native';

class Store {
  @observable feeds;
  @observable selectedFeed;
  @observable selectedEntry;

  constructor() {
    AsyncStorage.getItem('@feeds').then(sFeeds => {
      this.feeds = JSON.parse(sFeeds) || [];
    });
  }

  _persistFeeds() {
    AsyncStorage.setItem('@feeds', JSON.stringify(this.feeds));
  }

  addFeed(url, feed) {
    this.feeds.push({
      url,
      entry: feed.entry,
      title: feed.title,
      updated: feed.updated,
    });
    this._persistFeeds();
  }

  removeFeed(url) {
    this.feeds = this.feeds.filter(f => f.url !== url);
    this._persistFeeds();
  }

  selectFeed(feed) {
    this.selectedFeed = feed;
  }

  selectEntry(entry) {
    this.selectedEntry = entry;
  }
}

const store = new Store();
export default store;

We have already seen the basic structure of...

There will be two types of actions in our app: those affecting a specific component's state and those affecting the general app state. We want to store the latter somewhere out of the component's code, so we can reuse and easily maintain them. An extended practice in MobX (and also Redux or Flux) apps is to create a file named actions.js, where we will store all the actions modifying business logic for our app. 

In the case of our RSS reader, the business logic revolves around feeds and entries, so we will capture all the logic dealing with these models in this file: 

/*** actions.js ** */

import store from './store';
import xml2json from 'simple-xml2json';

export async function fetchFeed(url) {
  const response = await fetch(url);
  const xml = await response.text();
  const json = xml2json.parser(xml);
  return {
    entry:
      (json.feed && json.feed.entry) || (json.rss && 
      json.rss.channel.item),
    title:
      (json.feed && json.feed...

All React Native apps have one entry file: index.js,  we will delegate the root of the component's tree to our src/main.js file:

/*** index.js ***/

import { AppRegistry } from 'react-native';
import App from './src/main';
AppRegistry.registerComponent('rssReader', () => App);

We will also register our app with the operating system.

Now, let's take a look at the src/main.js file to understand how we will set up navigation and start up our component's tree:

/** * src/main.js ***/

import React from 'react';
import { StackNavigator } from 'react-navigation';

import FeedsList from './screens/FeedsList.js';
import FeedDetail from './screens/FeedDetail.js';
import EntryDetail from './screens/EntryDetail.js';
import AddFeed from './screens/AddFeed.js';

import store from './store';

const Navigator = StackNavigator({
  FeedsList: { screen: FeedsList },
  FeedDetail: { screen: FeedDetail },
  EntryDetail: { screen: EntryDetail },
  AddFeed: { screen: AddFeed },
}...