Nativebase: Can't click button header react-nativigation v5 after show toast - native-base 2.13.13

[ngondat97]

After displaying the toast, I cannot work with the react-navigation v5 header

[gnepud]

same issus

[astrahov]

The bottom navigation also does not work if the toast was shown down

[droM4X]

same problem with react navigation v4

[astrahov]

It seems the issue is not related to React Navigation. I think the point is that there is some area underneath Toast that remains after Toast disappears.

[darrylyoung]

Thanks for reporting this already. I came here to do exactly that as for the past 20 minutes I've been wondering why anything in a header in my Expo app _suddenly_ stops working. Found out it's after a Toast has been displayed at the top.

I think the point is that there is some area underneath Toast that remains after Toast disappears.

Yeah, this seems to be exactly what it is as when changing my Toast position to bottom, the tab navigation stops working but the buttons in my header still work.

[teckel12]

I can confirm this as well with 2.13.13. Downgraded to 2.13.8 and problem went away.

[ilya-bmi]

I have same problem. Interface area underneath the toast freeze after toast disappear. RN 0.63.1 NB 2.13.13

[ilya-bmi]

The problem is in ToastContainer, with calling closeModal function. I've converted it to arrow function, it solved the problem.

[ilya-bmi]

3200

[hsjoberg]

Bottom tabs in react-navigation@5 doesn't work either after toast is shown.

[ImagineITSolutions]

Same issue

[komputerwiz]

The problem stems from the closeModal method not being called on ToastContainer.js:166:

this.closeModal.bind(this, reason);

bind doesn't call the function, but returns a new function with this and the reason argument bound to the given values. This could effectively be rewritten as:

(() => this.closeModal(reason));

The offending line should instead be changed to call the function:

this.closeModal.bind(this, reason)();
// or simply ;-)
this.closeModal(reason);

@ilya-bmi: Kudos for figuring out a solution! Looking at your pull request #3200 is what led me to see the underlying problem. The closeModal method doesn't need to be converted to an arrow function. The aforementioned change should be sufficient.

[ImagineITSolutions]

Will be good to see this released asap...

[walterholohan]

It is also related to https://github.com/GeekyAnts/NativeBase/issues/3203. After displaying a toast the component doesn't clean up properly after self and leaves an invisible container which is stopping the user from tapping on buttons that are displayed in the react-navigation header. https://github.com/GeekyAnts/NativeBase/pull/3171 should also be merged.

[Forsakenrox]

bug is still exist, after merge.

[xuansoncp94]

thanks @darrylyoung . wow. perfect

[hsjoberg]

Any progress on this one? I think a bugfix release is warranted.

[tameem92]

Same issue here.

[raazatul7]

@akhil-geekyants @SupriyaKalghatgi @shivrajkumar @sankhadeeproy007
Please help us with this!

[teajohnson90]

Same issue for me

[danigonlinea]

We have this problems in iOS (fab button is not clickable after displaying the toast).
In Android is working as expected.

Version 2.13.13

[alon7]

@komputerwiz thank you for posting the solution.
Initially it didn't work because I patched ToastContainer.js:166: but I also had to patch dist/src/basic/ToastContainer.js

I don't love this solution but hopefully it will be ok until they release the fix.

@danigonlinea, @teajohnson90 - use https://github.com/ds300/patch-package to solve it quickly

[nysamnang]

My temporary workaround solution:

1. In node_modules/native-base/dist/src/basic/ToastContainer.js, search for _this2.closeModal.bind(_this2,reason) and replace it with _this2.closeModal(reason).

2. In node_modules/native-base/src/basic/ToastContainer.js, search for closeModal(reason) and replace it with closeModal = (reason) =>, then also search for this.closeModal.bind(this, reason); and replace it with this.closeModal(reason);.

3. Using https://github.com/ds300/patch-package to patch the package.

4. run yarn add patch-package postinstall-postinstall to install the modules.
5. run npx patch-package native-base to making patches (It will create a folder called patches in the root dir and also you can commit this to git to share the fix with your team).

6. run npx patch-package to applying patches.

7. Done! :rocket:

PS: This fix has already merged #3200, so we have to wait until they release a new version.

[fairuzmn]

@nysamnang you're my life saver dude

[crobinson42]

@fairuzmn dude, don't jump of the ledge over a bug in native-base 😆

[hsjoberg]

@crobinson42 Tbh it's a pretty serious bug. I have to revert to normal Android Toasts for the moment being...
But yeah don't jump of the ledge lol.

[eggybot]

@nysamnang , thanks for this solution. Using the latest RN0.63.2 and latest React-Navigation, I would say this is the quick solution you needed for Nativebase v2.13.13

[mustafa-taheri]

@nysamnang , Bro.... a Big Bang thank you for the solution.

[walterholohan]

Version 2.13.14 was released 14 days ago which has the fix for this issue.

[hanykumar]

Hi @ngondat97 , we have updated NativeBase to v2.13.14. Closing for now. Please update and let us know if the issue still persists.