# `react-doctor/rn-no-falsy-and-render`

Guard numeric-looking conditions: {count > 0 && <X/>}, {Boolean(count) && <X/>}, or {count ? <X/> : null}

- **Category:** React Native
- **Severity:** error
- **Source:** oxlint-plugin-react-doctor
- **Framework:** react-native
- **Enabled when:** framework=react-native and capabilities=react-native
- **Documentation:** <https://react.dev/learn/conditional-rendering#logical-and-operator->

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on a LogicalExpression with operator '&&' whose right side is a JSXElement or JSXFragment, whose parent is a JSXExpressionContainer (or another '&&' LogicalExpression), and whose left side isLikelyNumericExpression: a `.length` MemberExpression, an Identifier whose name passes isNumericName (exact word from count/length/total/size/num/index/amount/quantity/offset/width/height/duration/progress/score/rank/level/step/max/min/sum/avg/depth/balance/age/weight/volume/distance/speed/rate/ratio/percent/percentage, a camelCase suffix like itemCount/pageSize, or a _suffix like item_count), or a MemberExpression whose property name passes isNumericName (e.g. data.totalCount). The concern is that when the left value is 0, `{0 && <X/>}` renders the bare number 0, which crashes outside <Text> on React Native. False positive: it must NOT flag boolean/string/object-named lefts (isVisible, enabled, title, user), names that begin with a boolean prefix is/has/can/should/did/will/show/hide/enable/disable followed by an uppercase letter even if numeric-sounding (isPage, hasCount, showTotal are deliberately excluded), an already-guarded comparison `count > 0 &&`, a ternary `count ? <X/> : null`, a right side that is not JSX (`{count && \"text\"}`), an `&&` not inside JSX, or any expression in a `\"use dom\"` directive file (those render as real DOM, not RN). The detector does NO value/type/flow analysis — it matches names and `.length` shape only.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Stop the numeric left operand from leaking a raw 0 into the render: convert the condition to an explicit boolean. Use a comparison like `{count > 0 && <X/>}` or `{items.length > 0 && <X/>}`, wrap it as `{Boolean(count) && <X/>}`, or switch to a ternary `{count ? <X/> : null}`. Prefer the comparison when you know the numeric semantics, since it reads clearest. Do not leave a bare numeric expression on the left of `&&` in JSX. See https://react.dev/learn/conditional-rendering#logical-and-operator-