vue-native-core: Maximum call stack size exceeded on Animate

When i use animate component in Developer mode it works fine but In Production mode the error appears. And i removed my all animate:view instead one animate component from my template then it worked. What should i do ? My Template:

...
<animated:view class="scrolledContainer" :style="{backgroundColor:'rgba(247,247,247,'+JSON.stringify(testColor)+')'}">
  <view :style="{height:statusBarHeight,width:'100%'}"/>
  <animated:view class="headerContainer" :style="{opacity:transparentHeader,height:transparentHeight}">
    ...
  </animated:view>
  <animated:view class="scrolledHeader" :style="{opacity:whiteHeader,height:whiteHeight}">
    <animated:text class="headerTitleTextStyle" :style="{fontSize:titleFont,opacity:titleColor}">{{data.name}}</animated:text>
   </animated:view>
</animated:view>
...

So i reduced like:

...
<animated:view class="scrolledContainer" :style="{backgroundColor:'rgba(247,247,247,'+JSON.stringify(testColor)+')'}">
  <view :style="{height:statusBarHeight,width:'100%'}"/>
</animated:view>
...

So i think it has to be only one animate component in a screen, Or i have to write React native component My Defendencies

"dependencies": {
    "expo": "29.0.0",
    "i18next": "12.1.0",
    "native-base": "2.8.1",
    "react": "16.5.0",
    "react-i18next": "8.3.8",
    "react-native": "0.55.4",
    "react-navigation": "3.0.4",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.9",
    "vuelidate": "0.7.4",
    "vuex": "3.0.1",
    "vuex-persist": "2.0.0"
  },

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 22 (3 by maintainers)

Most upvoted comments

This issue seems to go away when binding the Animated _value directly. For example, lets say you have this component:

<template>
  <animated:view :style="{opacity: animatedOpacityValue}">
    <button @press="dim" title="Press Me" />
  </animated:view>
</template>

<script>
  import {Animated, Easing} from "react-native";

  export default {
    data() {
      return {
        animatedOpacityValue: new Animated.Value(1)
      };
    },
    methods: {
      dim() {
        Animated.timing(this.animatedOpacityValue, {
          toValue: 0,
          duration: 300,
          easing: Easing.in(),
        }).start();
      }
    },
  };
</script>

To resolve the “Maximum call stack size exceeded” error, you would change :style="{opacity: animatedOpacityValue}" to :style="{opacity: animatedOpacityValue._value}":

<template>
  <animated:view :style="{opacity: animatedOpacityValue._value}">
    <button @press="dim" title="Press Me" />
  </animated:view>
</template>

<script>
  import {Animated, Easing} from "react-native";

  export default {
    data() {
      return {
        animatedOpacityValue: new Animated.Value(1)
      };
    },
    methods: {
      dim() {
        Animated.timing(this.animatedOpacityValue, {
          toValue: 0,
          duration: 300,
          easing: Easing.in(),
        }).start();
      }
    },
  };
</script>

I don’t know if this has any impact on performance.

emaadali on Dec 26, 2019

@emaadali this worked for me, ilu

bmbmjmdm on May 29, 2020

Hello, I also have this problem.

in my case, i fixed it with

Original code, on production will cause Maximum call stack size exceeded (android and iOS)

<template>
	...the animated view
</template>
<script>
import {Animated} from 'react-native';

export default {
	// ...
	computed: {
		animatedStyle(){
			return {opacity: this.myAnimatedValue.interpolate(...)}
		}
	},
	data(){
		return {
			// ...
			myAnimatedValue: new Animated.Value(0) <-- this is the problem
		}
	}
}
</script>

the FIX, is to remove myAnimatedValue from Vue instance, as follows

<script>
import {Animated} from 'react-native';
const myAnimatedValue = new Animated.Value(0); <-- MOVE IT here

export default {
	// ...
	computed: {
		animatedStyle(){
			// access the animated instance from outside of "this"
			return {opacity: myAnimatedValue.interpolate(...)}
		}
	},
	data(){
		return {
			// ...
			// myAnimatedValue: new Animated.Value(0) <-- this is the problem, delete this
		}
	}
}
</script>

in my case, it solved.

konglie on May 21, 2020