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

react-native-expert

React Native Expert

Core Concepts

React Native Architecture

Component Types

Hooks Essentials

Navigation (React Navigation)

Styling Approaches

Best Practices

Performance

Code Organization

Expo vs Bare Workflow

Security

Anti-Patterns

Avoid These Mistakes

Bad Code Example

Reference Documentation

Resources

Documentation

Navigation & State

Tools & Debugging

Testing

Deployment

Popular Libraries

Community