Maximum call stack size exceeded on Animate #118
Comments
|
Got the same error 😓 |
|
@SaraTV9 Is it necessary for you to have a nested animated view? |
|
@neeraj-singh47 well, I animate an opacity to render smoothly elements on transition page. |
|
I removed half of my animation code and replaced with pure react native components. I just avoided to use vue native animation components. i dont think it was solution but it worked for me. |
|
@Magnai1030 and how do you do that ? My vue-native code: Try to pass React Native component directly: got error:
Do I miss something ? |
|
@SaraTV9 I think you have to avoid to use animate in a template and use like i hope it will work |
|
Same issue here |
|
Same issue |
|
Anyone solved this issue? |
|
@VanLaerAshley I used a trick. It seems that vus-native Animated does not work on nested elements. You need to animate every single item. It is long and painful but it works for most of the case! Code does not work: Change it like this and will work: Not good practice and sometimes needs adjustments, but worked for me. |
|
@Magnai1030 can this issue be closed? After reading over the comments, sounds like you found a work-around/solution. Is that correct? |
|
@icarter09 No, the workaround doesn't work in my case. The app keeps crashing with error code: "Maximum call stack size exceeded". This is my code for opening a tabbed menu: |
|
This seems to also occur in an Expo app in Production mode when using When pressing the record button, the app crashes with RangeError: Maximum call stack size exceeded. package.json: |
|
This issue seems to go away when binding the Animated To resolve the "Maximum call stack size exceeded" error, you would change I don't know if this has any impact on performance. |
Anyways, I am encountering same issue but with my own button component. In dev, its working fine, but in prod, it says Since Im using |
|
I don't know if this solves anyone else's problem but for me the simplest way to solve this was to abandon animated:view and instead animate an ordinary view element with javascript. Example animates a popup from the bottom of the screen in 20 steps; initiated with |
|
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 <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. |
|
Same problem |
|
@emaadali this worked for me, ilu |
|
thanks @konglie its work solution |
|
In general, animated values should not be placed in $options can be used to keep component properties this way that are not supposed to be reactive. Since |
|
Closing this issue. Please reopen if you think this is still an issue. |
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:
So i reduced like:
So i think it has to be only one animate component in a screen, Or i have to write React native component
My Defendencies
The text was updated successfully, but these errors were encountered: