React component does not respond to mobx observed data

Question

I am using mobX for my native project. Please consider this 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 this is the reactive 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} is {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 it seems to me that:

• When the component Flatis mounted, it calls the storage method setListOne().
• setListOne()sets fetchingListOneto true and makes an api call.
• On the component side, when the value is fetchingListOnetrue, an ActivityIndicator is displayed, and in the ListHeaderComponent it should be displayed as true.
• On the store side, after a successful / unsuccessful response, it sets fetchingListOneto false.
• , , fetchingListOne false, ActivityIndicator , ListHeaderComponent false.

, . , setListOne(), , fetchingListOne true, , api. ActivityIndicator , ListHeaderComponent - true.

? .

Text FlatList. FlatList . , .

Answer 1

, , , , Flat observer, FlatList ( , ). _renderFooter render FlatList, FlatList. , Flat, FlatList Mobx

, :

1) _renderItem :

_renderItem = observer(({item}) =>
    <Text style={styles.item}>{item.name}</Text>
);

2) observer:

_renderItem = ({item}) => 
    <Observer>{
        () => <Text style={styles.item}>{item.name}</Text>}
    </Observer>