[Help] How does one measure the performance gains?

[mihir0x69]

This is not exactly an "issue" with the library. But a few pointers on how to measure the performance gains (in release mode) would help me justify using this library in our app. TIA!

[mihir0x69]

@kmagiera @WoLewicki Tagging you for some attention to this question :)

[WoLewicki]

The easiest way should be using all the tools you are using normally for measuring performance and compare it when using native-stack vs stack navigator or e.g. stack navigators with detachInactiveScreens enabled and not enabled. The performance should be different when navigating forward in the app, since then the library should detach previous screens from native hierarchy.

[WoLewicki]

You should be able to measure performance with standard tools for this, such as memory usage, CPU usage, battery usage etc. Since native-stack detaches previous native views when navigating forward, the gains should be mostly visible while having many heavy screens pushed inside the navigator. With native-stack, (or with js stack with react-native-screens enabled), it should consume much less memory when navigating forward. I attached a simple example below. You should see difference in memory usage when switching the options and navigating forward. It would probably be even more visible when changing buttons to some images, which consume much memory on native side.

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
// import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createStackNavigator } from '@react-navigation/stack';
import { ScrollView } from 'react-native-gesture-handler';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  const data = [...Array(5000).keys()];
  const buttons = data.map((item) => (
    <Button title={item.toString()} key={item} onPress={() => {}} />
  ));

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
      <ScrollView>{buttons}</ScrollView>
    </View>
  );
}

// Change the stacks to see difference between native-stack and js stack and set 
// `detachInactiveScreens` to `false` to see difference of using RNScreens and not using them at all.
const Stack = createStackNavigator();
// const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" detachInactiveScreens={true}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;