SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsreact-native-expert

react-native-expert

Frontend & websites

View repository

Updated 10-16 03:39

About this skill

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

Navigation & State

Tools & Debugging

Testing

Deployment

Popular Libraries

Community