NativeBase: this.requestAnimationFrame is not a function appears when going in and out of fullscreen mode
I have gone through these following points
- Check latest documentation: https://docs.nativebase.io/
- Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
- Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
- Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
- [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
- [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/
Issue Description
When playing a video in our app and we go in and out of fullscreen mode the simulator throws the error this.requestAnimationFrame is not a function
When using a prior version of native-base (2.13.12) this bug did not exist in our app. Once we upgraded to native-base version 2.13.13, the bug started to appear.
We’ve forked the Native-base repo and implemented the following workaround in the node_modules/native-base/src/basic/Tabs/index.js file:
And in the node_modules/native-base/dist/src/basic/Tabs/index.js file:
node, npm, react-native, react and native-base version, expo version if used, xcode version
node: 10.15.3 react-native: 0.60.0 react: 16.8.6 native-base: 2.13.13 xcode: 11.1 (11A1027)
Expected behaviour
Should not throw an error when going in and out of fullscreen mode
Actual behaviour
throws an error when going in and out of fullscreen mode
Steps to reproduce
Launch app and play a video Then click fullscreen button to play video in fullscreen mode
Is the bug present in both iOS and Android or in any one of them?
Yes, bug is present in iOS and Android.
Any other additional info which would help us debug the issue quicker.
###Important
If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 12
- Comments: 40
Commits related to this issue
- Update index.js from GeekyAnts/NativeBase/issues/3206 — committed to fredhansen25/NativeBase by fredhansen25 4 years ago
- Fix request animation call, fixes #3206 — committed to dlau-github/NativeBase by dlau-github 4 years ago
- Fix request animation call, fixes #3206 — committed to dlau-github/NativeBase by dlau-github 4 years ago
- Fix request animation call, fixes #3206 — committed to dlau-github/NativeBase by dlau-github 4 years ago
- Fix request animation call, fixes #3206 — committed to dlau-github/NativeBase by dlau-github 4 years ago
@tejparekh if you don’t want to mess around with manually changing files, you could temporarily import @dgeorgiev’s handy PR into npm in place of
native-base:"native-base": "Healthyco/NativeBase#feature/fix-request-animation"Or
npm i/yarn addHealthyco/NativeBase#feature/fix-request-animationJust remember to subscribe to PR #3218 changes and revert back to importing
native-baseonce it’s merged in.Hey, pushed a PR with a fix for this https://github.com/GeekyAnts/NativeBase/pull/3218
Guys I did the same thing as the original post. Read it.
Fork the library to your organisation/user
Go to native-base/src/basic/Tabs/index.js file: Find "this.requestAnimationFrame(. " invocation, and add before it this.requestAnimationFrame &&. (If this function is undefined, the AND gate && will not allow the rest of the expression to be executed)
Go to /native-base/dist/src/basic/Tabs/index.js file: Find the same function and add the same expression before it
Add your changes, commit and push to your own NativeBAse repo
Install by installing from the repository you forked to, instead of npm
yarn add github:YOUR_GIT_ORGANISATION_OR_USER_NAME/NativeBaseThis will cause issues switching landscape and portrait orientation in the view you had the tabs.
Can we expect an update to be released any time soon with this bugfix? Kind of frustrating having a redbox every time I open certain screens
@tyhour it’s good that we can use forked packages with fixes (thanks for that) but the thing is, if the maintainers don’t think this is an issue at all, in months, and they keep releasing new versions that still contains this “bug”, maybe this is not a “bug” but just we are using this library the wrong way or maybe using incompatible packages, don’t know.
It would be appreciated to get just some kind of official statement by the maintainers but I understand it’s not easy dealing with all these issues here, this became a big project and we are using it for free so I totally understand, just wondering why are we getting this error and everybody else in the world is not…
When change screen orientation crashes
Same issue. I had to downgrade to 2.13.12 and fix in my node modules some issues with Toast and Item because of useNativeDriver is required. And on Tabs this issue when you rotate your device.
Waiting For Solution My Environment: React Native: 0.63.2 Native Base: 2.13.13 When i Rotate the Android Device then I’m Seeing this error
This is not neccessary, just edit the code in src directory. Use the
npm run prepublishcommand, this will compile your code to dist, than commit it to your fork.I already have two corrections made in native-base.
I’m using the Patch Package library (https://github.com/ds300/patch-package) to make these corrections.
Below is the patch file with this “this.requestAnimationFrame” correction and another one related to the use of the Picker library.
native-base+2.13.14.patch.zip
I installed this but didn’t work! @elilambnz Can you explain with more details?
So v2.13.15 out and this is still an issue unfortunately. So maybe it’s not a library bug but just the way we are using it?
Latest build crashes all the time because of this and it has been that way for a long time now so I am looking for other options. What is the next best thing for React Native? Seems like these are the top ones I can find…
https://github.com/react-native-elements/react-native-elements https://akveo.github.io/react-native-ui-kitten https://callstack.github.io/react-native-paper
@elilambnz I cleared cache & reinstalled; now working! Thanks!!!