JSON.stringify cannot serialize cyclic structures

[harouf]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.17 (v3 is not supported)
• react-native v0.47.0

Expected behaviour

When I tried to push a route from drawer page, by calling like this: Actions.<route_name>(), it should navigate to and display new specified route page.

Actual behaviour

But it throws this error message.
JSON.stringify cannot serialize cyclic structures.

Steps to reproduce

1. Define some scenes along with drawer scene and they are same level under parent.
2. Try to call Actions.<route_name>() to push a route and it throws mentioned error.

[aksonov]

It doesn't seem to be related to RNRF - looks like you are trying to pass some cyclic structure as param, it is not allowed (by react-navigation), please use pure Javascript objects

[Nairolf92]

I upgraded my project from V3 to V4 beta 19 and have the same issue, this must be related to RNRF.

[aksonov]

Just don't pass cyclic references.

[Nairolf92]

It seems that I'm lacking this knowledge. What do you mean by pure Javascript objects ?
I am actually using JSON.stringify like this ;
this.saveItem('idBeneficiaire', JSON.stringify(this.state.json[0].idBeneficiaire));

[aksonov]

Where is RNRF Actions usage ?

[Nairolf92]

I used actions like this :
<CardItem button onPress={() => Actions.intervenants()}>
And here is the scene :
<Scene key="intervenants" component={Intervenants} renderTitle={() => { return <IntervenantsTitle />; }} rightTitle={<Text/>} onRight={()=> console.log('ok')}/>

[aksonov]

Okey, as I see from stack trace error is thrown by react-navigation, not RNRF... Anyway could you reproduce this issue with Example project?

[Nairolf92]

I can give it a try

[yogeshR5]

@aksonov Same issue happened here while using

wheelCanvas = this.updateCanvas();

ctx.drawImage(wheelCanvas, wheelCanvas.width / 2, wheelCanvas.height / 2);

updateCanvas() {
var outsideRadius = 120;
var textRadius = 100;
var insideRadius = 30;
var canvas = this.refs.canvasRoulette;
let ctx = canvas.getContext("2d");
canvas.width = canvas.height = outsideRadius * 2 + 6;

var x = outsideRadius + 3;
var y = outsideRadius + 3;

ctx.font = "bold 18px Helvetica, Arial";

for (var i = 0; i < rouletteSize; i++) {
  var angle = i * arc;
  ctx.fillStyle = colors[i];
  ctx.beginPath();
  ctx.arc(x, y, outsideRadius, angle, angle + arc, false);
  ctx.arc(x, y, insideRadius, angle + arc, angle, true);
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.fill();
  ctx.save();
  ctx.shadowOffsetX = -1;
  ctx.shadowOffsetY = -1;
  ctx.shadowBlur = 0;
  ctx.shadowColor = "rgb(220,220,220)";
  ctx.fillStyle = "#fff";
  ctx.translate(
    x + Math.cos(angle + arc / 2) * textRadius,
    y + Math.sin(angle + arc / 2) * textRadius
  );

  ctx.rotate(angle + arc / 2 + Math.PI);
  var text = numbers[i];
  ctx.fillText(text, -ctx.measureText(text).width / 2, 5);
  ctx.restore();
}
return canvas;

}