Does there have a more beautiful way to configure node on the List?

[h3l]

Question

The demo use componentDidMount to configure the node like below:

componentDidMount: function() {
    // ScrollView
    RCTRefreshControl.configure({
      node: this.refs[SCROLLVIEW],
      tintColor: '#05A5D1',
      activityIndicatorViewColor: '#05A5D1'
    }, () => {
      this.setTimeout(() => {
        RCTRefreshControl.endRefreshing(this.refs[SCROLLVIEW]);
      }, 2000);
    });

    // ListView
    RCTRefreshControl.configure({
      node: this.refs[LISTVIEW]
    }, () => {
      this.setTimeout(() => {
        RCTRefreshControl.endRefreshing(this.refs[LISTVIEW]);
      }, 2000);
    });
  },

but in Performance, it recommend to use a LoadingPage before navigator transitions.so my render function code is like below:

  render: function(){
    if(this.state.isLoading){
      return <LoadingPage />
    }
    return(
        <ListView
          ref="ListView"
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}/>
    )
  },

so when the componentDidMount be triggered, there is no ListView but a LoadingPage.

Solution(not beautiful)

the Pseudo code is below

var ExamplePage = React.createClass({
  mixins: [utilsMixin, TimerMixin],
  getInitialState: function(){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows([]),
      isLoading: true,
      isRefreshControlLoaded: false
    }
  },
  _fetch: function(){
    fetch(url)
    .then((res) => {
      return res.json();
    })
    .then((resJson) => {
      if(this.state.isRefreshControlLoaded === true){
        RCTRefreshControl.endRefreshing(this.refs["ListView"]);
      }
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(resJson),
        isLoading: false,
      });
    })
    .catch(e => {
      console.log(e);
    })
    .done();
  },
  componentDidMount: function(){
    InteractionManager.runAfterInteractions(() => {
      this._fetch();
    });
  },
  componentDidUpdate: function(prevProps, prevState){
    if((this.state.isRefreshControlLoaded === false) && (this.state.isLoading === false)){
      // ListView 
      this.setState({isRefreshControlLoaded: true});
      RCTRefreshControl.configure({
        node: this.refs["ListView"],
      }, () => {
        this._fetchData()
      });
    }

  },
  _renderRow: function(rowData){
    return (<Text>rowData</Text>);
  },

  render: function(){
    if(this.state.isLoading){
      return <LoadingPage/>
    }
    return(
        <ListView
          ref="ListView"
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}/>
        );
  },
});

Does there have a more beautiful way to solve this problem?