CODEWITHSUNDEEP
javascriptreact-nativejsxuiactivityindicatorviewactivity-indicator
vtisnado
vtisnado

Reputation: 500

React-Native ActivityIndicator doesn't hide after animation finish

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

Upvotes: 7

Views: 14114

Answers (2)

Henrik R
Henrik R

Reputation: 4982

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

Upvotes: 22

RRikesh
RRikesh

Reputation: 14411

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

this.setState({ animating: false })

instead of 

this.state.animating = false

Upvotes: 4

Related Questions