@sylix/coworker 2.0.11 → 2.0.14

package/dist/skills/defaults/frontend/react-native-design.md

@@ -0,0 +1,440 @@
+---
+name: react-native-design
+description: 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.
+---
+
+# React Native Design
+
+Master React Native styling patterns, React Navigation, and Reanimated 3 to build performant, cross-platform mobile applications with native-quality user experiences.
+
+## When to Use This Skill
+
+- Building cross-platform mobile apps with React Native
+- Implementing navigation with React Navigation 6+
+- Creating performant animations with Reanimated 3
+- Styling components with StyleSheet and styled-components
+- Building responsive layouts for different screen sizes
+- Implementing platform-specific designs (iOS/Android)
+- Creating gesture-driven interactions with Gesture Handler
+- Optimizing React Native performance
+
+## Core Concepts
+
+### 1. StyleSheet and Styling
+
+**Basic StyleSheet:**
+
+```typescript
+import { StyleSheet, View, Text } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#ffffff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666666',
+    lineHeight: 24,
+  },
+});
+
+function Card() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Title</Text>
+      <Text style={styles.subtitle}>Subtitle text</Text>
+    </View>
+  );
+}
+```
+
+**Dynamic Styles:**
+
+```typescript
+interface CardProps {
+  variant: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+
+function Card({ variant, disabled }: CardProps) {
+  return (
+    <View style={[
+      styles.card,
+      variant === 'primary' ? styles.primary : styles.secondary,
+      disabled && styles.disabled,
+    ]}>
+      <Text style={styles.text}>Content</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 12,
+  },
+  primary: {
+    backgroundColor: '#6366f1',
+  },
+  secondary: {
+    backgroundColor: '#f3f4f6',
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  text: {
+    fontSize: 16,
+  },
+});
+```
+
+### 2. Flexbox Layout
+
+**Row and Column Layouts:**
+
+```typescript
+const styles = StyleSheet.create({
+  // Vertical stack (column)
+  column: {
+    flexDirection: "column",
+    gap: 12,
+  },
+  // Horizontal stack (row)
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  // Space between items
+  spaceBetween: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  // Centered content
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  // Fill remaining space
+  fill: {
+    flex: 1,
+  },
+});
+```
+
+### 3. React Navigation Setup
+
+**Stack Navigator:**
+
+```typescript
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type RootStackParamList = {
+  Home: undefined;
+  Detail: { itemId: string };
+  Settings: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          headerStyle: { backgroundColor: '#6366f1' },
+          headerTintColor: '#ffffff',
+          headerTitleStyle: { fontWeight: '600' },
+        }}
+      >
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{ title: 'Home' }}
+        />
+        <Stack.Screen
+          name="Detail"
+          component={DetailScreen}
+          options={({ route }) => ({
+            title: `Item ${route.params.itemId}`,
+          })}
+        />
+        <Stack.Screen name="Settings" component={SettingsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+```
+
+**Tab Navigator:**
+
+```typescript
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Ionicons } from '@expo/vector-icons';
+
+type TabParamList = {
+  Home: undefined;
+  Search: undefined;
+  Profile: undefined;
+};
+
+const Tab = createBottomTabNavigator<TabParamList>();
+
+function TabNavigator() {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused, color, size }) => {
+          const icons: Record<string, keyof typeof Ionicons.glyphMap> = {
+            Home: focused ? 'home' : 'home-outline',
+            Search: focused ? 'search' : 'search-outline',
+            Profile: focused ? 'person' : 'person-outline',
+          };
+          return <Ionicons name={icons[route.name]} size={size} color={color} />;
+        },
+        tabBarActiveTintColor: '#6366f1',
+        tabBarInactiveTintColor: '#9ca3af',
+      })}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Search" component={SearchScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+    </Tab.Navigator>
+  );
+}
+```
+
+### 4. Reanimated 3 Basics
+
+**Animated Values:**
+
+```typescript
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+function AnimatedBox() {
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  const handlePress = () => {
+    scale.value = withSpring(1.2, {}, () => {
+      scale.value = withSpring(1);
+    });
+  };
+
+  return (
+    <Pressable onPress={handlePress}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </Pressable>
+  );
+}
+```
+
+**Gesture Handler Integration:**
+
+```typescript
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+
+function DraggableCard() {
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const gesture = Gesture.Pan()
+    .onUpdate((event) => {
+      translateX.value = event.translationX;
+      translateY.value = event.translationY;
+    })
+    .onEnd(() => {
+      translateX.value = withSpring(0);
+      translateY.value = withSpring(0);
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+    ],
+  }));
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.card, animatedStyle]}>
+        <Text>Drag me!</Text>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+```
+
+### 5. Platform-Specific Styling
+
+```typescript
+import { Platform, StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+  text: {
+    fontFamily: Platform.OS === "ios" ? "SF Pro Text" : "Roboto",
+    fontSize: 16,
+  },
+});
+
+// Platform-specific components
+import { Platform } from "react-native";
+const StatusBarHeight = Platform.OS === "ios" ? 44 : 0;
+```
+
+## Quick Start Component
+
+```typescript
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  Image,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+
+interface ItemCardProps {
+  title: string;
+  subtitle: string;
+  imageUrl: string;
+  onPress: () => void;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function ItemCard({ title, subtitle, imageUrl, onPress }: ItemCardProps) {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <AnimatedPressable
+      style={[styles.card, animatedStyle]}
+      onPress={onPress}
+      onPressIn={() => { scale.value = withSpring(0.97); }}
+      onPressOut={() => { scale.value = withSpring(1); }}
+    >
+      <Image source={{ uri: imageUrl }} style={styles.image} />
+      <View style={styles.content}>
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <Text style={styles.subtitle} numberOfLines={2}>
+          {subtitle}
+        </Text>
+      </View>
+    </AnimatedPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  image: {
+    width: '100%',
+    height: 160,
+    backgroundColor: '#f3f4f6',
+  },
+  content: {
+    padding: 16,
+    gap: 4,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1f2937',
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#6b7280',
+    lineHeight: 20,
+  },
+});
+```
+
+## Best Practices
+
+1. **Use TypeScript**: Define navigation and prop types for type safety
+2. **Memoize Components**: Use `React.memo` and `useCallback` to prevent unnecessary rerenders
+3. **Run Animations on UI Thread**: Use Reanimated worklets for 60fps animations
+4. **Avoid Inline Styles**: Use StyleSheet.create for performance
+5. **Handle Safe Areas**: Use `SafeAreaView` or `useSafeAreaInsets`
+6. **Test on Real Devices**: Simulator/emulator performance differs from real devices
+7. **Use FlatList for Lists**: Never use ScrollView with map for long lists
+8. **Platform-Specific Code**: Use Platform.select for iOS/Android differences
+
+## Common Issues
+
+- **Gesture Conflicts**: Wrap gestures with `GestureDetector` and use `simultaneousHandlers`
+- **Navigation Type Errors**: Define `ParamList` types for all navigators
+- **Animation Jank**: Move animations to UI thread with `runOnUI` worklets
+- **Memory Leaks**: Cancel animations and cleanup in useEffect
+- **Font Loading**: Use `expo-font` or `react-native-asset` for custom fonts
+- **Safe Area Issues**: Test on notched devices (iPhone, Android with cutouts)
+
+## Resources
+
+- [React Native Documentation](https://reactnative.dev/)
+- [React Navigation](https://reactnavigation.org/)
+- [Reanimated Documentation](https://docs.swmansion.com/react-native-reanimated/)
+- [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/)
+- [Expo Documentation](https://docs.expo.dev/)