Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Never Use && with Potentially Falsy Values
impact
CRITICAL
impactDescription
prevents production crash
tags
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 ""):

tsx
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):

tsx
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):

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

Best (early return):

tsx
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.