Nativebase: 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