Library incompatible with NativeStackNavigator from React Navigation (crashes app)

[goguda]

This library causes the whole app to crash on navigation pop() method when using the Native Stack Navigator from React Navigation:

skeleton-bug.mp4

I believe this is caused by the skeleton trying to update its state even after the parent component has been unmounted. To fix this, I believe a this.isMounted style check needs to be done within the component itself before updating its own state.

I'm mostly used to class-based React since this project has gotten so big and complex; I know that in class-based React, this would be accomplished by setting this.isMounted = true in componentDidMount() and this.isMounted = false in componentWillUnmount(), and wrapping any this.setState() calls like if (this.isMounted) {this.setState()}.

I wouldn't be the most comfortable implementing this with hooks like this library uses, perhaps someone can provide some insight on how this can be done with hooks and integrated into the library?

[chramos]

@goguda the issue happens only with pop()? what's about goBack()?

[KostasPik]

Has this issue been solved? I have the exact same issue with react navigation.

[warapolj]

    const [requestGoBack, setRequestGoBack] = useState(false)
    const navigation = useNavigation()

    useEffect(() => {
      return navigation.addListener('beforeRemove', (e) => {
        e.preventDefault()
        setRequestGoBack(true)
        setTimeout(() => {
          navigation.dispatch(e.data.action)
        }, 250)
      })
    }, [navigation])

    if (requestGoBack) {
      return <></>
    }

    return <Component />