CODEWITHSUNDEEP
javascriptandroidreact-nativereactjs
Ben Taliadoros
Ben Taliadoros

Reputation: 9361

React Native loading screen (conditional render)

I am trying to render a view in a React Native Android app when a HTTP call has completed.

My render method:

render: function() {
    if (this.state.obj.name) {
        return this.renderPage();
    } else {
        return (<Loading />);
    }
}

< Loading /> contains simple View and Text elements which display "Loading".

I call the network request in componentDidMount():

componentDidMount: function() {
    var self = this;

    SomeService.getObjById(1).then(function(data) {

        var obj = JSON.parse(data._bodyText);

        self.setState({
            obj: obj
        });
    });
},

However, when I update the state and instantiate 'obj' (which now has a name prop) render is recalled, it returns render page but the view does not update.

My renderPage method works when it is light like:

renderPage: function() {
    return (
        <View><Text>Hello</Text></View>
    )
}

But when it has more than say 6 lines of code it seems it doesn't update.

Any idea why event though the conditional returns different components when the call is finished, the actual view does not update?

Upvotes: 0

Views: 2252

Answers (1)

Ben Taliadoros
Ben Taliadoros

Reputation: 9361

I solved this by making the request before the change of view.

This still didnt work but I added a setTimout(function(){}, 0) around the navigator.push() and this worked, as it pushed the 'push' to the end of the call stack.

Not amazing, but works

Upvotes: 1

Related Questions