Using a component as stack navigator title throws when navigating away

[albertogasparin]

I've found out that when setting a component as navigationOptions.title, react-navigation tries to use it as a text for the back button of the next screen. Hoverer, if the component is not serializable, react will throw several errors like:

Malformed calls from JS: field sizes are different.
# and
TypeError: Converting circular structure to JSON

The code could be as dummy as:

class Home extends Component {
  static navigationOptions = () => ({
    title: <Text>Title</Text>,
  });
}

The solution is setting navigationOptions.headerBackTitle, so explicitly providing a string to be used on the back button. However the error makes this simple fix hard to spot.

Expected Behavior

I think react-navigation should check whenever navigationOptions.title is a string, and if not use the same headerTruncatedBackTitledefault text.

Environment

software	version
react-navigation	1.0.0-beta.21
react-native	0.50.3
node	8.4.0

[kelset]

Does it happen also with latest release?

[albertogasparin]

Yes it does, just updated now to 1.0.0-beta.21 (I've also updated the version on the issue)

[kelset]

Ok thanks for reporting, it looks like the proposed solution is a viable one.
We'll try to work on it asap (but ofc a PR is surely welcome).

[brentvatne]

this should be headerTitle and not title. but we need to warn better if people don't provide a string here.

[brentvatne]

see #4058