this.requestAnimationFrame is not a function appears when going in and out of fullscreen mode

[bubah]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] 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!

[Babazon]

We have to fork and fix it ourselves too. A PR would take a month to be reviewed and merge on the library. We will go back to installing from npm once it's fixed.

[sunviwo]

Please @Babazon , could you tell me how you fixed it? Facing the same issue for multiple hours now.

[ealmiladi]

We have to fork and fix it ourselves too. A PR would take a month to be reviewed and merge on the library. We will go back to installing from npm once it's fixed.

Yes, please post a solution for this.

[Babazon]

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/NativeBase

This will cause issues switching landscape and portrait orientation in the view you had the tabs.

[droM4X]

Go to /native-base/dist/src/basic/Tabs/index.js file: Find the same function and add the same expression before it

This is not neccessary, just edit the code in src directory. Use the npm run prepublish command, this will compile your code to dist, than commit it to your fork.

[shobujroy]

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/NativeBase

This will cause issues switching landscape and portrait orientation in the view you had the tabs.

Can you please help me? I'm new to react-native. Here is the code of that file.

` _handleLayout(e) { const { width } = e.nativeEvent.layout;

if (
  !width ||
  width <= 0 ||
  Math.round(width) === Math.round(this.state.containerWidth)
) {
  return;
}
this.setState({ containerWidth: width });
this.requestAnimationFrame( () => {
  this.goToPage(this.state.currentPage);
});

},`

[ealmiladi]

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/NativeBase This will cause issues switching landscape and portrait orientation in the view you had the tabs.

Can you please help me? I'm new to react-native. Here is the code of that file.

` _handleLayout(e) { const { width } = e.nativeEvent.layout;

if (
  !width ||
  width <= 0 ||
  Math.round(width) === Math.round(this.state.containerWidth)
) {
  return;
}
this.setState({ containerWidth: width });
this.requestAnimationFrame( () => {
  this.goToPage(this.state.currentPage);
});

},`

this.requestAnimationFrame && this.requestAnimationFrame( () => {
   this.goToPage(this.state.currentPage);
 });

You should also follow what @droM4X mentioned.

[shobujroy]

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/NativeBase This will cause issues switching landscape and portrait orientation in the view you had the tabs.

Can you please help me? I'm new to react-native. Here is the code of that file. ` _handleLayout(e) { const { width } = e.nativeEvent.layout;

if (
  !width ||
  width <= 0 ||
  Math.round(width) === Math.round(this.state.containerWidth)
) {
  return;
}
this.setState({ containerWidth: width });
this.requestAnimationFrame( () => {
  this.goToPage(this.state.currentPage);
});

},`

this.requestAnimationFrame && this.requestAnimationFrame( () => {
   this.goToPage(this.state.currentPage);
 });

Should follow what @droM4X said

Yes, I did it and it's fixed noq but the tab transitions still very slow. Is there anything that still I need to fix?

[ikroeber]

Same issue here when using Tabs component inside a Modal.

[imhuy]

same issues, I reinstalled version 2.13.8

[jaferi512]

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

[JsGvDev]

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.

[dgeorgiev]

Hey, pushed a PR with a fix for this https://github.com/GeekyAnts/NativeBase/pull/3218

[tejparekh]

Hello I am facing the same issues and I couldn't find a solution on this thread or the other threads mentioned in the comments here. Does the solution involve manually changing the file in the package?

I have upgraded from the 0.57 to 0.63 in steps and now I am able to compile the code but I am getting the Run time errors.

Current setup of core with native base.

"native-base": "^2.13.14", "react": "16.13.1", "react-emoji-render": "^1.2.4", "react-moment": "^0.9.7", "react-native": "0.63.2",

Thanks for the help. Appreciate getting some response soon.

[elilambnz]

@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 add Healthyco/NativeBase#feature/fix-request-animation

Just remember to subscribe to PR #3218 changes and revert back to importing native-base once it's merged in.

[yusufusta]

@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 add Healthyco/NativeBase#feature/fix-request-animation

Just remember to subscribe to PR #3218 changes and revert back to importing native-base once it's merged in.

I installed this but didn't work! @elilambnz Can you explain with more details?

[elilambnz]

@Quiec npm can install a package directly from a github URL. In this case, I'm swapping out the usual way of installing the native-base package with a forked feature branch found here that patches the issue. You can read more about the ways to install npm packages here.

If this doesn't answer your question, or the problem is not related to installing the patch, you could post any error messages you're getting. Alternatively, you could create a new issue on the appropriate repo and feel free to tag me in it.

[yusufusta]

@elilambnz Nope, my error same and I know npm. But even though I run your code, the error is the same, it doesn't change. In short, pull-request doesn't work (for me)

[yusufusta]

@elilambnz I cleared cache & reinstalled; now working! Thanks!!!

[HeyShinner]

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/NativeBase

This will cause issues switching landscape and portrait orientation in the view you had the tabs.

It works for me!

[comvenger-brandon]

Is this library dead / discontinued?

[Enalmada]

Is this library dead / discontinued?

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]

If you're after the tab navigation specifically, UI Kitten has a pretty nice Tab Bar component. I quite like the look of that library overall and would probably choose it today if I were to replace NativeBase.

[elilambnz]

@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 add Healthyco/NativeBase#feature/fix-request-animation

Just remember to subscribe to PR #3218 changes and revert back to importing native-base once it's merged in.

Just a reminder to everyone who used this workaround, PR #3218 has been merged in. You should be able to update your import for native-base by reinstalling through npm/yarn.

This issue should now be closed.

[ignaciotoptive]

@elilambnz I've just checked and #3218 is still open, so there's no reason to close this issue yet

[elilambnz]

@ignacioToptive oh, you're right, it's still open. Out of curiosity, does the latest version of native-base solve this issue for you? I updated to the latest and it seems to be ok on iOS, but I haven't tested Android yet.

In any case, my apologies! Maybe hold off switching the import just yet if it doesn't solve the problem.

[ignaciotoptive]

@elilambnz I'm on latest available version (2.13.14) and the bug is still present

[rdgoutiyama]

When change screen orientation crashes

[diogoaltoe]

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

[Andrerm124]

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

[janpaulalmanoche]

@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 add Healthyco/NativeBase#feature/fix-request-animation Just remember to subscribe to PR #3218 changes and revert back to importing native-base once it's merged in.

Just a reminder to everyone who used this workaround, PR #3218 has been merged in. You should be able to update your import for native-base by reinstalling through npm/yarn.

This issue should now be closed.

i did yarn add Healthyco/NativeBase#feature/fix-request-animation and it fixed my problem, im testing via android

[spaceboom73]

Okey, i'm solved this problem by comments above, all changes have in my fork https://github.com/spaceboom73/NativeBase Here solved problem of importing Picker and problem with requestAnimationFrame error. If you are lazy find solutions, use my fork repository with yarn add or npm i github:spaceboom73/NativeBase It's solution is temporary, while NativeBase not release new version

[edodusi]

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?

[tyhour]

use this package, (yarn add https://github.com/tyhour/NativeBase.git) I just fixed some issue and all warning with Native Base. Also fixed error (this.requestAnimationFrame is not a function appears). I wish this can help you. :)

[edodusi]

@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...

[lcastillo-evc]

I created my own PR (https://github.com/GeekyAnts/NativeBase/pull/3316) based on native-base v2.13.14 which I am currently using. It only has the fix for the TypeError and nothing else. Maybe they will fix this soon :)

[gino8080]

For me the problem is fixed in latest 2.15.2 version !

[majugurci]

For me this is still an issue using 2.15.2 on Android.

EDIT: After deleting node_modules and doing yarn install it is working now. I guess it hasn't updated correctly doing just yarn add native-base@2.15.2.

[HeyShinner]

For me the problem is fixed in v2.13.14

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.