Android: Slow performance

[KrajncJ]

react-native, react and native-base version

RN: 0.41.2 NB: 2.1.0

Expected behaviour

Smooth performance without delay.

Actual behaviour

If Styleprovider is included in my component, I am noticing significantly slower performance (ex. it takes about 2s to mark checkbox). It also sometimes happens that the styleprovider's style is applied to component even component was not wrapped in it. After reload JS, style is restored back to normal.

It seems that when remote JS debugging is on, it works much smoother.

I had a similar problem with performance before, but with the upgrade NativeBase to v2.1.0, I achieved a better performance, but since android on my phone has updated to 7.0, the application became very slow again.

Steps to reproduce (code snippet or screenshot)

Wrap complex component into StyleProvider. I am using Content => ListItem => Checkbox.

Is the bug present in both ios and android or in any one of them?

Running only on Android

[srhise]

Really good cache @KrajncJ. I have found that when the remote debugger is connected, the performance is much faster on a dev build.

Edited: This is most likely due to the fact that when remote debugging is enabled JS is executed on the remote browser, not the device. Hence it is faster. So this isn't really that promising.

[ianjwood]

I've seen the same; although I was using an older version (only 6 weeks old). I've upgraded to react-native 0.48.3 and native-base 2.3.2 but still see lag when the debugger isn't connected.

Looking at the framerates on device (I'm using a deliberately low end Android 6 phone - HOMTOM HT-16 device for testing) I see the JS framerate drop from a rock solid 49.7/8 to an impossible -2.1 when tapping a TouchableOpacity to slide in a react-native-modal. Other users using better devices see the lag too. I also see similar lag when moving between Tabs which is more native-base territory.

I"m going to have a look through the performance related issues here to see if there is anything known that I'm doing. The are alot of semi-transparent or fading layers flying around here :)

[kylanhurt]

Yeah it seems that performance on React Native in general may be an uphill battle.

[inv2004]

Any news about this issue?

The same problem. Everything was ok, until included StyleProvider.

[Laurensdc]

Same issue, but has nothing to do with the remote JS debugger. Even without wrapping in a StyleProvider, and even when publishing the app, the same performance issues arise. Unfortunately it makes NativeBase unusable.

Having the issue in combination with Redux and React Navigation (TabNavigator).

[douglasjunior]

Same issue here.

[XuanPH]

Same issue on ios. It's very slow When I build release on Iphone and Ipad.

[fxhereng]

Rendering a custom tabbar with prop renderTabBar using ScrollableTab component makes it much smoother.

Also adding prop prerenderingSiblingsNumber={NUMBER_OF_TABS} (on Tabs) reduces flickering when changing tab.

Tested on iOS + android (debug & release mode)

[dmitryshelomanov]

with StyleProvider - very slow

[dmitryshelomanov]

I created own check box

[kala888]

same issue

[masierraf]

I got the same problem with Tabs > 3 Tab (with FlatList each). it is to slow when i press or swipe between tabs

[masierraf]

with StyleProvider - very slow

@userbq201 did you found a way to solve it?

[waqaramjad]

same problem app is super slow with native base

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

[laithfawwaz]

Did anyone fix the issue here?

[YumTheDeathGod]

I am still struggling with this issue. not only for checkboxes but also for forms that I have created with native base V3. These performance issues are really overwhelming. In my forms, I have used native base's components like Input, Select, Checkboxes, etc. but when I moved from one Input field to another then another component was not getting focused fast. It took around 2s two get focused. any help will be appreciated.

[chiubaka]

Unsure if related, but I'm experiencing a massive performance differential between iOS and Android. Currently using native-base 2.15.2 and fairly certain nothing else I've changed in my app could have caused this big a performance degradation.

[chiubaka]

Following up on my own comment here: after some investigation, I've discovered that performance degradation in my app has little to do with Native Base. In my particular case, things slowed down by almost 100x after attempting to set the default timezone using luxon, likely due to some inefficient polyfills I was using for i18n support. I've found a way around using those polyfills, and Android performance profile has returned to normal.

[leonardomdr]

Following up on my own comment here: after some investigation, I've discovered that performance degradation in my app has little to do with Native Base. In my particular case, things slowed down by almost 100x after attempting to set the default timezone using luxon, likely due to some inefficient polyfills I was using for i18n support. I've found a way around using those polyfills, and Android performance profile has returned to normal.

How did that investigation @chiubaka? I would like to understand your process to check that. I'm using luxon here, and my native-base modal looks slow.

[chiubaka]

I ran a git bisect on my app until I isolated a commit that was clearly causing the problem. This left me with many, many commits with Native Base enabled and no issues, and narrowed down to a single commit with a luxon default timezone configuration that was clearly causing the problem.

[leonardomdr]

I ran a git bisect on my app until I isolated a commit that was clearly causing the problem. This left me with many, many commits with Native Base enabled and no issues, and narrowed down to a single commit with a luxon default timezone configuration that was clearly causing the problem.

Aww.. got it. I'm in the beginning of this app development, I will just remove luxon and check if the modal gets a better performance. Thanks anyways.

[pierroo]

I'm afraid I'll have to join the party: NativeBase Modals are incredibly slow to open / close; it takes almost 1 full second to appear / disappear; even with barely anything in it. (just text and a few boxes)

I don't have any luxon or complicated components in there; I'm on the latest versions of React Native and NativeBase. this is quite frustrating, unable to pinpoint the issue :/

@leonardomdr you mentioned you had the issue with their modal too; is it still happening on your end?

[leonardomdr]

Yes, it is still slow. Not a published app yet, it's under development, but if it's still slow in the future, I will have to look for another solution.

I haven't tested yet, because I have been studying react memo and other stuff about performance for react native apps.

I'm using the latest versions as well (native-base and react-native)..

Em sex., 10 de dez. de 2021 às 14:42, Pierre @.***> escreveu:

I'm afraid I'll have to join the party: NativeBase Modals are incredibly slow to open / close; it takes almost 1 full second to appear / disappear; even with barely anything in it. (just text and a few boxes)

I don't have any luxon or complicated components in there; I'm on the latest versions of React Native and NativeBase. this is quite frustrating, unable to pinpoint the issue :/

@leonardomdr https://github.com/leonardomdr you mentioned you had the issue with their modal too; is it still happening on your end?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GeekyAnts/NativeBase/issues/1012#issuecomment-991167644, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADJ36LASIIFFIKCMBVO7O63UQI3YXANCNFSM4DRQ3Y3A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[one-god]

I have the same issue I'm on the latest versions of React Native and NativeBase. "native-base": "^3.3.1", "react-native": "0.66.3",

[YumTheDeathGod]

In my case problem gets resolved after uploading build on play store. I don't know how. But performance of the app has increased and does not show laggy behavior.

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

[bitfield66]

did anyone find any solution? I have the same issue here

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

[ankit-tailor]

This issue is a duplicate of #4302. We are actively working on this issue.