React-Native ActivityIndicator does not hide after animation is completed

Question

I have an ActivityIndicator that is displayed during fetch loading, and the wheel disappears when componentDidMount starts , but it also keeps the block space in the layout blank. I guess how to unmount this component, but everything works for me.

I am currently working with these versions:

react-native-cli: 2.0.1
react-native: 0.40.0

This is part of the code I'm using:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ... // Couple more components here
  ActivityIndicator,
} from 'react-native';

import NewsList from './NewsList';

export default class HomeView extends Component {

  constructor(props) {
     super(props);
     this.state = {
       noticias: [],
       animating: true,
     };
   }

componentDidMount(){
    fetchFunction() // My fetch function here
      .then(data => this.setState({ data:data }))
      this.state.animating = false
  }

render() {

    return (
        <View>
            <NewsList data={data} /> // My custom component

            <ActivityIndicator
            animating={this.state.animating}
            style={[{height: 80}]}
            color="#C00"
            size="large"
            hidesWhenStopped={true}
            />
        </View>
    );

  }
}

PS: I do not use Redux.

ActivityIndicator with great animation. Empty space when animation is set to false.

Answer 1

JSX , https://facebook.imtqy.com/react/docs/jsx-in-depth.html

ActivityIndicator DOM,

import React, { Component } from 'react';
import { View, ActivityIndicator } from 'react-native';

import NewsList from './NewsList';

export default class HomeView extends Component {
  state = {
    data: [],
    isLoading: true,
  }

  componentDidMount() {
    fetchFunction()
      .then(data => this.setState({ data, isLoading: false }))
  }

  render() {
    const {data, isLoading} = this.state;

    return (
      <View>
        <NewsList data={data} />
        {isLoading && (
          <ActivityIndicator
            style={{ height: 80 }}
            color="#C00"
            size="large"
          />
        )}
      </View>
    );
  }
}

Answer 2

setState, , .

this.setState({ animating: false })

this.state.animating = false