React Native memory leak react native gesture handler

Question

My apps memory usage is increasing by 0,1 MB about every 3 seconds without me doing anything in the app. I made sure to remove all event listeners so that's not the problem, im out of tricks to solve this memory leak. Is there a tool to inspect which processes are writing to the ram or some other way to detect this leak ?

React Navigation, Redux, Redux Thunk, Axios, rn localize, i18n js — Konstantin Paulus, Nov 09 '19 at 15:58

score 0 · Answer 1 · answered Nov 09 '19 at 16:37

0

I have detected the memory leak, it was an issue with react-native-gesture-handler, I did this:

<PanGestureHandler
  onGestureEvent={this.onGestureEvent}
  onHandlerStateChange={this.onGestureEvent}>
  <Animated.View style={{ transform: [{ translateX: this.translateX }] }}>
     <FlatList />
  </Animated.View>
</PanGestureHandler>

I didn't thought about that there is going to be a gesture handler in front of the whole FlatList which in my case contains 200+ items. I still don't ge why the memory usage is increasing without doing anything but I have resolved this issue.

answered Nov 09 '19 at 16:37

Konstantin Paulus

1,943
2
10
22

Can you also add the content of `onGestureEvent` method? That might help us to identify the suspect. – Izzet Yildirim Nov 09 '19 at 16:39
this is the onGestureEvent method: event([ { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } }, ]); – Konstantin Paulus Nov 09 '19 at 16:46
I have provided the full solution – Konstantin Paulus Nov 09 '19 at 17:22

score 0 · Accepted Answer · answered Nov 09 '19 at 17:08

This is my workaround:

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const TOSS_SEC = 0.2;
const MULTIPLIER = Math.round(SCREEN_WIDTH / 90);

class ReanimatedFlatList extends React.Component {
  constructor(props) {
    super(props);
    // drag Distance
    const dragX = new Value(0);
    // gesture state
    const state = new Value(-1);
    // drag velocity
    const dragVX = new Value(0);
    this.onGestureEvent = event([
      { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } },
    ]);
    this.transX = new Value();
    const prevDragX = new Value(0);
    const clock = new Clock();
    const snapPoint = cond(
      lessThan(add(this.transX, multiply(TOSS_SEC, dragVX)), -80),
        -100,
        0,
    );
    this.unconstrainedX = cond(
      eq(state, State.ACTIVE),
      [
        stopClock(clock),
        set(this.transX, add(this.transX, sub(dragX, prevDragX))),
        set(prevDragX, dragX),
        this.transX,
      ],
      [
        set(prevDragX, 0),
        set(
          this.transX,
          cond(
            defined(this.transX),
            runSpring(clock, this.transX, dragVX, snapPoint),
            0,
          ),
        ),
      ],
    );
    this.translateX = interpolate(this.unconstrainedX, {
      inputRange: [-100, 0],
      outputRange: [-100, 0],
      extrapolate: Extrapolate.CLAMP,
    });
  }
  render() {
    return (
      <React.Fragment>
        <Animated.View style={{ transform: [{ translateX: this.translateX }] }}>
          <FlatList />
        </Animated.View>
        <PanGestureHandler
          maxPointers={1}
          onGestureEvent={this.onGestureEvent}
          onHandlerStateChange={this.onGestureEvent}>
        <Animated.View
          style={{
            transform: [{ translateX: multiply(this.translateX, MULTIPLIER) }],
            position: 'absolute',
            top: 0,
            width: SCREEN_WIDTH,
            right: -SCREEN_WIDTH + 50,
            bottom: 0,
          }}
        />
      </PanGestureHandler>
    </React.Fragment>
  );
 }
}

This allows me to move the FlatList 100 pt to the left and display something next to it much like a navigation drawer. This solution is not perfect because you are not going to be able to scroll between SCREEN_WIDTH - 50 pt and SCREEN_WIDTH on the x axis but I haven't found a better solution for now.

React Native memory leak react native gesture handler

2 Answers2