Skip to content

Commit

Permalink
Possible fix for facebook#9023: Use View.INVISIBLE instead of View.GO…
Browse files Browse the repository at this point in the history
…NE to hide ActivityIndicator (facebook#25354)

Summary:
On Android, if the ActivityIndicator component is initially set to `animate={false}`, it does not display if later set to `true` (facebook#9023)

For some reason, the layout width/height of the associated ProgressBar remains 0, despite the parent layout having the correct width/height:

![image](https://user-images.githubusercontent.com/590904/59955251-f8d2ef00-943d-11e9-8019-0977e19186b3.png)

I wasn't able to determine why this is the case, but I did notice that changing the visibility settings from `View.GONE` to `View.INVISIBLE` fixes the issue while not (as far as I can tell) having an impact on the React Native layout:

#### Before:

![before](https://user-images.githubusercontent.com/590904/59955177-a1cd1a00-943d-11e9-80da-876c99b7d5bf.gif)

#### After:

![after](https://user-images.githubusercontent.com/590904/59955183-a7c2fb00-943d-11e9-952b-892bdc23bd48.gif)

Using `View.INVISIBLE` appears to alleviate the issue.

This should fix facebook#9023

## Changelog

[Android][fixed] - ActivityIndicator appears as expected when `animated={false}` is later set to `true`.
Pull Request resolved: facebook#25354

Test Plan:
Link this branch to a new React native project with the following App.js class:

```javascript
import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  Button,
  View,
  ActivityIndicator,
  TouchableHighlight
} from "react-native";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      show: false
    };
  }

  hide = () => {
    this.setState({ show: false });
  };

  show = () => {
    this.setState({ show: true });
  };

  render() {
    return (
      <View>
        <ActivityIndicator
          animating={this.state.show}
          size="large"
          style={styles.indicator}
        />

        <ActivityIndicator
          animating={this.state.show}
          size="small"
          style={styles.indicator}
        />

        <View style={{ flexDirection: "row" }}>
          <Button title="Hide" style={styles.button} onPress={this.hide} />
          <Button title="Show" style={styles.button} onPress={this.show} />
        </View>

        <Text>Showing ? {this.state.show.toString()}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  indicator: {
    borderColor: "red",
    borderWidth: 1
  },
  button: {
    marginRight: 8
  }
});
```

Differential Revision: D15963366

Pulled By: cpojer

fbshipit-source-id: ee3df3fd84acbff342599dc6f4f4a391704876fa
  • Loading branch information
nhunzaker authored and M-i-k-e-l committed Mar 10, 2020
1 parent af26dd5 commit 49713d2
Showing 1 changed file with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ public void apply() {
if (mAnimating) {
mProgressBar.setVisibility(View.VISIBLE);
} else {
mProgressBar.setVisibility(View.GONE);
mProgressBar.setVisibility(View.INVISIBLE);
}
}

Expand Down

0 comments on commit 49713d2

Please sign in to comment.