Navigate to another page after setState gives error the 2nd time - react-native

Question

I'm using react-native-navigation (not sure if that would be relevant) and trying to handle simple props. However, when I go to ScreenB from ScreenA, it works without any error. After that, if I pop() screen to ScreenA and then click again on the same component to go to ScreenB, the app crashes with the following error:
You attempted to set the key a with the value 2 on an
object that is meant to be immutable and has been frozen.
Here's a minimal example of the code in ScreenA: Preview:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { navigationActions } from 'react-native-navigation';
export default class Preview extends Component {
constructor(props) {
super(props);
this.state = {
data: { a: 0, b: 1, c: 2 }
};
}
_goToFullview() {
let temp = this.state.data;
temp.a = 2;
this.setState({ data: temp });
this.props.navigator.push({ screen: "App.FullView", passProps: { data: this.state.data } });
}
render() {
return (
<View>
<Text>{"a: " + this.state.data.a + ","}</Text>
<Text>{"b: " + this.state.data.b + ","}</Text>
<Text>{"c: " + this.state.data.c}</Text>
<TouchableOpacity onPress={ () => this._goToFullview() }>
<Text>Go To Fullview</Text>
</TouchableOpacity>
</View>
)
}
}
And here is ScreenB: FullView:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { navigationActions } from 'react-native-navigation';
class Fullview extends Component {
render() {
return (
<View>
<Text>{"a: " + this.props.data.a + ","}</Text>
<Text>{"b: " + this.props.data.b + ","}</Text>
<Text>{"c: " + this.props.data.c}</Text>
<TouchableOpacity onPress={ () => this.props.navigator.pop({ animated: true, animationType: 'fade' }) }>
<Text>Go back to preview</Text>
</TouchableOpacity>
</View>
)
}
}
I believe the above information should be sufficient to understand my problem. Can anyone explain why this would be happening and a simple solution or hint to fix this?

Answer 1

There are some issues on react-native-navigation which are related to yours.
Somehow, passing some props to the navigator will make them immutable and frozen.
So in your Screen A when you do
this.props.navigator.push({ screen: "App.FullView", passProps: { data: this.state.data } });
It is possible that this.state.data become immutable and when you try to modify it the next time it breaks.
Can you try by passing another reference like this :
this.props.navigator.push({ screen: "App.FullView", passProps: { data: {...this.state.data} } });
To see if it works ?
EDIT :
If yours data.a, data.b and data.c are also object you will maybe need to make a deepClone instead (see : https://github.com/wix/react-native-navigation/issues/394#issuecomment-255936630)
this.props.navigator.push({ screen: "App.FullView", passProps: JSON.parse(JSON.stringify(this.state.data) } });