Mercury SkillsMercury Skills

React Native Patterns

Navigation, state management, native modules, performance, animations, and cross-platform strategies

View source44 downloads
react-nativemobilecross-platformjavascriptreact

React Native Patterns#

Build performant cross-platform mobile apps with React Native.

Architecture#

Project Structure#

src/
├── components/    # Reusable UI components
├── screens/       # Screen-level components
├── navigation/    # React Navigation config
├── services/      # API, storage, native modules
├── hooks/         # Custom hooks
├── store/         # State management
├── utils/         # Helpers
└── types/         # TypeScript types
// Stack + Tab pattern
const RootStack = createNativeStackNavigator();
const MainTabs = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Main" component={MainTabs} />
        <RootStack.Screen name="Details" component={DetailsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

Performance#

Key Optimizations#

  • React.memo for pure components
  • useMemo/useCallback for expensive computations
  • FlatList with getItemLayout for perf
  • Image caching with react-native-fast-image
  • Hermes engine for Android
  • Remove console.logs in production

Native Modules#

Use Turbo Modules (New Architecture) for bridging:

// NativeModule.ts
import { TurboModuleRegistry } from 'react-native';
export default TurboModuleRegistry.getEnforcing('MyCustomModule');

Cross-Platform Strategy#

  • Write once, customize per platform with .ios.tsx/.android.tsx extensions
  • Use Platform.select for minor differences
  • Test on both platforms before every release

More in Mobile

View all →

Android Kotlin Patterns

Jetpack Compose, MVVM, Room, Coroutines, DI with Dagger/Hilt, and Play Store submission

androidkotlinjetpack-compose

App Store Optimization (ASO)

Keyword research, title/subtitle strategy, screenshots, ratings, A/B testing, and conversion optimization

asoapp-storemobile

iOS Swift Patterns

SwiftUI, UIKit, MVVM, Combine, async/await, Core Data, and App Store submission patterns

iosswiftswiftui