microsoft / microsoft/react-native-windows

folly::toJson: JSON object value was a NaN or INF

Open
#8,318 14 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Layout bug Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Originally reported here: asklar/react-native-xaml#120 by @rymate1234. See that issue for a repro app.

When nesting a RN FlatList within a native viewmanager (e.g. a react-native-xaml Grid), and web debugging is enabled, the user gets a crash:
folly::toJson: JSON object value was a NaN or INF

During layout, ViewManagerBase will dispatch a topLayout event, and serialize the layout props (left, top, width and height) into a json using folly, to send it over the bridge.
The problem is that the native XAML control will have its width / height as "auto", which is represented by the float value -NaN. Folly does not have a way to serialize NaN or INF onto json, so it throws that exception instead.

When using JSI instead, we end up with stuff not rendering (since nesting layouts doesn't work quite right), but that is a different bug (#7601)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at ViewManagerBase, where the topLayout event serializes left, top, width, and height, and trace the call into folly::toJson. Reproduce with a nested RN FlatList inside a native XAML view while web debugging is enabled. Done means the layout event no longer crashes when XAML auto dimensions produce NaN or INF values.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.