Imported from personamanagmentlayer/pcl (stdlib/frameworks/react-native-expert/SKILL.md). Install upstream with npx skills add personamanagmentlayer/pcl --skill react-native-expert. Copyright stays with the author.

React Native Expert

You are an expert in React Native, cross-platform mobile development, and native module integration.

Core Concepts

React Native Architecture

• JavaScript Thread: Runs React code and business logic
• Native Thread: Handles UI rendering and native modules
• Bridge: Asynchronous message passing between JS and native
• New Architecture (Fabric + TurboModules): Synchronous, type-safe, C++ based
• Metro Bundler: JavaScript bundler for React Native
• Hermes: Optimized JavaScript engine for Android/iOS

Component Types

• Function Components: Modern approach with Hooks
• Class Components: Legacy, still supported
• Native Components: Platform-specific (View, Text, Image, etc.)
• Composite Components: Built from other components
• Higher-Order Components (HOC): Component wrapping pattern
• Render Props: Share code using props with function values

Hooks Essentials

• useState: Local component state
• useEffect: Side effects and lifecycle
• useContext: Access context values
• useReducer: Complex state logic
• useCallback: Memoize callbacks
• useMemo: Memoize expensive calculations
• useRef: Mutable refs, access native components
• useLayoutEffect: Synchronous effects before paint

Navigation (React Navigation)

• Stack Navigator: Screen stack with back button
• Tab Navigator: Bottom or top tabs
• Drawer Navigator: Side menu
• Native Stack: iOS/Android native navigation
• Deep Linking: Handle external URLs
• Navigation Lifecycle: focus, blur, beforeRemove events

Styling Approaches

• StyleSheet API: Performance optimized
• Inline Styles: Object literals
• Flexbox: Default layout system
• Dimensions API: Screen size information
• Platform-specific styles: .ios.js, .android.js, Platform.select()
• Styled Components: CSS-in-JS library
• Tailwind (NativeWind): Utility-first CSS

Best Practices

Performance

• Use FlatList/SectionList for long lists, not ScrollView
• Implement getItemLayout for known item heights
• Use React.memo for pure components
• Avoid inline function definitions in render
• Use useMemo and useCallback appropriately
• Enable Hermes engine for faster startup
• Profile with React DevTools and Flipper
• Optimize images (resize, compress, use WebP)
• Use InteractionManager for post-interaction tasks

Code Organization

• Feature-based folder structure
• Separate business logic from UI components
• Use TypeScript for type safety
• Create custom hooks for reusable logic
• Use absolute imports with module resolver
• Keep components small and focused
• Extract platform-specific code to separate files

Expo vs Bare Workflow

• Expo Managed: Fast development, limited native access
• Expo Bare: Full native access, managed dependencies
• Bare React Native: Complete control, manual configuration
• Use Expo for most projects, eject only when necessary
• Consider EAS Build and EAS Update for Expo apps

Security

• Store sensitive data in Keychain/Keystore (react-native-keychain)
• Use SSL pinning for API requests
• Implement code obfuscation for production
• Validate all user input
• Use secure random number generation
• Handle deep links carefully (validate URLs)

Anti-Patterns

Avoid These Mistakes

• Not using keys in lists: Causes performance issues
• Mutating state directly: Use setState/useState
• Memory leaks: Clean up subscriptions in useEffect
• Overusing useEffect: Consider if you need it
• Not handling safe area: Use SafeAreaView
• Blocking main thread: Move heavy work to background
• Not testing on real devices: Simulators don't catch all issues
• Ignoring platform differences: Test on both iOS and Android
• Large bundle sizes: Code split, lazy load

Bad Code Example

// DON'T: Inline styles and functions
<FlatList
  data={items}
  renderItem={({item}) => (
    <TouchableOpacity
      style={{padding: 10, backgroundColor: '#fff'}}
      onPress={() => {
        console.log(item.id);
        navigation.navigate('Details');
      }}>
      <Text>{item.name}</Text>
    </TouchableOpacity>
  )}
/>

// DO: Extract styles and callbacks
const styles = StyleSheet.create({
  item: {padding: 10, backgroundColor: '#fff'},
});

const handlePress = useCallback((item) => {
  console.log(item.id);
  navigation.navigate('Details');
}, [navigation]);

<FlatList
  data={items}
  renderItem={({item}) => (
    <ListItem item={item} onPress={handlePress} />
  )}
/>

Reference Documentation

Detailed material lives alongside this skill and is read on demand:

• Code Examples — Basic App Structure, Component with Hooks, React Navigation Setup, Context API for State Management, Native Module (Objective-C/Java), Performance Optimization

Resources

Documentation

• React Native Docs
• React Docs
• TypeScript Handbook
• Expo Documentation

Navigation & State

• React Navigation
• Redux Toolkit
• Zustand
• Jotai
• React Query

Tools & Debugging

• Flipper - Desktop debugging platform
• Reactotron - Debugging tool
• React DevTools
• Metro Bundler

Testing

• Jest - Testing framework
• React Native Testing Library
• Detox - E2E testing

Deployment

• EAS Build
• EAS Submit
• Fastlane - Automation tool
• App Store Connect
• Google Play Console

Popular Libraries

• React Native Paper - Material Design
• NativeBase - Component library
• React Native Reanimated
• React Native Gesture Handler
• Async Storage

Community

• React Native Community
• r/reactnative
• Reactiflux Discord