React-Native ActivityIndicator doesn't hide after animation finish

Question

I have an ActivityIndicator that shows while fetch is loading and the wheel disappears when componentDidMount is fired, but keeps and empty block space in the layout. I'm guessing how to unmount this component but anything worked for me.

I'm 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'm not using Redux.

ActivityIndicator with animation working fine The empty space when animating is set to false

Topeka

this.state.animating = false why didn't you use setState as in the previous line? – Ridgeling

I changed to: .then(data => this.setState({ data:data, animating: false })) and got the same results – Topeka

Answer 1

I recommend you to read more about JSX on how to show content conditionally https://facebook.github.io/react/docs/jsx-in-depth.html

I would completely remove ActivityIndicator from the DOM when we are not loading anything

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>
    );
  }
}

Arezzo

Thank you! this help me a lot. I will check the JSX docs. Now is working as expected :) – Topeka

If all is ok mark this answer as correct so others find it easily :) – Arezzo

Answer 2

You should be using setState if you want your Component to be rendered again.

this.setState({ animating: false })

instead of

this.state.animating = false

Ridgeling

I forgot to mention I'm new with React (like a week or so), so I didn't noticed the error in that line. Thanks for taking the time to mention it, now I fix it but the "blank" space persists :( – Topeka