cooperka / react-native-snackbar

:candy: Material Design "Snackbar" component for Android and iOS.
Other
823 stars 152 forks source link

Snackbar not showing when called from a Promise.then()? #67

Closed xemasiv closed 6 years ago

xemasiv commented 6 years ago

Below code works:

import Snackbar from 'react-native-snackbar';

// ...

          <Button onPress={
            ()=>{
              Snackbar.show({
                title: 'Log-in successful',
                action: {
                  title: 'OK',
                  color: 'yellow'
                }
              });
            }
          }>
            <Text>Test Snackbar</Text>
          </Button>

But this one where I use promises doesn't:

import Snackbar from 'react-native-snackbar';

// ...

          <Button onPress={
            ()=>{
              const requestPermissions = () => {
                const permissions = ['public_profile', 'email'];
                LoginManager
                  .logInWithReadPermissions(permissions)
                  .then(({grantedPermissions, isCancelled})=>{
                    if (!isCancelled) {
                      if (grantedPermissions.length !== permissions.length) {
                        requestPermissions();
                      } else {

                        AccessToken.getCurrentAccessToken().then((data) => {
                            console.log(data);
                          });
                        console.log('hey1');
                        Snackbar.show({
                          title: 'Log-in successful',
                          action: {
                            title: 'OK',
                            color: 'white'
                          }
                        });
                        console.log('hey2');

                      }
                    } else {
                      console.log('Login is cancelled bruh.');
                    }
                  }, (error)=>{
                    console.log('Login failed with error bruh: ' + error);
                  });
              };
              requestPermissions();
            }
          }>
            <Text>Log-in with Facebook</Text>
          </Button>

Any clues on what's going on with this behavior? I've tried looking in the closed issues but haven't found anything similar :100: Thanks

Edit: I've also tried attaching Nuclide's adb logcat debugger, there are no Java errors at all.

Edit: I even tried Toast instead, it worked. I'm wondering why this Snackbar won't.

ToastExample.show('Log-in successful.', ToastExample.SHORT);

cooperka commented 6 years ago

Is it possible the snackbar is being shown on a modal, and the modal is then immediately dismissed (or the app navigates to a new route)? In some cases on Android, the snackbar gets attached to a different screen and isn't visible (like #28).

Otherwise, do you mind giving me a link to a working example app?

xemasiv commented 6 years ago

I think you're right, I tested a regular promises and timeouts and boy it works.

That button actually triggers a Facebook log-in, hence their screen overlay of their loading screen and log-in screen kinda takes over for some time then just disappears. I think this library's current behavior is quite prone to unpredictability on the way it depends on an existing screen / modal to attach to.

Would love to help but I don't understand Java :100: lol

Edit: Hey man just an update, I just added a timeout instead it now works gracefully and shows 100% of the time.

                        setTimeout(()=>{
                          Snackbar.show({
                            title: 'Log-in successful',
                            action: {
                              title: 'OK',
                              color: 'yellow'
                            }
                          });
                        }, 1000);
cooperka commented 6 years ago

Thanks for the update @xemasiv, glad you found a workaround! I'd love to make it more robust; if you ever feel like making a PR I'm glad to accept one.

chahalrohit commented 3 years ago

use setTimeout i.e setTimeout(() => { Snackbar.show({ text: responseJson.message duration: Snackbar.LENGTH_SHORT, }) }, 200);