@ranimontagna/agent-toolkit 0.1.5 → 0.1.6

package/skills/frontend/react-native/react-native-expert/references/expo-router.md

@@ -0,0 +1,187 @@
+# Expo Router
+
+## Project Structure
+
+```
+app/
+├── _layout.tsx           # Root layout
+├── index.tsx             # Home (/)
+├── +not-found.tsx        # 404 page
+├── (tabs)/               # Tab group
+│   ├── _layout.tsx       # Tab bar config
+│   ├── index.tsx         # First tab
+│   └── profile.tsx       # Profile tab
+├── (auth)/               # Auth group (no tabs)
+│   ├── _layout.tsx
+│   ├── login.tsx
+│   └── register.tsx
+├── settings/
+│   ├── _layout.tsx       # Stack layout
+│   ├── index.tsx         # Settings main
+│   └── notifications.tsx
+└── details/[id].tsx      # Dynamic route
+```
+
+## Root Layout
+
+```typescript
+// app/_layout.tsx
+import { Stack } from 'expo-router';
+import { ThemeProvider } from '@react-navigation/native';
+
+export default function RootLayout() {
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="(auth)" />
+        <Stack.Screen
+          name="details/[id]"
+          options={{ presentation: 'modal' }}
+        />
+      </Stack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Tab Layout
+
+```typescript
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#007AFF',
+        headerShown: true,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home" color={color} size={size} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person" color={color} size={size} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+```
+
+## Navigation
+
+```typescript
+import { router, useLocalSearchParams, Link } from 'expo-router';
+
+// Programmatic navigation
+router.push('/details/123');           // Push to stack
+router.replace('/home');               // Replace current
+router.back();                          // Go back
+router.canGoBack();                     // Check if can go back
+
+// With params
+router.push({
+  pathname: '/details/[id]',
+  params: { id: '123', title: 'Item' },
+});
+
+// Link component
+<Link href="/profile" asChild>
+  <Pressable>
+    <Text>Go to Profile</Text>
+  </Pressable>
+</Link>
+
+// Reading params
+function DetailsScreen() {
+  const { id, title } = useLocalSearchParams<{ id: string; title?: string }>();
+  return <Text>Details for {id}</Text>;
+}
+```
+
+## Protected Routes
+
+```typescript
+// app/(auth)/_layout.tsx
+import { Redirect, Stack } from 'expo-router';
+import { useAuth } from '@/hooks/useAuth';
+
+export default function AuthLayout() {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (user) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  return <Stack screenOptions={{ headerShown: false }} />;
+}
+
+// app/(tabs)/_layout.tsx
+export default function TabLayout() {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    return <Redirect href="/(auth)/login" />;
+  }
+
+  return <Tabs>...</Tabs>;
+}
+```
+
+## Deep Linking
+
+```json
+// app.json
+{
+  "expo": {
+    "scheme": "myapp",
+    "web": {
+      "bundler": "metro"
+    }
+  }
+}
+```
+
+```typescript
+// Handle: myapp://details/123
+// app/details/[id].tsx handles automatically
+```
+
+## Quick Reference
+
+| Component | Purpose |
+|-----------|---------|
+| `<Stack>` | Stack navigator |
+| `<Tabs>` | Tab navigator |
+| `<Drawer>` | Drawer navigator |
+| `<Link>` | Declarative navigation |
+
+| router method | Behavior |
+|---------------|----------|
+| `push()` | Add to stack |
+| `replace()` | Replace current |
+| `back()` | Go back |
+| `dismissAll()` | Dismiss modals |

package/skills/frontend/react-native/react-native-expert/references/list-optimization.md

@@ -0,0 +1,204 @@
+# List Optimization
+
+## Optimized FlatList
+
+```typescript
+import { FlatList, ListRenderItem } from 'react-native';
+import { memo, useCallback } from 'react';
+
+interface Item {
+  id: string;
+  title: string;
+  subtitle: string;
+}
+
+// Memoized list item
+const ListItem = memo(function ListItem({
+  item,
+  onPress
+}: {
+  item: Item;
+  onPress: (id: string) => void;
+}) {
+  return (
+    <Pressable onPress={() => onPress(item.id)} style={styles.item}>
+      <Text style={styles.title}>{item.title}</Text>
+      <Text style={styles.subtitle}>{item.subtitle}</Text>
+    </Pressable>
+  );
+});
+
+function OptimizedList({ data }: { data: Item[] }) {
+  // Memoize callbacks
+  const handlePress = useCallback((id: string) => {
+    console.log('Selected:', id);
+  }, []);
+
+  const renderItem: ListRenderItem<Item> = useCallback(
+    ({ item }) => <ListItem item={item} onPress={handlePress} />,
+    [handlePress]
+  );
+
+  const keyExtractor = useCallback((item: Item) => item.id, []);
+
+  // Fixed height for getItemLayout
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: ITEM_HEIGHT,
+      offset: ITEM_HEIGHT * index,
+      index,
+    }),
+    []
+  );
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      getItemLayout={getItemLayout}
+      // Performance props
+      removeClippedSubviews
+      maxToRenderPerBatch={10}
+      windowSize={5}
+      initialNumToRender={10}
+      updateCellsBatchingPeriod={50}
+    />
+  );
+}
+
+const ITEM_HEIGHT = 72;
+```
+
+## SectionList
+
+```typescript
+import { SectionList } from 'react-native';
+
+interface Section {
+  title: string;
+  data: Item[];
+}
+
+function GroupedList({ sections }: { sections: Section[] }) {
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: Section }) => (
+      <View style={styles.sectionHeader}>
+        <Text style={styles.sectionTitle}>{section.title}</Text>
+      </View>
+    ),
+    []
+  );
+
+  return (
+    <SectionList
+      sections={sections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      keyExtractor={keyExtractor}
+      stickySectionHeadersEnabled
+    />
+  );
+}
+```
+
+## Pull to Refresh
+
+```typescript
+function RefreshableList({ data, onRefresh }: Props) {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await onRefresh();
+    setRefreshing(false);
+  }, [onRefresh]);
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={handleRefresh}
+          tintColor="#007AFF"
+        />
+      }
+    />
+  );
+}
+```
+
+## Infinite Scroll
+
+```typescript
+function InfiniteList() {
+  const [data, setData] = useState<Item[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+
+  const loadMore = useCallback(async () => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
+    const newItems = await fetchMoreItems(data.length);
+
+    if (newItems.length === 0) {
+      setHasMore(false);
+    } else {
+      setData(prev => [...prev, ...newItems]);
+    }
+    setLoading(false);
+  }, [data.length, loading, hasMore]);
+
+  const renderFooter = useCallback(() => {
+    if (!loading) return null;
+    return <ActivityIndicator style={styles.loader} />;
+  }, [loading]);
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      onEndReached={loadMore}
+      onEndReachedThreshold={0.5}
+      ListFooterComponent={renderFooter}
+    />
+  );
+}
+```
+
+## FlashList (Alternative)
+
+```typescript
+import { FlashList } from '@shopify/flash-list';
+
+function FastList({ data }: { data: Item[] }) {
+  return (
+    <FlashList
+      data={data}
+      renderItem={renderItem}
+      estimatedItemSize={72}
+      keyExtractor={keyExtractor}
+    />
+  );
+}
+```
+
+## Quick Reference
+
+| Prop | Purpose |
+|------|---------|
+| `removeClippedSubviews` | Unmount off-screen items |
+| `maxToRenderPerBatch` | Items per render batch |
+| `windowSize` | Render window multiplier |
+| `initialNumToRender` | Initial items to render |
+| `getItemLayout` | Skip measurement (fixed height) |
+
+| Optimization | When |
+|--------------|------|
+| `memo()` | All list items |
+| `useCallback` | renderItem, keyExtractor |
+| `getItemLayout` | Fixed height items |
+| `FlashList` | Very large lists |

package/skills/frontend/react-native/react-native-expert/references/platform-handling.md

@@ -0,0 +1,188 @@
+# Platform Handling
+
+## Platform.select
+
+```typescript
+import { Platform, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    backgroundColor: '#fff',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+  text: {
+    fontFamily: Platform.select({
+      ios: 'Helvetica Neue',
+      android: 'Roboto',
+    }),
+  },
+});
+```
+
+## Platform.OS
+
+```typescript
+import { Platform } from 'react-native';
+
+function MyComponent() {
+  const isIOS = Platform.OS === 'ios';
+  const isAndroid = Platform.OS === 'android';
+
+  return (
+    <View>
+      {isIOS && <IOSOnlyComponent />}
+      <Text>{isAndroid ? 'Android' : 'iOS'}</Text>
+    </View>
+  );
+}
+```
+
+## Platform-Specific Files
+
+```
+components/
+├── Button.tsx           # Shared logic
+├── Button.ios.tsx       # iOS-specific
+└── Button.android.tsx   # Android-specific
+```
+
+```typescript
+// Import resolves to correct platform file
+import Button from './components/Button';
+```
+
+## SafeAreaView
+
+```typescript
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// Method 1: SafeAreaView component
+function Screen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Content />
+    </SafeAreaView>
+  );
+}
+
+// Method 2: useSafeAreaInsets hook (more control)
+function CustomHeader() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.header, { paddingTop: insets.top }]}>
+      <Text>Header</Text>
+    </View>
+  );
+}
+
+// Method 3: SafeAreaProvider context
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+function App() {
+  return (
+    <SafeAreaProvider>
+      <Navigation />
+    </SafeAreaProvider>
+  );
+}
+```
+
+## KeyboardAvoidingView
+
+```typescript
+import { KeyboardAvoidingView, Platform } from 'react-native';
+
+function FormScreen() {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+      keyboardVerticalOffset={Platform.select({ ios: 88, android: 0 })}
+    >
+      <ScrollView>
+        <TextInput placeholder="Name" />
+        <TextInput placeholder="Email" />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+```
+
+## StatusBar
+
+```typescript
+import { StatusBar, Platform } from 'react-native';
+
+function Screen() {
+  return (
+    <>
+      <StatusBar
+        barStyle={Platform.OS === 'ios' ? 'dark-content' : 'light-content'}
+        backgroundColor={Platform.OS === 'android' ? '#000' : undefined}
+      />
+      <Content />
+    </>
+  );
+}
+```
+
+## Android Back Button
+
+```typescript
+import { useEffect } from 'react';
+import { BackHandler, Platform } from 'react-native';
+
+function useBackHandler(handler: () => boolean) {
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handler
+    );
+
+    return () => subscription.remove();
+  }, [handler]);
+}
+
+// Usage
+function Screen() {
+  useBackHandler(() => {
+    if (hasUnsavedChanges) {
+      showDiscardAlert();
+      return true; // Prevent default back
+    }
+    return false; // Allow default back
+  });
+}
+```
+
+## Quick Reference
+
+| API | Purpose |
+|-----|---------|
+| `Platform.OS` | Get platform ('ios' / 'android') |
+| `Platform.select()` | Platform-specific values |
+| `Platform.Version` | OS version number |
+| `.ios.tsx` / `.android.tsx` | Platform-specific files |
+
+| Component | Purpose |
+|-----------|---------|
+| `SafeAreaView` | Avoid notch/home indicator |
+| `KeyboardAvoidingView` | Keyboard handling |
+| `StatusBar` | Status bar styling |
+| `BackHandler` | Android back button |