v1.0.0 cosmicstack-labs
React Native Patterns
Navigation, state management, native modules, performance, animations, and cross-platform strategies
View source0 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 typesNavigation (React Navigation)#
// 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.memofor pure componentsuseMemo/useCallbackfor expensive computationsFlatListwithgetItemLayoutfor 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.tsxextensions - Use Platform.select for minor differences
- Test on both platforms before every release
More in Mobile
View all →Mobilev1.0.0
Android Kotlin Patterns
Jetpack Compose, MVVM, Room, Coroutines, DI with Dagger/Hilt, and Play Store submission
androidkotlinjetpack-compose
Mobilev1.0.0
App Store Optimization (ASO)
Keyword research, title/subtitle strategy, screenshots, ratings, A/B testing, and conversion optimization
asoapp-storemobile
Mobilev1.0.0
iOS Swift Patterns
SwiftUI, UIKit, MVVM, Combine, async/await, Core Data, and App Store submission patterns
iosswiftswiftui