Some times cause app crash. about react-native-loading-spinner-overlay

[ithieund]

Same for me.
App crash after sometimes showing spinner when calling fetch() and hiding spinner when fetch() done.

*** Assertion failure in __33-[RCTUIManager setFrame:forView:]_block_invoke(), /node_modules/react-native/React/Modules/RCTUIManager.m:440
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Could not locate shadow view with tag #1092'
*** First throw call stack:
(0x181d59900 0x1813c7f80 0x181d597d0 0x1826cca08 0x1001638e4 0x100b5dbf0 0x100b5dbb0 0x100b6a6c8 0x100b618a0 0x100b6c7e0 0x100b6c4d8 0x1819c1470 0x1819c1020)
libc++abi.dylib: terminating with uncaught exception of type NSException

Is there any fix for this bug?
Thanks

[lprhodes]

I'm seeing this too - it looks to be a timing thing, I would guess some kind of race condition with the state somewhere.

I find that using a timeout as shown below helped to prevent this error and also prevented occurrences when the spinner overlay doesn't get removed.

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

[lprhodes]

Nope, it doesn't on 0.41 sorry

…

________________________________ From: WillSmith <[email protected]> Sent: Friday, February 10, 2017 2:51:16 PM To: niftylettuce/react-native-loading-spinner-overlay Cc: Luke Rhodes; Comment Subject: Re: [niftylettuce/react-native-loading-spinner-overlay] Some times cause app crash. (#28) @KelvinEC<https://github.com/KelvinEC> upgrade react-native to 0.41.0 , it works fine ! — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#28 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAJ8rWNu3evPLkcIo6MSQfDP6i2nS0nxks5ra960gaJpZM4KBABz>.

[niftylettuce]

Does this still occur?

[kelvin-lima]

Some times. Im using a workaround at this moment.

[kelvin-lima]

It is occurring during a change of state from Hide to Show or vice-versa. In some moments, i change the state of visible variable and the spinner not change visibility.

[milesegan]

@KelvinEC What workaround are you using? I'm seeing something like this too.

[kelvin-lima]

So, @milesegan The Workaround not work. I removed the library completely and start using another strategy.

[prithsharma]

Any updates on this, this is happening quite frequently for me.
Although I'm using 0.2.3 right now - could this be something that got fixed in later versions?

[prithsharma]

@niftylettuce any idea on this one?

[nickrobinson352]

having same issue too !

[niftylettuce]

@SandroMachado can you help here

[SandroMachado]

This library does not use native code, so the issue is probably in RN.

I am using this library with RN 0.39.0 and RN 0.40.0 and I were not able to reproduce this issue.

Again, I believe that this is a RN issue and not an issue in the library, at least based in the crashlog.

Can someone create a test project that reproduces this?

[RobTS]

Having problems myself at the moment, the app is sometimes crashing on startup and my error matches this description: facebook/react-native#10845

I use the spinner very early in the application lifecycle, maybe it has to do with that. I can't say for sure the reason for that is actually this library, but as there was a similar issue open, I thought I'd attach mine here.

01-18 16:28:20.939 25968 26004 E AndroidRuntime: Process: com.icouldcall.android, PID: 25968
01-18 16:28:20.939 25968 26004 E AndroidRuntime: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.facebook.react.uimanager.ReactShadowNode.setStyleWidth(float)' on a null object reference
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at com.facebook.react.uimanager.UIImplementation.updateNodeSize(UIImplementation.java:151)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at com.facebook.react.uimanager.UIManagerModule.updateNodeSize(UIManagerModule.java:213)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at com.facebook.react.views.modal.ReactModalHostView$DialogRootViewGroup$1.run(ReactModalHostView.java:302)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at android.os.Handler.handleCallback(Handler.java)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at android.os.Handler.dispatchMessage(Handler.java)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at android.os.Looper.loop(Looper.java)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
01-18 16:28:20.939 25968 26004 E AndroidRuntime:        at java.lang.Thread.run(Thread.java:818)
01-18 16:28:20.941  3060  5034 W ActivityManager:   Force finishing activity com.icouldcall.android/.MainActivity

[drinkingcode]

@KelvinEC upgrade react-native to 0.41.0 , it works fine !

[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 !

[lprhodes]

I quite likely missed something here (looking at it through email) but this looks no different to a how you'd set it up normally?

…

________________________________ From: WillSmith <[email protected]> Sent: Monday, February 20, 2017 7:23:55 PM To: niftylettuce/react-native-loading-spinner-overlay Cc: Luke Rhodes; Comment Subject: Re: [niftylettuce/react-native-loading-spinner-overlay] Some times cause app crash. (#28) 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 ! — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#28 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAJ8rfwZUK9wChtWp4E8x2VmGCMBOMnbks5reVurgaJpZM4KBABz>.

[jmknoll]

Same issues here. RN v0.36.0.

I have the spinner inside of a Modal, and 100% of the time when I set visible to false it causes app to crash.

[Thyiad]

+1, rn 0.42

[Thyiad]

It crash on release mode

[cenkakin]

This is related with RN issue which is mentioned above. It is fixed and released on v0.43.3. I didn't face crashes after that version.

facebook/react-native#10845 (comment)

[Thyiad]

Yes, just find commit here: facebook/react-native@5873a22

Trying upgrade to 0.44 now.

[SandroMachado]

Closed by facebook/react-native#10845 (comment)

[jbolter]

This is still happening with RN 0.45.1 to me. When I remove the spinner the problem seems to go away but I haven't spent a ton of time debugging. I agree that it seems to be timing based since it is not consistent.

[jmknoll]

@jbolter I spent a bit of time debugging this issue a couple of months ago and, iirc, it was related to dismissing the modal containing the activity indicator while the indicator is still visible. I couldn't find a workaround, so I threw together a simple component which addressed the problem by showing/hiding the activity indicator directly. https://github.com/jmknoll/react-native-overlay-spinner

If you want to avoid a dependency, and since you're on RN 0.45, you can just use ActivityIndicator directly. https://facebook.github.io/react-native/docs/activityindicator.html

[jbolter]

@jmknoll Thanks! I'll give your lib a try since I would like the background overlay still which I don't think I can get with the ActivityIndicator directly.

[jmknoll]

@jbolter Great. If you run into any problems just open up an issue over there and I’ll try to get it addressed in a timely manner.

[jose920405]

Same issue here in "react-native": "0.51.0"

[beausmith]

Having the same issue with the Modal component in "react-native": "0.55.4" 🙁

Using a setTimeout around the setState which updates the visible prop of the Modal component works, albeit unreliably based upon the length of the timeout. After trying different lengths of time we settled on 1000 as a time that was long enough to "locate shadow view" but short enough to not annoy users.

If this doesn't work, I'll be taking the strategy suggested by @jmknoll to replace the Modal component from react-native with an absolutely positioned View component.