Non-stop spinner.

[Arkanine]

Sometimes spinner not stops even when visible param receive "true".

[comountainclimber]

Im experiencing the exact same issue after upgrading to react-native 34.1... The spinner works as expected most of the time but then fails to turn off under certain circumstances forcing me to exit the app - this appears to only occur on iOS

[comountainclimber]

UPDATE: downgrading from react-native 34.1 => .33 solved the issue... it doesnt seem to have anything to do with the react-native-loading-spinner-overlaypackage but rather an update to the ActivityIndicator API which I dont currently have time to track down at the moment

[sergiocloud]

same issue here

@comountainclimber isn't good idea downgrading react-native to fix a component bug

[comountainclimber]

@sergiocloud I think you would agree its better than having the entire application non functional

[norikt]

I suspect that the cause is setting Modal visible to false not working...

[b8ne]

Hey guys can you post your implementation or steps to reproduce?

[damir-sirola]

Might be related to facebook/react-native#10471 ?

[gsavvid]

I have the same issue. In random cases but quite often the spinner won't disappear even though I set visible to false. I'm using RN 0.33.0. It happens only in iOS whereas it works perfectly fine in Android.

@b8ne Sample code:

 render() {
    if (this.state.isFetching) {
      return (
        <Spinner visible={this.state.isFetching} />
      )

    } else {
      return (
        <VerticalList data={this.state.data.components}/>
      )
    }
  }

Initially, this.state.isFetching is set to true and the Spinner is shown. Later it's set to false, the VerticalList is rendered but the Spinner keeps spinning on top of it. I've tried several different variations of the above code but without any luck. For example, I've also tried the following but the result remained the same (the VerticalList is rendered and the Spinner keeps spinning on top of it):

  render() {
      return (
        <View style={{flex:1}} >
          <Spinner visible={this.state.isFetching} />
          <VerticalList data={this.state.data.components}/>
        <View />
      )
  }

[b8ne]

Hey @gsavvid sorry ive been working on my apps backend lately so havent looked at much RN stuff. Just spent a bit of time looking into it and im tending to agree with @damir-sirola that its related to the iOS issue of not updating UI correctly after state change. Ill have a play around tomorrow :)

[gsavvid]

I also think it's related to Modal. I've implemented a workaround using ActivityIndicator in a View and the problem seems to have been resolved but I don't think it's such a nice solution.

[mattotodd]

+1

[gillesBzk]

+1

[prithsharma]

Any update on this?

[comountainclimber]

Any updates on this?? Has anyone found any work arounds currently running rn 39.0 with "react-native-loading-spinner-overlay": "0.4.1" and this issue seemingly occurs completely randomly

[comountainclimber]

I can confirm it is definitely related to facebook/react-native#10471

You will only ever see this issue when attempting to combine Alert component with the busy spinner...

[niftylettuce]

Same issue here, with Alert in combination on later versions of RN, still an issue.

[niftylettuce]

Here's a temporary fix everyone (just wrap it with a setTimeout of like 100 ms, seems to work for me hahaha)....

this.setState({ spinner: false });
setTimeout(() => {
  Alert.alert('Oops!', err.message);
}, 100);

cc @comountainclimber @prithsharma @gillesBzk @mattotodd @gsavvid @b8ne @damir-sirola @norikt @sergiocloud @Arkanine

[drinkingcode]

finally, I solve this problem as following:

`export default class Loading extends Component{

constructor(props){
    super(props);
    this.state={
        visible:this.props.visible
    };
    this._show=this._show.bind(this);
    this._hide=this._hide.bind(this);
}

render(){
    return(
        <Modal
            animationType={'none'}
            transparent={true}
            visible={this.state.visible}
            onRequestClose={this.props.onDismissLoadingCallback}>
            <View style={{flex:1}}/>
            <View style={{
                height:80,
                width:80,
                alignItems:'center',
                justifyContent:'center',
                backgroundColor:'#3434347f',
                borderRadius:10,alignSelf:'center'}}>
                <ActivityIndicator
                    animating={true}
                    size={"large"}
                    color={'white'}
                />
            </View>
            <View style={{flex:1}}/>
        </Modal>
    );
}

_show() {
this.setState({visible:true});
}

_hide(){
this.setState({visible:false});
}

`

it works well !

[ithieund]

Same for me,
Upgrading to 0.4.1 does not help.

[deepaksisodiya]

@niftylettuce thanks :)

[pwoltman]

Another workaround, assuming you are having the issue of the spinner not dismissing as desired when an Alert has been used on iOS, is to update the visible property when dismissing the Alert itself.

For example:

Alert.alert(
  'Alert Title Goes Here',
  'Alert Message Goes Here,
  [
    {text: 'OK', onPress: () => this.setState({spinnerVisible: false})}
  ],
  { cancelable: false }
)

<Spinner visible={this.state.spinnerVisible} textContent={"Processing..."} textStyle={{color: '#FFF'}} />

I add the cancelable: false so that Android users can't dismiss without clicking the OK, though this issue doesn't seem to exist on Android so its likely unnecessary.

[saeropark]

mine works. if anyone needs.

basically mine will spin until data is fully loaded.
important to note is the visible state

RN 0.43

class MyList extends React.Component {
  static navigationOptions = {
    header: null,
  }
  constructor(props) {
        super(props);
        
        this.state = {
            visible: true,
            dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2)=> row1 !== row2
            })
        };
    }

    componentDidMount() {
            this.fetchData();
    }

 
    // --- calls Google API ---
    fetchData() {
        fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            responseData = this.removeDuplicates(responseData);
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData),
                visible: false,
            });
        })
        .done();
    }
    render() {
        return (
          <View style={styles.mainContainer}>
          
                  <Spinner visible={this.state.visible} textContent={"Loading..."} textStyle={{color: '#FFF'}} />
           
            <ListView
                dataSource = {this.state.dataSource}
                renderRow = {this.renderBus.bind(this)}
                style = {styles.listView}
            />
            </View>
            
        );

Dynamic JSON url finish loading, the spinner will stop. hope it helps.

[tatva-nisarg]

Any updated on this?

[niftylettuce]

Is there a particular version this broke on? Or react native version?

…

On Jun 1, 2017 11:06 PM, "Nisarg Thakkar" ***@***.***> wrote: Any updated on this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#30 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAf7hWtZe0IpyN1mENohUV0yjhWL4CPaks5r_5hIgaJpZM4KP0j3> .

[tatva-nisarg]

I am using
React native : 0.39.2
React native Cli : 1.3.0

I am trying to debug your file and I found that model was not close while visibility is false any idea about it?

[mealbarracin10]

i am using
react-native-cli: 2.0.1
react-native: 0.46.1

and don't stop spinner, Any updated on this ?

[DoubleOTheven]

This issue still exists. note: I am not using an alert, and the Activity Indicator spins forever after the component that rendered it has unmounted. The RN ActivityIndicator does not produce this error, so I think there is a bug in this library. Maybe a race condition?

I'm using react-native: 0.48.4

[DoubleOTheven]

I built my own modal spinner, and have the same issue. The problem is that the RN Modal component is never dismissed. This happens one out of five times. Any ideas for how to fix this?

[niftylettuce]

This solution does not work? @Sonblind @mealbarracin10 @tatva-nisarg

#30 (comment)

[DoubleOTheven]

@niftylettuce I am not using an Alert. I am changing the navigator.

[DoubleOTheven]

@niftylettuce The issue is that the react component will sometimes unmount before unmounting the modal component inside of this library.

Solution:

When implementing, add the loading screen at the root level and control it by a global store vs having multiple loading spinner components inside the children. This ensures that the parent component is always in memory and can unmount the modal component inside the library.

I'm using mobX, so I achieve this by calling LoadingScreenStore.setIsVisible(true) from any component that would need it. I have not see the bug anymore after doing it this way. 👍

@mealbarracin10 @tatva-nisarg

[derakhshanfar]

same issue for me

[mrgcohen]

@derakhshanfar Does { loading && <Spinner /> } rather than <Spinner visible={loading} /> work?

[aouaki]

It does not change anything on my and @mrgcohen

[izikandrw]

still a problem with Alerts RN 0.54.4

[MedinaGitHub]

a solution that worked for me, when I make it visible true and then visible false very quickly it falls, so with a setTimeout in the false it is fixed.

WORK
this.setState({ visible:true })

setTimeout(() => {

              this.setState({ visible:false })  

            }, 3000);

NOT WORK
this.setState({ visible:true })
this.setState({ visible:false })

[yingdongzhang]

@MedinaGitHub

Just FYI

this.setState({ visible:true })
this.setState({ visible:false })

won't work because setState is async, there's a callback function you can pass into setState:

this.setState({ visible: true }, () => { this.setState({ visible: false }) })

[mrjackyliang]

Just re-confirming here: Putting a delay on the Alert solves the issue. In addition, not sure if it's also related to my problem, hiding the Modal causes a setState on unmounted component error.

[mbret]

Using a delay on the alert does not always solves this issue. Most of the time it will but sometimes it will not and you would use another delay value... You can still use a rather long delay to cover most of the case if not every cases. ex: 300ms

[Darking360]

I've tried using delays or hiding the component if not loading but spinner mantains on in iOs always, using this code:
{ loading && ( <Spinner visible={loading} textContent={''} textStyle={styles.colorWhite} /> ) }

[hungdev]

i resolved by using set timeout for alert.

      setTimeout(() => {
        alert('Invalid username or password!')
      }, 500);

[niftylettuce]

I'm going to document this solution along with using it in the root in the README of this project shortly.

[yeomann]

while this might be a solution but i'm using redux also since states are being managed by redux, it will be a long wrong around to call alert and sometimes or i think most of the time. i don't need to show alert as well. i don't know how this is a fix.

maybe, its modal fault. should you try react-native-modal instead, i don't know

[cristianoccazinsp]

Do we really need to wrap all our alerts in a timeout in order for this to work properly? Seems like a bad solution.

[niftylettuce]

Pull requests to fix bugs are accepted.