ActivityIndicator remains on screen after being removed

I put an ActivityIndicator on screen, which should be removed after some time (i.e. when the data arrives). But the problem is that it still remains on screen even after it is removed (or not outputted) in the render function. In addition, the backgroundColor of the View above disappears, too.

I also found out that doing one of the following things fixes the problem, but I don’t know why:

• Unset the zIndex for the View above (having zIndex here has no reason what so ever, but I needed this in the project I was working on)
• Set a backgroundColor for the View element containing this ActivityIndicator.

Public repository with runnable example Inline code:

export default class TestReport extends Component {
    state = {
        showIndicator: true,
    };

    componentDidMount() {
        setTimeout(() => this.setState({showIndicator: false}), 3000);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.firstHalf}>
                </View>
                <View style={styles.secondHalf}>
                    {this.state.showIndicator
                        ? (<ActivityIndicator size="large"/>)
                        : (<Text>hello</Text>)}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    firstHalf: {
        zIndex: 1,
        flex: 1,
        backgroundColor: "#2f2",
    },
    secondHalf: {
        flex: 1,
    },
});

Here’s a screen recording of what happens:

• What should happen: the indicator should be removed after 3 seconds and the message hello should appear.
• What happens: the indicator remains after the 3 seconds, and the message hello appears. In addition, the backgroundColor of the View above disappears.

---

Versions:

• react-native: 0.41.2
• react: 15.4.2
• react-native-cli: 2.0.1
• devices:
  • Nexus 5 - Android version: 7.1
  • LG G2 mini - Android version: 5.0.2

[janicduplessis]

Looks like a bug with zIndex and view collapsing, the current implementation of zIndex is pretty buggy because it reorders views instead of just changing the drawing order.

As a workaround you could either

• Remove the zIndex, if possible
• Add collapsable={false} to your view that wraps the activity indicator

[farzadab]

If I do it this way, it works, but it still occupies space:

<ActivityIndicator size="large" animating={this.state.showIndicator}/>
{this.state.showIndicator ? null : (<Text>hello</Text>)}

I can hide it like this, which is not pretty:

<ActivityIndicator size="large" animating={this.state.showIndicator}
    style={this.state.showIndicator ? null : {height: 0}}/>
{this.state.showIndicator ? null : (<Text>hello</Text>)}

But if I do it this way, it doesn’t change anything:

{this.state.showIndicator
    ? (<ActivityIndicator size="large" animating={this.state.showIndicator}/>)
    : (<Text>hello</Text>)}

I’m not particularly interested in getting this piece of code to work. I’m just asking, am I doing something wrong or is this not the expected behavior?