react-native-patterns
Navigation, state management, native modules, performance, animations, and cross-platform strategies
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill react-native-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ``` ### Navigation (React Navigation) ```typescript // 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: ```typescript // NativeModule.ts i
- Architecture
- Project Structure
- Navigation (React Navigation)
- Performance
- Key Optimizations
- Native Modules
- Cross-Platform Strategy
What does the react-native-patterns skill do?
Navigation, state management, native modules, performance, animations, and cross-platform strategies
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill react-native-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.