React-Native: components only working properly on the last tab loaded in when using react-native-navigation or react-navigation

Question

I have a very simple two tab app:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { TabNavigator } from 'react-navigation';

import {
  Sports,
  News,
} from 'externalComponents';

const MyApp = TabNavigator({
  Sports: { screen: Sports },
  News: { screen: News },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

The Sports and News components are provided by another company, and I cannot edit that code. If I load this into a TabBarIOS component, everything works fine and all tabs work as intended. However, with react-native-navigation and react-navigation , only the last tab loaded works properly.

Both the News and Sports components load a JSONDownloadService component like this:

downloadService = new JSONDownloadService(this);

And then it calls this:

downloadService.getJSON(this.state.url, type)

Now in JSONDownloadService because it has been passed the NEWS or SPORTS component in its constructor, it gets passed updateComponent (the part that is not getting called correctly). The getJSON() looks something like this:

getJSON(url, type) {
  //set up vars...
    fetch(request, init)
        .then(function (response) {
          // ...some code
        })
        .then(function (response) {
            if (response) {
                try {
                 // supposed to call `updateComponent` in News & Sports:
                    callback.updateComponent(response, type);
                }
                catch (err) {
                    console.log(err);
                }
            }
        })
        .catch(function (error) {
            console.error(error);
        });
}

The trouble is, updateComponent() is only ever called by the last component loaded in the tabBar. If I switch their positions, only the last one ever works. Except, if I comment out the code relating to JSONDownloadService in the last tab, THEN the first one works fine. It seems that whichever component last uses it prevents the rest from updating. How can I make this work using react-native-navigation or react-navigation ?

Thanks in advance for any help!

Answer 1

It turns out, the reason TabBarIOS worked and react-navigation and react-native-navigation didn't was because the latter two load all the tabs at once. In this case it overloaded the JSONDownloadService component.

I was able to fix it in react-navigation at least using this code:

const MyApp = TabNavigator({
  Sports: { screen: Sports },
  News: { screen: News },
}, {
  lazy: true, //used to be called "lazyLoad"
});

it just causes the app to lazily load the content for each tab.