Files
react-native/ReactAndroid
Nate 8094377d32 Possible fix for #9023: Use View.INVISIBLE instead of View.GONE to hide ActivityIndicator (#25354)
Summary:
On Android, if the ActivityIndicator component is initially set to `animate={false}`, it does not display if later set to `true` (https://github.com/facebook/react-native/issues/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 https://github.com/facebook/react-native/issues/9023

## Changelog

[Android][fixed] - ActivityIndicator appears as expected when `animated={false}` is later set to `true`.
Pull Request resolved: https://github.com/facebook/react-native/pull/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
2019-06-24 02:11:08 -07:00
..
2018-05-27 15:17:55 -07:00

Building React Native for Android

See the docs on the website.

Running tests

When you submit a pull request CircleCI will automatically run all tests. To run tests locally, see Testing.