react-native-pause-tabview

This repo was created to do some performance tests with react-navigation, react-native-tabview and react-freeze.

Setup

Performances are mesured with react-native-flipper-performance-plugin on a Huawei p20 lite.

To test the different scenarii you can import the App of your choice in the App.tsx file from src/apps:

import App from './src/apps/AppWithTimerAndAnimation';

export default App;

App

The app contains 2 screens :

• 1 screen with a tabview of 2 tabs (using react-native-tabview) :
  • 1 tab with 20 timers and 20 small animations
  • 1 tab with a background only
• 1 screen with a text only

App	Tab 1	Tab 2
Screen 1
Screen 2		-

Measures

• Test performance improvements with react-freeze
• Test performance cost of setInterval
• Test performance improvements with react-freeze when JS thread is killed
• Profiling results

Results

• react-freeze doesn't help for UI thread (ie: animations).
• It takes some performance when active (ie: ~5 fps on a Huawei p20 lite).
• But it is really usefull on inefficient screens and it prevents threadlock by cancelling all re-renders of frozen screens.