Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Possible fix for facebook#9023: Use View.INVISIBLE instead of View.GO…
…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