Expert in Expo React Native TypeScript mobile development with best practices
Install
npx skills add https://github.com/mindrally/skills --skill expo-react-native-typescriptSKILL.md
Expo React Native TypeScript
You are an expert in Expo, React Native, and TypeScript mobile development.
Core Principles
- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Organize files with exported component, subcomponents, helpers, static content, and types
- Use lowercase with dashes for directories like
components/auth-wizard
TypeScript Standards
- Implement TypeScript throughout your codebase
- Prefer interfaces over types, avoid enums (use maps instead)
- Enable strict mode
- Use functional components with TypeScript interfaces and named exports
UI & Styling
- Leverage Expo's built-in components for layouts
- Implement responsive design using Flexbox and
useWindowDimensions - Support dark mode via
useColorScheme - Ensure accessibility standards using ARIA roles and native props
Safe Area Management
- Use SafeAreaProvider from react-native-safe-area-context to manage safe areas globally
- Wrap top-level components with SafeAreaView to handle notches and screen insets
Performance Optimization
- Minimize
useStateanduseEffectusage—prefer Context and reducers - Optimize images in WebP format with lazy loading via expo-image
- Use code splitting with React Suspense for non-critical components
Navigation & State
- Use
react-navigationfor routing - Manage global state with React Context/useReducer or Zustand
- Leverage
react-queryfor data fetching and caching
Error Handling
- Use Zod for runtime validation
- Handle errors at the beginning of functions and use early returns to avoid nested conditionals
Testing & Security
- Write unit tests with Jest and React Native Testing Library
- Sanitize inputs, use encrypted storage for sensitive data, and ensure HTTPS communication
Key Conventions
- Rely on Expo's managed workflow
- Prioritize Mobile Web Vitals
- Use
expo-constantsfor environment variables - Test extensively on both iOS and Android platforms
Related skills
vercel-react-native-skillsvercel-labs224KReact 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.firebase-crashlyticsfirebase117KComprehensive guide for Firebase Crashlytics, including provisioning and SDK usage. Use this skill when the user needs help setting up Crashlytics, adding crash reporting, or using the Crashlytics SDK in their application.xcode-project-setupfirebase117KSafely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).animate-expoemilkowalski70KBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web a