claude-skills/react-native-skills/rules/rendering-no-falsy-and.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Never Use && with Potentially Falsy Values	CRITICAL	prevents production crash	rendering, conditional, jsx, crash

Never Use && with Potentially Falsy Values

Never use {value && <Component />} when value could be an empty string or 0. These are falsy but JSX-renderable—React Native will try to render them as text outside a <Text> component, causing a hard crash in production.

Incorrect (crashes if count is 0 or name is ""):

function Profile({ name, count }: { name: string; count: number }) {
  return (
    <View>
      {name && <Text>{name}</Text>}
      {count && <Text>{count} items</Text>}
    </View>
  )
}
// If name="" or count=0, renders the falsy value → crash

Correct (ternary with null):

function Profile({ name, count }: { name: string; count: number }) {
  return (
    <View>
      {name ? <Text>{name}</Text> : null}
      {count ? <Text>{count} items</Text> : null}
    </View>
  )
}

Correct (explicit boolean coercion):

function Profile({ name, count }: { name: string; count: number }) {
  return (
    <View>
      {!!name && <Text>{name}</Text>}
      {!!count && <Text>{count} items</Text>}
    </View>
  )
}

Best (early return):

function Profile({ name, count }: { name: string; count: number }) {
  if (!name) return null

  return (
    <View>
      <Text>{name}</Text>
      {count > 0 ? <Text>{count} items</Text> : null}
    </View>
  )
}

Early returns are clearest. When using conditionals inline, prefer ternary or explicit boolean checks.

Lint rule: Enable react/jsx-no-leaked-render from eslint-plugin-react to catch this automatically.