Nativebase: Slow performance on Android

[yustnip]

I've noticed that on Android the usage of NativeBase makes an app slowly. On iOS all is OK. For example I've made a simple project from the scratch here.

In the mentioned example if I press "Do smth" button, while the setInterval process is running, I get no result or get it with a delay.

If NativeBase components is replaced for standard React Native components like TouchableOpacity it works pretty fast.

On the gif below I'm trying to press "Do smth" button to execute a simple alert().

react-native, react and native-base version
0.42.0, 15.4.2, 2.0.12

[tnte]

I also noticed this... on Android the performance is very bad.

[srhise]

I came to the sad conclusion of this as well. The button splash animations sometimes run so slow that the look to be in slow motion, even in a release build. The app layout is perfect, no issues and looks great across both platforms, but the performance is bad.

[sankhadeeproy007]

Yes, that is actually an issue right now. But we've already figured out a fix for this and testing it out on branch caching. We're testing it out internally and would love it if you could test it and let us know as well.
cc @yustnip @brainbow91 @srhise

[srhise]

I can test the branch. I find the performance mostly an issue on and

I will test it right now. I apologize for possibly a stupid question, what is the best way to pull down this branch into my existing RN project? I have a local dev branch I can bring it into, but is there an npm version that I can grab?

[sankhadeeproy007]

Just update your package.json

"native-base": "https://github.com/GeekyAnts/NativeBase#caching"

[srhise]

Ok, here's what I notice with the updated library:

• Performance seems a bit better as it seems some animations (button splash effect) have been removed
• I am getting an error on both iOS and Android.

I will note, that I was using 2.0.11 when I posted this response so I installed 2.0.13 as well. I noticed the same performance as the caching branch, so I am not sure what gains are made there.

Any ideas on that error?

[sankhadeeproy007]

It looks like it is trying to access the touchableHighlight component of RN. And that shouldn't be the case because on Android we render the TouchableNativeFeedback component. Hence the ripple animations are gone.
Also it's hard to understand why there would be any performance improvement in 2.0.13 because we've just added new components to it, rather than making any changes to the core.

[srhise]

That fixed it.. I am still having performance issues on Android with this version. What specifically was added to that branch that I should look out for in terms of improved performance?

* Update.. if you actually produce a release build and configure it right, there are not as many performance issues. Even on 2.0.11 it's not too bad. But it's pretty unusable on a dev build. I am going to get back on the caching branch in the morning on a release build and see if that makes any difference. *

[shivrajkumar]

Performance issue resolved in v2.1.0

[MSchmidt]

Are they? I'm still finding it quite slow in comparison to iOS. Maybe it was even worse before 2.1 but I just ran the Kitchen Sink for the first time an immediately realised that it doesn't feel "native" at all.

[KrajncJ]

I also noticed a similar problem.
It is true that performance was poor in previous versions, but in v2.1.0 performance have improved a lot.
Since I updated my phone to Android 7.0 the performance is pretty bad again.

[srhise]

Is there hope for better performance on Android? I don't see any improvements in the latest versions. Is there a list of tips and tricks for Android performance with Nativebase?

[orangecoloured]

FAB component lags horribly. I thought maybe simply adding useNativeDriver: true could do the thing, but no success.

[michelalbers]

I spent a full day of hair pulling and implementing performance optimizations. I switched to https://github.com/react-native-training/react-native-elements and now the app runs super smooth.

[svlada]

@michelalbers What kind of performance issues you've encountered?

[douglasjunior]

My problem with NativeBase is with App startup. When I put NativeBase in my project, the App take 3x more time to start.

I believe this slowness is related to StyleProvider.

[Laurensdc]

When I'm using React Navigation, the Tabnavigator is extremely slow using NativeBase. There is a ~1s lag after pressing before the screen responds.
If I spam touch, the touches also seem to be buffered, so that the screens will just go nuts from left to right for a few seconds.

I have the same issue with TouchableOpacity, when I remove NativeBase, everything is super smooth, but in combination with NativeBase components, there's a ~1s lag before the touch gets processed.
The component goes to state 'pressed', then the screen lags for ~1 second, and then the touch gets pressed and the component goes to state 'unpressed'.

NativeBase looked extremely promising, but unfortunately I'm going to have defer from using it.

[SupriyaKalghatgi]

1012

[AgNm]

@Laurensdc did you find any solution, I am using Nativebase throughout my app

[Laurensdc]

@AgNm Unfortunately, no.
I removed NativeBase from my project and created all components from scratch myself.

[rochapablo]

It still slow =/

"native-base": "^2.8.0",

[mfaghfoory]

I've removed native base from my project and now, everything is normal

[Jshaider]

native base is too slow.. i wish if i had seen this before.. :(... now I need to do all that from the start..
can someone tell me what to use instead of ActionSheet

[mfaghfoory]

native base is too slow.. i wish if i had seen this before.. :(... now I need to do all that from the start..
can someone tell me what to use instead of ActionSheet

There are several options you can choose. take a look at this
https://github.com/beefe/react-native-actionsheet

[PA55ION]

It's still super slow

[annjawn]

Speed on Android is Terrible. I am facing the exact issues as @Laurensdc . Touches respond at a delay for almost ALL buttons and screen navigations are slow too. This is based on testing on a real device with no remote js debugging on, no console logs etc. Infact, my app isn't even connected to the backend APIs yet, but it's slow. I am worried that performance will drop drastically when the App will start making api calls.

[ansarikhurshid786]

Yes, I am also facing same issue in android. iOS performance is good

[michaelVictoriaDev]

Im using nativebase but still slow, I try to optimize my code, but still a problem in 2020 :(

[annjawn]

I think in Exop Production mode the speed seems somewhat acceptable in Android and it seems normal, but in Dev mode the speed is horrible.