Possible memory leak

Possible memory leak when animating fontSize using withSpring

Hello, guys! I’m testing different types of animations using reanimated 2 and found a possible memory leak. The conditions are as follows. I have a button that changes local state (bool). There is also an effect that triggers a spring animation on some shared value (from 0 to 1 and vice versa). And the actual problem appears when I add useAnimatedStyle which interpolates shared value to the appropriate fontSize of the Animated.Text. Now if I press the button multiple times, each time I press it the consumed memory increases by about 2MB each time animation starts and never resumes to its initial value.

Description

See above

Expected behavior

There shouldn’t be any leaks

Actual behavior & steps to reproduce

each time I press it the consumed memory increases by about 2MB each time animation starts and never resumes to its initial value

Snack or minimal code example

https://github.com/schusovskoy/reanimated-test

import React, { useEffect, useState } from 'react'
import styled from 'styled-components/native'
import Animated, {
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated'

const Container = styled.View`
  flex: 1;
  padding: 0 16px;
`

const Button = styled.TouchableOpacity`
  position: absolute;
  bottom: 32px;
  height: 64px;
  right: 16px;
  left: 16px;
  background: #fff;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
`
const ButtonText = styled.Text`
  font-size: 16px;
`

const App = () => {
  const value = useSharedValue(0)
  const [state, setState] = useState(false)

  useEffect(() => {
    value.value = withSpring(state ? 1 : 0)
  }, [state, value])

  const style = useAnimatedStyle(() => {
    return {
      fontSize: interpolate(value.value, [0, 1], [28, 16]),
    }
  })

  return (
    <Container>
      <Animated.Text style={[{ marginTop: 100 }, style]}>
        Some text
      </Animated.Text>
      <Button onPress={() => setState(!state)}>
        <ButtonText>Press me</ButtonText>
      </Button>
    </Container>
  )
}

export default App

Package versions

“react-native”: “0.66.1”, “react-native-gesture-handler”: “^1.10.3”, “react-native-reanimated”: “^2.2.3”,

[tapz]

Sure. But #2849 should be updated to apply also to iOS.

[amsimon]

Still encountering this issue. Reanimated is unusable in its current state.