mcpbeat

React Native Patterns

cosmicstack-labs/react-native-patterns

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

489 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
365
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill react-native-patterns

The instruction itself

8 sections, as written by the author

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)

// 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

How to use it

Copy the folder

Take cosmicstack-labs/react-native-patterns from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.