Spinner shows even when I'm not on the screen it belongs to

[tbarsbay]

I have a native Android Activity with four tabs/Fragments in a ViewPager. Only one of the Fragments is written in React, and that's the view that has this Spinner. However, the Spinner shows up and takes the full screen even when I'm on another Fragment/tab.

In other words, the Spinner is getting rendered on top of native UI for a screen that it doesn't belong to.

Nexus 6 Android 7.0

[crazywako]

Same here

[facuacostag]

I'm having the same issue, any solutions out there?

[TarikFojnica]

Same here.

[TarikFojnica]

I discovered that if you are using react-navigation and have Stack Navigation nested under Drawer Navigation (my case), the component life cycle will break, and it will never unmount, but new screens will be pushed to the top. This can cause Spinner to show up on screens and components it doesn't belong to. It technically does, because the component never unmounted.

[Mbotes]

@TarikFojnica this is the same issue i've had with it, I am also using react-navigation.

[weslley39]

@TarikFojnica this is happening for me too. Any solution ?

[TarikFojnica]

@Mbotes @weslley39 Not really a solution because I did not have time to dig deeper into the issue, but you can always go back to use DrawerNavigator only, without nesting StackNavigator. That will solve this specific issue but you will loose the StackNavigator features.

I would be happy to hear a real solution too because this is not a particular react-native-loading-spinner-overlay, but rather a react-navigation issue.

[tbarsbay]

I should add that I was experiencing this issue and was not using react-navigation in my project.

[TarikFojnica]

@tbarsbay You can test if your componentWillUnmount function works properly in the component containing the spinner (or the main screen component). If does not, that is where the problem lies and you can track it from there.

I think the origin of the problem is the same. It's just that something else causes it in your case.

[Dhrupal]

Any solution for it?

[tosinbot]

Use a timeout before navigating to the next screen, for example

if(responseJson.msg === "not user login"){ this.setState({ isLoading: false, showCartModal: false, }) setTimeout(() => { Actions.login({type: 'reset', status: 0}) }, 1000) that's it!

[niftylettuce]

I'm documenting recommended implementation approach in the README shortly