reactjs - React component does not react to mobx observable data -

i using mobx react native project. please consider store class:

class birds {     @observable listone = [];     @observable fetchinglistone = false;     @observable fetcherrorone = '';      @action setlistone = () => {         this.fetchinglistone = true;         api.getlist()             .then((data) => {                 this.listone.replace(data);                 this.fetchinglistone = false;             })             .catch((error) => {                 this.fetchinglistone = false;                 this.fetcherrorone = error;             });     }; } 

and react component:

@inject('birdstore') @observer export default class flat extends react.component {     componentdidmount() {         this.props.birdstore.setlistone();     }      _renderheader = () => {         return <text style={styles.listheadertext}>             hello {this.props.birdstore.listone.length} {this.props.birdstore.fetchinglistone.tostring()}             </text>;     };      _renderitem = ({item}) => {         return <text style={styles.item}>{item.name}</text>     };      _renderfooter = () => {         if (this.props.birdstore.fetchinglistone) {             return <activityindicator/>         }         else {             return null         }     };      render() {         const datasource = this.props.birdstore.listone.slice();          return (                 <view style={styles.container}>                     <text>fetching: {this.props.birdstore.fetchinglistone.tostring()}</text>                     <flatlist                         style={styles.listcontainer}                         listheadercomponent={this._renderheader}                         data={datasource}                         renderitem={this._renderitem}                         keyextractor={(item, i) => item.id}                         listfootercomponent={this._renderfooter}                     />                 </view>         )     } } 

from above looks me that:

1. when flat component mounts, call method of store setlistone().
2. setlistone() sets fetchinglistone true , makes api call.
3. on component side, when fetchinglistone true, activityindicator displays, , in listheadercomponent should display true.
4. on store side, after successful/unsuccessful response, sets fetchinglistone false.
5. finally on component side, because fetchinglistone set false, activityindicator should not display , in listheadercomponent should display false.

however, not what's happening. here when setlistone() method called, after sets fetchinglistone true, component not react changes made after api call. , activityindicator keeps displaying , in listheadercomponent displaying true.

what doing wrong here? please me. thank you

update

i have added text component before flatlist. adding text component or console logging inside component class's render method makes flatlist react changes. don't know why happening though.

the problem running here probably, although flat observer component, flatlist not (it's built-in component after all). in setup _renderfooter , others part rendered render of flatlist, not of flatlist. hence not part of lifecycle of flat, of flatlist , such not tracked mobx

there 2 ways fix this, both pretty simple:

1) declare _renderitem observer component:

_renderitem = observer(({item}) =>     <text style={styles.item}>{item.name}</text> ); 

2) use inline anonymous observer component:

_renderitem = ({item}) =>      <observer>{         () => <text style={styles.item}>{item.name}</text>}     </observer>