usePropsErrorBoundary DEV warning message contradicts its own detection logic

[Titozzz]

Version: 5.0.0-beta.5

Summary

The DEV warnings in usePropsErrorBoundary suggest using style={{ width: '100%' }} or flex: 1 as valid ways to specify the container size, but the detection logic only accepts a numeric width/height. As a result, those exact suggestions do not silence the warnings.

Where

src/hooks/usePropsErrorBoundary.ts:

const { width: styleWidth, height: styleHeight } = StyleSheet.flatten(style) || {};
// ...
const hasHorizontalContainerSize =
  typeof styleWidth === "number" || typeof width === "number";
const hasVerticalContainerSize =
  typeof styleHeight === "number" || typeof height === "number";
if (!vertical && !hasHorizontalContainerSize && !warnedRefs.horizontal) {
  console.warn(
    "[react-native-reanimated-carousel] Horizontal mode did not specify `width` in `style`, will fall back to automatic measurement mode."
  );
}
if (!vertical && typeof itemWidth === "number" && !hasHorizontalContainerSize && !warnedRefs.itemWidth) {
  console.warn(
    "[react-native-reanimated-carousel] `itemWidth` sets the snapping page size, not the container width. Consider setting container width via `style` (e.g. `style={{ width: '100%' }}` or `flex: 1`)."
  );
}

Reproduction

<Carousel
  style={{ width: '100%', height: 190 }} // string width
  itemWidth={280}
  data={data}
  renderItem={renderItem}
/>

Both warnings fire even though width: '100%' is explicitly set in style. The same happens with flex: 1, which doesn't produce a width key at all after StyleSheet.flatten.

[dosubot]

Hi @Titozzz! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

Good catch — this is indeed a real inconsistency. The detection logic in usePropsErrorBoundary.ts only considers numeric values [1]:

const hasHorizontalContainerSize =
  typeof styleWidth === "number" || typeof width === "number";

But the itemWidth warning message explicitly suggests using style={{ width: '100%' }} or flex: 1 as alternatives [2] — neither of which will satisfy that typeof === "number" check. A string like '100%' is typeof === "string", and flex: 1 doesn't produce a width key at all after StyleSheet.flatten.

The fix would be to either:

1. Relax the detection to accept string widths (e.g. '100%') and check for flex in the flattened style, so the warnings are actually silenced by the suggested workarounds, or
2. Update the warning messages to only suggest numeric widths (e.g. style={{ width: 300 }}), which is what the detection actually requires.

Option 1 seems more correct since the carousel already supports flex-based sizing and auto-measurement [3] — the warning should acknowledge that string/flex values are valid sizing strategies, even if the carousel falls back to layout measurement for them.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.