Snackbar goes offscreen with modals/back button [Android]

[ayazhussein]

SnackBar.show({
        title: "Timeout, reverting to old one...",
        duration: SnackBar.LENGTH_LONG,
        backgroundColor: "#493d46",
});
this.props.navigation.dispatch({
    type: NavigationActions.BACK,
});

It does show on IOS but it doesnt on Android... using

react-navigation

@cooperka

[cooperka]

Hmm, I haven't tested this yet but I'm guessing the snackbar gets attached to the current scene and goes offscreen along with the scene as it gets popped. Thanks for the bug report! I'll see what can be done.

I think the best solution would be to find the real root view that everything is nested under and show the snackbar on that one, instead of the current activity's view. Hopefully this is possible with RN.

[cooperka]

Official workaround:

In the meantime, I'd suggest just adding a setTimeout before showing the snackbar so it gets attached to the scene below instead of the scene being popped.

[iRoachie]

I've been using the setTimeout method for dismissing modals too. Works great. Currently have it set at 200ms

[ayazhussein]

I don't know if it's a bug or it's on my end but if I call Snackbar.show() directly after closing a modal, it doesn't show but if I close the modal and do a network call and then show Snackbar on the response, it does show...

[ayazhussein]

although on IOS does work :D, the bug is only on android...

[iRoachie]

This is what i'm doing. I have the parent showing the snackbar instead.

  // In modal
  async saveEdits(user: User) {
    this.setState({
      workingOverlayShowing: true
    })

    // Simulate network request
    this.props.updateUserInfo(user)
    await new Promise((resolve: any) => setTimeout(resolve, 2000))

    this.setState({
      workingOverlayShowing: false
    })

    this.props.showSuccessMessage()
  }

// In Parent
  async showSuccessMessage() {
    this.toggleEditModal()

    await new Promise((resolve: any) => setTimeout(resolve, 100))

    Snackbar.show({
      title: 'Changes saved',
      duration: Snackbar.LENGTH_SHORT
    })
  }

[cooperka]

@ayazhussein it's definitely a bug; the snackbar appears on the modal that you just dismissed when really it should be appearing on top of everything irrespective of what's currently on top of the stack. setTimeout is a decent workaround, but I'll try to fix this in the library soon.

[mahomahoxd]

Is this being fixed? I'm having the same issue with closing the modal (I think the animation is taking long so the snackbar shows on the closed modal). I fixed it by the setTimeout function, although it doesn't feel as clean as it should be. I might be able to take a look if you can point me where I should look

[cooperka]

Thanks for the offer @mahomahoxd -- support for modals was added in https://github.com/cooperka/react-native-snackbar/pull/17 and this is a remaining bug that hasn't been addressed yet. If you could help I'd really appreciate it; that PR would be a good place to start looking. Cheers.

[sabrimev]

I was having same issue. It didn't appear after loading layout. So I just set timeout like this;

setTimeout(() => { Snackbar.show({ text: errorText, duration: Snackbar.LENGTH_LONG, }) }, 300)

[Minishlink]

I don't really like having a timeout so I've forced the snackbar to show on the main view instead of the modal in the areas of the app where there is a loading overlay. https://gist.github.com/Minishlink/fc60bce597cf3564d442c367418a89bf

[cooperka]

Hopefully this PR improves things: https://github.com/cooperka/react-native-snackbar/pull/179 (released in v2.4.0)

[iamrohitagg]

This issue occurs for me only on Android. I am showing a Modal as loader for my app and whenever the modal is open, the SnackBar does now show. I had to use timeout for getting it work. Hopefully the issue is resolved in latest build.