Agent skill
react-native-expert
React Native core patterns, navigation, state management, and performance optimization.
Install this agent skill to your Project
npx add-skill https://github.com/timequity/plugins/tree/main/vibe-coder/skills/mobile/react-native-expert
SKILL.md
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
// 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 },
}),
},
});
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
claude-code-course
Learn Claude Code in 5 hands-on lessons. From basics to building applications. Use when: user wants to learn Claude Code, asks "how do I...", or is new. Triggers: "learn", "teach me", "how does this work", "I'm new", "course".
foundations
Claude Code basics for new users. Covers essential concepts and commands. Use when: user is new to Claude Code or routed here by learning-path assessment.
advanced
Claude Code mastery for power users. Build agents, MCP servers, publish plugins. Use when: user wants to create agents, build integrations, or publish plugins.
lessons
Lesson content for Claude Code Course. Use when: loading lesson content. Internal skill - contains lesson files.
intermediate
Claude Code customization for comfortable users. Covers skills, commands, MCP, hooks. Use when: user knows basics and wants to customize Claude Code.
course-help
Help and navigation for Claude Code Course. Use when: user asks about the course, lessons, or progress. Triggers: "help", "course help", "what lessons", "my progress".
Didn't find tool you were looking for?