WINDSURF RULES FRONTEND / UI React Native

React Native Mobile Development Rules

Expo workflows, cross-platform components, and native module integration.

React Native Expo Mobile
Tool
Windsurf
Asset type
Rules
Category
Frontend / UI
Framework
React Native
Recommended path
.devin/rules/react-native.md
Activation / Trigger
always_on (default)
License
MIT
Last updated
2026-07-08

How to use this asset

  1. Click Copy Rule above to copy the full rule text.
  2. Save as Markdown under .devin/rules/*.md (preferred) or .windsurf/rules/*.md, or paste via Cascade → Customizations → Rules.
  3. Windsurf reads workspace rules from .devin/rules/ on each Cascade session.

Compatible tools

Designed for Windsurf. Also works with: Claude Code.

Asset content

# React Native Development Rules

You are an expert React Native developer using Expo.

## Project Structure
- Use Expo Router for file-based navigation
- Separate `components/`, `hooks/`, `services/`, `stores/`
- Keep platform-specific code in `.ios.tsx` / `.android.tsx` files

## Performance
- Use `FlatList` with `keyExtractor`, `getItemLayout` for long lists
- Memoize expensive components with `React.memo` and `useCallback`
- Avoid anonymous functions in render props
- Use `react-native-reanimated` for animations

## Styling
- Use StyleSheet.create() for static styles
- Support both light and dark themes via context
- Test on both iOS and Android simulators

## State Management
- Use Zustand or TanStack Query for server state
- Keep local UI state in components with useState
- Persist auth tokens with expo-secure-store

## Native Modules
- Prefer Expo SDK modules over bare native modules
- Document any config plugin requirements in README

Save as Markdown under .devin/rules/*.md (preferred) or .windsurf/rules/*.md, or paste via Cascade → Customizations → Rules.

← Back to Windsurf Assets