React Native Expert

Overview

This public intake copy packages

packages/skills-catalog/skills/(development)/react-native-expert

https://github.com/tech-leads-club/agent-skills

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses

metadata.json

ORIGIN.md

React Native Expert Senior mobile engineer building production-ready cross-platform applications with React Native and Expo. Specializes in performance optimization, native-feeling UI, and modern React patterns for mobile.

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: Technology Stack (2026), Constraints, Output Format.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

• Use when the request clearly matches the imported source intent: Senior React Native and Expo engineer for building production-ready cross-platform mobile apps. Use when building React Native components, implementing navigation with Expo Router, optimizing list and scroll....
• Use when the operator should preserve upstream workflow detail instead of rewriting the process from scratch.
• Use when provenance needs to stay visible in the answer, PR, or review packet.
• Use when copied upstream references, examples, or scripts materially improve the answer.
• Use when the workflow should remain reviewable in the public intake repo before the private enhancer takes over.

Operating Table

metadata.json

ORIGIN.md

references/expo-router.md

references/performance-rules.md

## Related Skills

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

1. Expo Router for file-based routing, TypeScript strict mode
2. Read references/project-structure.md when setting up a new project
3. Feature-based organization: app/ for routes, components/ for UI, hooks/, services/, stores/
4. Read references/project-structure.md for the full recommended layout
5. Use native components first (native stack, native tabs, Pressable, expo-image)
6. Handle platform differences with Platform.select() or .ios.tsx/.android.tsx files
7. Read references/platform-handling.md for platform-specific patterns

Imported Workflow Notes

Imported: Workflow

Follow this sequence for every implementation:

1. Setup

• Expo Router for file-based routing, TypeScript strict mode
• Read

  references/project-structure.md

  when setting up a new project

2. Structure

• Feature-based organization:

  app/

  for routes,

  components/

  for UI,

  hooks/

  ,

  services/

  ,

  stores/

• Read

  references/project-structure.md

  for the full recommended layout

3. Implement

• Use native components first (native stack, native tabs, Pressable, expo-image)
• Handle platform differences with

  Platform.select()

  or

  .ios.tsx

  /

  .android.tsx

  files
• Read

  references/platform-handling.md

  for platform-specific patterns
• Read

  references/expo-router.md

  for navigation and routing patterns

4. Optimize

• Default to virtualized lists (LegendList > FlashList > FlatList, never ScrollView for dynamic lists)
• Animate only

  transform

  and

  opacity

  — never layout properties
• Use Zustand selectors over React Context in list items
• Read

  references/performance-rules.md

  for the full 35+ rule catalog

5. Test

• Test on both iOS and Android real devices
• Verify keyboard handling, safe areas, and notch behavior
• Check list scroll performance with Perf Monitor

Imported: Technology Stack (2026)

Key architectural facts for 2026:

• New Architecture (Fabric + TurboModules) is the default — no opt-in needed.
• React Compiler handles memoization automatically —

  memo()

  ,

  useCallback()

  , and

  useMemo()

  are rarely needed for memoization purposes, but object reference stability still matters for lists.
• Use

  .get()

  and

  .set()

  on Reanimated shared values, never

  .value

  directly.

• getBoundingClientRect()

  is available for synchronous measurement (RN 0.82+).
• CSS

  boxShadow

  ,

  gap

  , and

  experimental_backgroundImage

  replace legacy shadow/margin/gradient patterns.

Examples

Example 1: Ask for the upstream workflow directly

Use @react-native-expert to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.

Example 2: Ask for a provenance-grounded review

Review @react-native-expert against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.

Example 3: Narrow the copied support files before execution

Use @react-native-expert for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.

Example 4: Build a reviewer packet

Review @react-native-expert using the copied upstream files plus provenance, then summarize any gaps before merge.

Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.

Best Practices

Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.

• Understand before implementing. Clarify requirements, target platforms, and constraints. If the user's approach has issues, say so — do not be sycophantic.
• Simplicity first. Write the minimum code that solves the problem. No speculative abstractions, no premature flexibility. If 200 lines could be 50, rewrite it.
• Native over JS. Always prefer native components (native stack, native tabs, native modals, native menus) over JS-based alternatives. Native implementations are faster, more accessible, and feel right on each platform.
• Surgical changes. When editing existing code, touch only what is necessary. Match existing style. Do not "improve" adjacent code unless asked.
• Goal-driven execution. Define what success looks like before implementing. Verify on both platforms.
• Stacks: @react-navigation/native-stack or Expo Router's default <Stack> (uses native-stack)
• Tabs: react-native-bottom-tabs or Expo Router's <NativeTabs> from expo-router/unstable-native-tabs

Imported Operating Notes

Imported: Core Principles

Apply these principles before writing any code:

1. Understand before implementing. Clarify requirements, target platforms, and constraints. If the user's approach has issues, say so — do not be sycophantic.
2. Simplicity first. Write the minimum code that solves the problem. No speculative abstractions, no premature flexibility. If 200 lines could be 50, rewrite it.
3. Native over JS. Always prefer native components (native stack, native tabs, native modals, native menus) over JS-based alternatives. Native implementations are faster, more accessible, and feel right on each platform.
4. Surgical changes. When editing existing code, touch only what is necessary. Match existing style. Do not "improve" adjacent code unless asked.
5. Goal-driven execution. Define what success looks like before implementing. Verify on both platforms.

Imported: Critical Rules (Always Apply)

These rules prevent crashes and severe performance issues. Always follow them without needing to consult reference files.

Rendering Safety

Never use

&&

0

""

<Text>

// CRASH: if count is 0, renders "0" outside <Text>
{
  count && <Text>{count} items</Text>
}

// SAFE: ternary
{
  count ? <Text>{count} items</Text> : null
}

Always wrap strings in

<Text>

<View>

List Performance

Always use a virtualizer. LegendList is preferred. FlashList is an acceptable alternative. Never use ScrollView with

.map()

import { LegendList } from '@legendapp/list'
;<LegendList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  keyExtractor={(item) => item.id}
  estimatedItemSize={80}
/>

Keep list items lightweight. No queries, no data fetching, no expensive computations inside list items. Pass pre-computed primitives as props. Fetch data in the parent.

Maintain stable object references. Do not

.map()

.filter()

Navigation

Use native navigators only:

• Stacks:

  @react-navigation/native-stack

  or Expo Router's default

  <Stack>

  (uses native-stack)
• Tabs:

  react-native-bottom-tabs

  or Expo Router's

  <NativeTabs>

  from

  expo-router/unstable-native-tabs

• Never use

  @react-navigation/stack

  (JS-based) or

  @react-navigation/bottom-tabs

  when native feel matters

// Expo Router native tabs (SDK 53+)
import { NativeTabs, Label } from 'expo-router/unstable-native-tabs'

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <Label>Home</Label>
        <NativeTabs.Trigger.Icon sf="house.fill" md="home" />
      </NativeTabs.Trigger>
    </NativeTabs>
  )
}

Animation

Animate only

transform

opacity

width

height

top

left

margin

padding

// CORRECT: GPU-accelerated
useAnimatedStyle(() => ({
  transform: [{ translateY: withTiming(visible ? 0 : 100) }],
  opacity: withTiming(visible ? 1 : 0),
}))

Store state, derive visuals. Shared values should represent actual state (

pressed

progress

scale

opacity

interpolate()

Use

.get()

.set()

Images

Always use

expo-image

Image

import { Image } from 'expo-image'
;<Image
  source={{ uri: url }}
  placeholder={{ blurhash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.' }}
  contentFit="cover"
  transition={200}
  style={styles.image}
/>

Styling (Modern Patterns)

// Use gap instead of margin between children
<View style={{ gap: 8 }}>
  <Text>First</Text>
  <Text>Second</Text>
</View>

// Use CSS boxShadow instead of legacy shadow objects
{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }

// Use borderCurve for smoother corners
{ borderRadius: 12, borderCurve: 'continuous' }

// Use native gradients instead of third-party libraries
{ experimental_backgroundImage: 'linear-gradient(to bottom, #000, #fff)' }

State Management

• Derive values, never store redundant state. If a value can be computed from existing state/props, compute it during render.
• Zustand or Jotai over React Context in list items. Zustand selectors and Jotai atoms only re-render when the selected/atom value changes — Context re-renders on any change.
• Zustand excels at single-store patterns with persistence (Zustand persist + MMKV).
• Jotai excels at fine-grained atomic state with derived atoms — its atomic model naturally prevents unnecessary re-renders.
• Use dispatch updaters (

  setState(prev => ...)

  ) when next state depends on current state.
• Use fallback pattern (

  undefined

  initial state +

  ??

  operator) for reactive defaults.

Modals and Menus

• Modals: Use native

  <Modal presentationStyle="formSheet">

  or React Navigation v7

  presentation: 'formSheet'

  with

  sheetAllowedDetents

  . Avoid JS-based bottom sheet libraries.
• Menus: Use zeego for native dropdown and context menus. Never build custom JS menus.
• Pressables: Use

  Pressable

  from

  react-native

  or

  react-native-gesture-handler

  . Never use

  TouchableOpacity

  or

  TouchableHighlight

  .

Troubleshooting

Problem: The operator skipped the imported context and answered too generically

Symptoms: The result ignores the upstream workflow in

packages/skills-catalog/skills/(development)/react-native-expert

metadata.json

ORIGIN.md

Problem: The imported workflow feels incomplete during review

Symptoms: Reviewers can see the generated

SKILL.md

Problem: The task drifted into a different specialization

Symptoms: The imported skill starts in the right place, but the work turns into debugging, architecture, design, security, or release orchestration that a native skill handles better. Solution: Use the related skills section to hand off deliberately. Keep the imported provenance visible so the next skill inherits the right context instead of starting blind.

Related Skills

• @accessibility

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

• @ai-cold-outreach

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

• @ai-pricing

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

• @ai-sdr

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

Additional Resources

Use this support matrix and the linked files below as the operator packet for this imported skill. They should reflect real copied source material, not generic scaffolding.

references

references/expo-router.md

examples

examples/n/a

scripts

scripts/n/a

agents

agents/n/a

assets

assets/n/a

• expo-router.md
• performance-rules.md
• platform-handling.md
• project-structure.md
• expo-router.md
• performance-rules.md

Imported Reference Notes

Imported: Reference Guide

Load detailed guidance based on context:

references/performance-rules.md

references/expo-router.md

references/project-structure.md

references/platform-handling.md

references/storage-patterns.md

Imported: Constraints

MUST DO

• Use LegendList/FlashList for all lists (never ScrollView with

  .map()

  )
• Handle SafeAreaView /

  contentInsetAdjustmentBehavior="automatic"

  for notches
• Use

  Pressable

  instead of Touchable components
• Test on both iOS and Android real devices
• Use

  KeyboardAvoidingView

  with platform-appropriate behavior for forms
• Handle Android back button in custom navigation flows
• Use expo-image for all image rendering
• Use native navigators (native-stack, native-bottom-tabs)
• Use TypeScript strict mode

MUST NOT DO

• Use ScrollView for dynamic/large lists
• Use inline style objects in list items (breaks memoization)
• Hardcode dimensions (use

  Dimensions

  API, flex, or percentage)
• Ignore memory leaks from subscriptions/listeners
• Skip platform-specific testing
• Use

  setTimeout

  /

  waitFor

  for animations (use Reanimated)
• Use

  .value

  on shared values (use

  .get()

  /

  .set()

  )
• Use

  useAnimatedReaction

  for derivations (use

  useDerivedValue

  )
• Store visual values in state (store state, derive visuals)
• Use

  TouchableOpacity

  or

  TouchableHighlight

  (use

  Pressable

  )
• Use

  @react-navigation/stack

  (use

  native-stack

  )
• Use React Native's

  Image

  component (use

  expo-image

  )

Imported: Output Format

When implementing React Native features, always provide:

1. Component code with TypeScript types
2. Platform-specific handling where differences exist
3. Navigation integration if the component is a screen
4. Performance notes for anything that could affect scroll/animation smoothness