AgentAlley

Skills · Design & UI

React Native Design

Unverified●30/40

Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add react-native-design

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

The whole source

No sign-in, no blur, nothing truncated
react-native-design/SKILL.md130 lines3.9 KBRawView on GitHub
Frontmatter — 2 properties
namereact-native-design
descriptionMaster React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
1---
2name: react-native-design
3description: Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
4---A5 — No allowed-tools declared — no way to tell what this skill may touch
5 
6# React Native Design
7 
8Master React Native styling patterns, React Navigation, and Reanimated 3 to build performant, cross-platform mobile applications with native-quality user experiences.
9 
10## When to Use This Skill
11 
12- Building cross-platform mobile apps with React Native
13- Implementing navigation with React Navigation 6+
14- Creating performant animations with Reanimated 3
15- Styling components with StyleSheet and styled-components
16- Building responsive layouts for different screen sizes
17- Implementing platform-specific designs (iOS/Android)
18- Creating gesture-driven interactions with Gesture Handler
19- Optimizing React Native performance
20 
21## Detailed section: Core Concepts
22 
23Originally a 6471-byte section in this SKILL.md. Moved to `references/details.md` to fit Codex's 8 KB skill body cap.
24 
25## Quick Start Component
26 
27```typescript
28import React from 'react';
29import {
30 View,
31 Text,
32 StyleSheet,
33 Pressable,
34 Image,
35} from 'react-native';
36import Animated, {
37 useSharedValue,
38 useAnimatedStyle,
39 withSpring,
40} from 'react-native-reanimated';
41 
42interface ItemCardProps {
43 title: string;
44 subtitle: string;
45 imageUrl: string;
46 onPress: () => void;
47}
48 
49const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
50 
51export function ItemCard({ title, subtitle, imageUrl, onPress }: ItemCardProps) {
52 const scale = useSharedValue(1);
53 
54 const animatedStyle = useAnimatedStyle(() => ({
55 transform: [{ scale: scale.value }],
56 }));
57 
58 return (
59 <AnimatedPressable
60 style={[styles.card, animatedStyle]}
61 onPress={onPress}
62 onPressIn={() => { scale.value = withSpring(0.97); }}
63 onPressOut={() => { scale.value = withSpring(1); }}
64 >
65 <Image source={{ uri: imageUrl }} style={styles.image} />
66 <View style={styles.content}>
67 <Text style={styles.title} numberOfLines={1}>
68 {title}
69 </Text>
70 <Text style={styles.subtitle} numberOfLines={2}>
71 {subtitle}
72 </Text>
73 </View>
74 </AnimatedPressable>
75 );
76}
77 
78const styles = StyleSheet.create({
79 card: {
80 backgroundColor: '#ffffff',
81 borderRadius: 16,
82 overflow: 'hidden',
83 shadowColor: '#000',
84 shadowOffset: { width: 0, height: 2 },
85 shadowOpacity: 0.1,
86 shadowRadius: 8,
87 elevation: 4,
88 },
89 image: {
90 width: '100%',
91 height: 160,
92 backgroundColor: '#f3f4f6',
93 },
94 content: {
95 padding: 16,
96 gap: 4,
97 },
98 title: {
99 fontSize: 18,
100 fontWeight: '600',
101 color: '#1f2937',
102 },
103 subtitle: {
104 fontSize: 14,
105 color: '#6b7280',
106 lineHeight: 20,
107 },
108});
109```
110 
111## Best Practices
112 
1131. **Use TypeScript**: Define navigation and prop types for type safety
1142. **Memoize Components**: Use `React.memo` and `useCallback` to prevent unnecessary rerenders
1153. **Run Animations on UI Thread**: Use Reanimated worklets for 60fps animations
1164. **Avoid Inline Styles**: Use StyleSheet.create for performance
1175. **Handle Safe Areas**: Use `SafeAreaView` or `useSafeAreaInsets`
1186. **Test on Real Devices**: Simulator/emulator performance differs from real devices
1197. **Use FlatList for Lists**: Never use ScrollView with map for long lists
1208. **Platform-Specific Code**: Use Platform.select for iOS/Android differences
121 
122## Common Issues
123 
124- **Gesture Conflicts**: Wrap gestures with `GestureDetector` and use `simultaneousHandlers`
125- **Navigation Type Errors**: Define `ParamList` types for all navigators
126- **Animation Jank**: Move animations to UI thread with `runOnUI` worklets
127- **Memory Leaks**: Cancel animations and cleanup in useEffect
128- **Font Loading**: Use `expo-font` or `react-native-asset` for custom fonts
129- **Safe Area Issues**: Test on notched devices (iPhone, Android with cutouts)
130 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Design & UI
Brand Protection — Amazon 🛡️Amazon brand protection toolkit. Detect hijackers, counterfeits, and unauthorized sellers. Includes MAP violation monitoring, trademark abuse detection, complaint templates for Brand Registry, and test buy evidence collection guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — eBay 🛡️eBay brand protection toolkit. Detect unauthorized sellers, counterfeits, and VeRO violations. Includes price monitoring, trademark abuse detection, VeRO complaint templates, and enforcement guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — Shopify/DTC 🛡️Shopify/DTC brand protection toolkit. Detect counterfeit stores, unauthorized resellers, and trademark violations. Includes DMCA takedown templates, domain monitoring, and social media infringement detection. No API key required.Design & UI · MIT◐····●35/40Brand Protection — TikTok Shop 🛡️TikTok Shop brand protection toolkit. Detect unauthorized sellers, counterfeit products, and affiliate abuse. Includes TikTok IP Protection reporting, influencer misuse detection, and complaint templates. No API key required.Design & UI · MIT◐····●35/40