How to make React Native mobile application faster?

Question

React Native mobile application is working very slow on every click. I am using react native v0.40.0 and following are the dependencies of my proje

Answer 1

1. Use Flatlist over Scrollview:

   • add initialNumToRender={number} prop to Flatlist, as it will show only those components which are visible on screen and detach the other components

2. Use PureComponent in Flatlist renderItem (In your case it will Each Card), so that they will only render whenever their props get changed.

3. Check whether your component is re-rendering again and again in order to test put console either in render() or in ComponentWillRecieveProps and if this is happening then use ShouldComponentUpdate.

4. Remove console.log from render() and ComponentWillRecieveProps.

Make these changes and you see your performance is much better than before.