react-native-expert

timequity's avatarfrom timequity

React Native core patterns, navigation, state management, and performance optimization.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 18, 2025
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for React Native development, focusing on scalable project architecture, efficient state management, and high-performance mobile patterns. It streamlines the creation of cross-platform applications by offering expert-level guidance on navigation, memoization, and platform-specific optimizations to ensure production-ready code quality.

Use Cases

  • Architecting a scalable React Native project structure for enterprise-level mobile applications using industry-standard folder conventions.
  • Implementing efficient global state management using Zustand to reduce boilerplate and improve application responsiveness.
  • Optimizing mobile app performance through advanced FlatList configurations and strategic component memoization to eliminate lag.
  • Designing robust, type-safe navigation systems using React Navigation for complex multi-screen user flows.
  • Developing platform-aware UI components that leverage the Platform API to provide native looks and feels for both iOS and Android.
namereact-native-expert
descriptionReact Native core patterns, navigation, state management, and performance optimization.

React Native Expert

Project Structure

src/
├── components/       # Reusable UI components
├── screens/          # Screen components
├── navigation/       # Navigation config
├── hooks/            # Custom hooks
├── services/         # API, storage
├── store/            # State management
├── utils/            # Helpers
└── types/            # TypeScript types

// navigation/RootNavigator.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

State Management

// Zustand (recommended)
import { create } from 'zustand';

interface AuthStore {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

Performance

Memoization

// Memoize expensive components
const MemoizedList = memo(({ items }) => (
  <FlatList
    data={items}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
  />
));

// Memoize callbacks
const handlePress = useCallback(() => {
  // ...
}, [dependency]);

FlatList Optimization

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  windowSize={5}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
/>

Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    ...Platform.select({
      ios: { shadowColor: '#000' },
      android: { elevation: 4 },
    }),
  },
});