How can I debug memory leaks in react-native Expo project?

Question

I am running a react-native Expo project on both ios simulator, which uses XCode, and android emulator, which uses genymotion. There is a crash sometimes when using the app on real android phone. I am hoping to find out the reason debugging it on the emulator.

So far, I searched for tools for this, but did not encounter any.

Could anyone tell me available tools for debugging memory leaks on genymotion emulator? I also welcome any other advices to fix my problem.

Thanks in advance!

Answer 1

You can gain a ton of insight using Infinite Red's Reactitron

You might also want to check out Perf Monitor which you can access from the Debug menu.

There's a whole page on profiling and troubleshooting perf issues in the react native documentation. https://reactnative.dev/docs/debugging

Answer 2

With Expo you'll need to detach.

For Android you can find tutorial here.

For iOS:

1. Make sure you have Release Schema
2. Go to XCode ? Product ? Profile (? + i) and you'll find:
3. It should open your leaks profiler on the screen and then click on the red dot.
4. Restart the app in simulator.
5. You should see your memory allocations in the leaks profiler window.

Answer 3

First of all, your animation-related code needs to be inside your CustomContent component, not inside DrawerNavigator.

Then remove this:

const [progress, setProgress] = React.useState(new Animated.Value(0))

And replace it with:

const progress = useDrawerProgress();

Where you import useDrawerProgress from @react-navigation/drawer.

Answer 4

You should put it inside your Layout component for the navigator, FableReader. And also, you should use hook -> useDrawerProgress

import Animated from 'react-native-reanimated';
import React from 'react';
import { useDrawerProgress } from '@react-navigation/drawer';
import { View, Text } from 'react-native';


const FableReader= () => {
  const progress = useDrawerProgress();

  const scale = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });
  const borderRadius = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [0, 25],
  });

  const animatedStyle = {
    borderRadius,
    transform: [{ scale }],
    overflow: 'hidden',
  };

  return (
    <Animated.View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
        ...animatedStyle,
      }}
    >
      <Text>FableReader page</Text>
    </Animated.View>
  );
};

export default FableReader;