react-navigation optimizations in low-performance Android

Question

I have a simple react-navigation code right now but it delays every route around 200ms - 500ms on poor Android systems even with bundling

The device is known to be running Android with 2GB of RAM and 8GB of storage (roughly 4GB left after removing system files and the like). I used adb shell dumpsys meminfo to see that there is about 1.3GB left I want to know how to optimize react-native or react-navigation so that his page does not get stuck

And I've tried animating with react native without stuttering

The react-navigation package used is

    "@react-native-community/async-storage": "^1.12.1",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",

Below is my react-navigation code

/* eslint-disable react/react-in-jsx-scope */
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Standby from '../View/Standby/Standby';
import DeviceList from '../View/DeviceList/DeviceList';

const router = () => {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false, animation: 'none'}}>
        <Stack.Screen name="Standby" component={Standby} />
        <Stack.Screen name="DeviceList" component={DeviceList} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default router;

Here is the code for my navigation page

import {useNavigation} from '@react-navigation/native';

  const navigation = useNavigation();
  const jumpDeviceList = () => {
    navigation.navigate('DeviceList');
  };

I started with react native's Pressable usage

<Pressable onPress={()=>jumpDeviceList()}>
  <Text>I'm pressable!</Text>
</Pressable>

But he had a visual latency of about 300ms to 500ms

Currently used is

<TouchableOpacity
          onPress={() => {
            jumpDeviceList();
          }}>
          <Text style={{fontSize: 30, color: '#FFF'}}>jump</Text>
</TouchableOpacity>

It's also very delayed but a little bit faster than Pressable but the button animation gets stuck

Answer 1

These are the things which i mentioned below in detail that we need to be taken into consideration when we are constructing or developing the React Native applications.

1. If you have lengthy lists, you might want to think about utilising FlatList rather than ScrollView. Because FlatList renders only the elements that are currently in view, it is more efficient when rendering large lists.

2. Compress and optimise photos to make them more readable. Performance might be severely impacted by large image files. For picture optimisation, you can utilise programmes like ImageOptim or programmes offered by platforms like Android Studio.

3. Reduce Animations: Keep the use of complicated animations to a minimum, especially on displays with lots of moving parts. Think about making animations shorter or simpler.

4. Code Splitting: To load only the code required for the current screen, take into consideration code splitting. This can speed up starting and decrease the size of the initial bundle.

5. React Navigation Performance Options: To enhance performance, try modifying the screenOptions in your router component. You may, for instance, experiment with several transition animations:

6. JavaScript code should be optimised and profiled using tools such as React DevTools or Reactotron. Find any performance bottlenecks and optimise.

7. Use React Native Hermes: The JavaScript engine designed specifically to run React Native is called Hermes. Hermes can speed up startup times and use less memory when enabled.

8. Memory Management: Use resources such as the React DevTools to look for memory leaks. In particular, if you are using native modules, be sure you are appropriately cleaning up resources.

9. Update Dependencies: Make sure React Native, React Navigation, and other dependencies are up to date on your system. Bug fixes and performance enhancements might be included in later versions.

10. Think About Native Navigation Libraries: React-native-screens is one native navigation library that you might want to use for better performance, depending on how complex your app is.

11. Test on Real Devices: It is recommended to conduct tests on real devices wherever possible, particularly on the target device that has lesser specifications.